No Result Found

Ignoring Dynamic Elements

A guide for ignoring dynamic elements in Appium or WebdriverIO for mobile applications.

You can have elements on your screen such as dates or headlines that change dynamically. Such elements that change frequently, can pose challenges when it comes to consistent visual analysis. To avoid irrelevant differences in App Percy, you can either mock these elements to maintain consistent values or ignore these regions entirely within your App Percy mobile application.

To ignore specific regions within your script, App Percy offers the below options to ignore elements:

  • XPath
  • Accessibility ID
  • Pixel-based coordinates
  • By directly identifying the elements in your test script

Sample codes

Ignore elements using XPath

Copy icon Copy 
import io.percy.appium.AppPercy;
import io.percy.appium.lib.IgnoreRegion;
public class Example {
  private static AppPercy percy;
	public static void main(String[] args) throws MalformedURLException, InterruptedException {
    	DesiredCapabilities caps = new DesiredCapabilities();
      // Add caps here
      AndroidDriver<AndroidElement> driver = new AndroidDriver<AndroidElement>(
          new URL("http://hub.browserstack.com/wd/hub"), caps);
      percy = new AppPercy(driver);
      // Add ignore region options here
      ScreenshotOptions options = new ScreenshotOptions();
      List<String> ignoreRegionXpaths = new ArrayList<String>();
      
      // add valid xpaths of element that you want to ignore in visual diff
      ingoreRegionXpaths.add("some_valid_xpath");
      
      // add those to options
      options.setIgnoreRegionXpaths(ignoreRegionXpaths);
      
      // pass options in screenshot call
      percy.screenshot("Screeshot name", options);
      driver.quit();
	}
}
Copy icon Copy 
using PercyIO.Appium.
namespace csharp_appium__jwp_first_android_test_browserstack
{
  class Android
  {
    static void Main(string[] args)
    {
      AppiumOptions capabilities = new AppiumOptions();
      // Add caps here
      
      AndroidDriver<AndroidElement> driver = new AndroidDriver<AndroidElement>(
              new Uri("https://hub-cloud.browserstack.com/wd/hub"), capabilities);
      // Initialize AppPercy
      AppPercy appPercy = new AppPercy(driver);
      var options = new ScreenshotOptions();
      
      // Add ignore region options here
      List<String> xpaths = new List<string>();
      
      // add valid xpath of element that you want to ignore
      xpaths.Add("some_valid_xpaths");
      // add those to options
      options.IgnoreRegionXpaths = xpaths;
      // pass options in screenshot call
      appPercy.Screenshot("Screeshot name", options);
      driver.Quit();
    }
  }
}
Copy icon Copy 
from appium import webdriver
from percy import percy_screenshot
from percy.lib.ignore_region import IgnoreRegion
driver = webdriver.Remote("http://hub.browserstack.com/wd/hub", options)
// add valid xpath of element that you want to ignore
ignore_region_xpaths = ["some_valid_xpath"]
// pass options in screenshot call
percy_screenshot(driver, 'Screeshot name'
	ignore_regions_xpaths = ignore_region_xpaths,
)
Copy icon Copy 
const percyScreenshot = require('@percy/appium-app');
const { IgnoreRegion } = require('@percy/appium-app/percy/util/ignoreRegion')
describe('Search Wikipedia Functionality', () => {
  it('can find search results', async () => {
    
    // add valid xpath of element that you want to ignore
    var ignoreRegionXpaths = [];
    ignoreRegionXpaths.push("some_valid_xpath);
    
    // pass options in screenshot call
    var options = {
      ignoreRegionXpaths,
    }
    // pass options in screenshot call
    await percyScreenshot('Snapshot Name', options);
  });
});
Copy icon Copy 
const percyScreenshot = require('@percy/appium-app');
const { IgnoreRegion } = require('@percy/appium-app/percy/util/ignoreRegion')
let wd = require('wd');
const desiredCaps = {} // Update capabilities
const driver = wd.promiseRemote('http://hub-cloud.browserstack.com/wd/hub');
// add valid xpath of element that you want to ignore
var ignoreRegionXpaths = [];
ignoreRegionXpaths.push("some_valid_xpath);
// pass options in screenshot call
var options = {
  ignoreRegionXpaths,
}
    
driver.init(desiredCaps)
  .then(function(x) {
    console.log(x);
    return percyScreenshot(driver, 'Screenshot Name', options);
  })
  .fin(function() {
    return driver.quit();
  })
  .done();
Copy icon Copy 
require 'appium_lib'
require 'percy-appium-app'
require 'lib/ignore_region'
driver = Appium::Driver.new(
    {
      'caps' => capability,
      'appium_lib' => {
        server_url: "https://#{USER_NAME}:#{ACCESS_KEY}@hub-cloud.browserstack.com/wd/hub"
      }
    }, 
    true
  ).start_driver
ignore_regions_xpaths = ["some_valid_xpath"]
percy_screenshot(driver, name='screenshot name', ignore_regions_xpaths: ignore_regions_xpaths)

Ignore elements using Accessibility ID

Copy icon Copy 
import io.percy.appium.AppPercy;
import io.percy.appium.lib.IgnoreRegion;
public class Example {
  private static AppPercy percy;
	public static void main(String[] args) throws MalformedURLException, InterruptedException {
    	DesiredCapabilities caps = new DesiredCapabilities();
      // Add caps here
      AndroidDriver<AndroidElement> driver = new AndroidDriver<AndroidElement>(
          new URL("http://hub.browserstack.com/wd/hub"), caps);
      percy = new AppPercy(driver);
      // Add ignore region options here
      ScreenshotOptions options = new ScreenshotOptions();
      List<String> ignoreRegionAccessibilityIds = new ArrayList<String>();
    
      // add valid accessibility id of elements that you want to ignore
      ignoreRegionAccessibilityIds.add("some_valid_id");
      
      // add those to options
      options.setIgnoreRegionAccessibilityIds(ignoreRegionAccessibilityIds);
      
      // pass options in screenshot call
      percy.screenshot("Screeshot name", options);
      driver.quit();
	}
}
Copy icon Copy 
using PercyIO.Appium.
namespace csharp_appium__jwp_first_android_test_browserstack
{
  class Android
  {
    static void Main(string[] args)
    {
      AppiumOptions capabilities = new AppiumOptions();
      // Add caps here
      
      AndroidDriver<AndroidElement> driver = new AndroidDriver<AndroidElement>(
              new Uri("https://hub-cloud.browserstack.com/wd/hub"), capabilities);
      // Initialize AppPercy
      AppPercy appPercy = new AppPercy(driver);
      var options = new ScreenshotOptions();
      
      // Add ignore region options here
      List<String> accessiblityIds = new List<string>();
      
      // add valid accessibility id of element that you want to ignore
      accessiblityIds.Add("Login");
      // add those to options
      options.IgnoreRegionAccessibilityIds = accessiblityIds;
      // pass options in screenshot call
      appPercy.Screenshot("Screeshot name", options);
      driver.Quit();
    }
  }
}
Copy icon Copy 
from appium import webdriver
from percy import percy_screenshot
from percy.lib.ignore_region import IgnoreRegion
driver = webdriver.Remote("http://hub.browserstack.com/wd/hub", options)
// add valid accessibility id of element that you want to ignore
ignore_regions_ids = ["some_valid_id"]
// pass options in screenshot call
percy_screenshot(driver, 'Screeshot name'
     ignore_region_accessibility_ids= ignore_region_ids,
)
Copy icon Copy 
const percyScreenshot = require('@percy/appium-app');
const { IgnoreRegion } = require('@percy/appium-app/percy/util/ignoreRegion')
describe('Search Wikipedia Functionality', () => {
  it('can find search results', async () => {
    
    // add valid accessibility id of element that you want to ignore
    var ignoreRegionAccessibilityIds = [];
    ignoreRegionAccessibilityIds.push("some_valid_id");
    
    // pass options in screenshot call
    var options = {
      ignoreRegionAccessibilityIds,
    }
    // pass options in screenshot call
    await percyScreenshot('Snapshot Name', options);
  });
});
Copy icon Copy 
const percyScreenshot = require('@percy/appium-app');
const { IgnoreRegion } = require('@percy/appium-app/percy/util/ignoreRegion')
let wd = require('wd');
const desiredCaps = {} // Update capabilities
const driver = wd.promiseRemote('http://hub-cloud.browserstack.com/wd/hub');
// add valid accessibility id of element that you want to ignore
var ignoreRegionAccessibilityIds = [];
ignoreRegionAccessibilityIds.push("some_valid_id");
// pass options in screenshot call
var options = {
  ignoreRegionAccessibilityIds,
}
    
driver.init(desiredCaps)
  .then(function(x) {
    console.log(x);
    return percyScreenshot(driver, 'Screenshot Name', options);
  })
  .fin(function() {
    return driver.quit();
  })
  .done();
Copy icon Copy 
require 'appium_lib'
require 'percy-appium-app'
require 'lib/ignore_region'
driver = Appium::Driver.new(
    {
      'caps' => capability,
      'appium_lib' => {
        server_url: "https://#{USER_NAME}:#{ACCESS_KEY}@hub-cloud.browserstack.com/wd/hub"
      }
    }, 
    true
  ).start_driver
ignore_regions_id = ["some_valid_accessibility_id"]
percy_screenshot(driver, name='screenshot name', ignore_region_accessibility_ids: ignore_regions_id)

Ignore elements using pixel-based coordinates

Copy icon Copy 
import io.percy.appium.AppPercy;
import io.percy.appium.lib.IgnoreRegion;
public class Example {
  private static AppPercy percy;
	public static void main(String[] args) throws MalformedURLException, InterruptedException {
    	DesiredCapabilities caps = new DesiredCapabilities();
      // Add caps here
      AndroidDriver<AndroidElement> driver = new AndroidDriver<AndroidElement>(
          new URL("http://hub.browserstack.com/wd/hub"), caps);
      percy = new AppPercy(driver);
      // Add ignore region options here
      ScreenshotOptions options = new ScreenshotOptions();
      List<IgnoreRegion> customIgnoreRegions = new ArrayList<IgnoreRegion>();
      
      // add valid custom loction of region that you want to ignore in px
      IgnoreRegion ignoreRegion = new IgnoreRegion(10, 20, 100, 200); # top, bottom, left, right
      customIgnoreRegions.add(ignoreRegion);
      
      // add those to options
      options.setCustomIgnoreRegions(customIgnoreRegions);
      
      // pass options in screenshot call
      percy.screenshot("Screeshot name", options);
      driver.quit();
	}
}
Copy icon Copy 
using PercyIO.Appium.
namespace csharp_appium__jwp_first_android_test_browserstack
{
  class Android
  {
    static void Main(string[] args)
    {
      AppiumOptions capabilities = new AppiumOptions();
      // Add caps here
      
      AndroidDriver<AndroidElement> driver = new AndroidDriver<AndroidElement>(
              new Uri("https://hub-cloud.browserstack.com/wd/hub"), capabilities);
      // Initialize AppPercy
      AppPercy appPercy = new AppPercy(driver);
      var options = new ScreenshotOptions();
      
      // Add ignore region options here
      List<IgnoreRegion> customIgnoreRegions = new List<AppiumWebElement>(); 
      
      // add valid custom loction of region that you want to ignore in px
      var ignoreRegion = new IgnoreRegion(10, 200, 300, 500); // top, bottom, left, right
      customIgnoreRegions.Add(ignoreRegion);
      // add those to options
      options.CustomIgnoreRegions = customIgnoreRegions;
      // pass options in screenshot call
      appPercy.Screenshot("Screeshot name", options);
      driver.Quit();
    }
  }
}
Copy icon Copy 
from appium import webdriver
from percy import percy_screenshot
from percy.lib.ignore_region import IgnoreRegion
driver = webdriver.Remote("http://hub.browserstack.com/wd/hub", options)
// add valid custom loction of region that you want to ignore in px
custom_ignore_regions = [IgnoreRegion(top=1199, bottom=1225,left=108, right=464)]
// pass options in screenshot call
percy_screenshot(driver, 'Screeshot name'
     custom_ignore_regions= custom_ignore_regions
)
Copy icon Copy 
const percyScreenshot = require('@percy/appium-app');
const { IgnoreRegion } = require('@percy/appium-app/percy/util/ignoreRegion')
describe('Search Wikipedia Functionality', () => {
  it('can find search results', async () => {
    
    // add valid custom loction of region that you want to ignore in px
    const ignoreRegion = new IgnoreRegion(1199, 1225,108, 464); #top, bottom, left, right
    var customIgnoreRegions = [ignoreRegion];
    
    // pass options in screenshot call
    var options = {
      customIgnoreRegions
    }
    // pass options in screenshot call
    await percyScreenshot('Snapshot Name', options);
  });
});
Copy icon Copy 
const percyScreenshot = require('@percy/appium-app');
const { IgnoreRegion } = require('@percy/appium-app/percy/util/ignoreRegion')
let wd = require('wd');
const desiredCaps = {} // Update capabilities
const driver = wd.promiseRemote('http://hub-cloud.browserstack.com/wd/hub');
// add valid custom loction of region that you want to ignore in px
const ignoreRegion = new IgnoreRegion(1199, 1225,108, 464); # top, bottom, left, right
var customIgnoreRegions = [ignoreRegion];
// pass options in screenshot call
var options = {
  customIgnoreRegions
}
    
driver.init(desiredCaps)
  .then(function(x) {
    console.log(x);
    return percyScreenshot(driver, 'Screenshot Name', options);
  })
  .fin(function() {
    return driver.quit();
  })
  .done();
Copy icon Copy 
require 'appium_lib'
require 'percy-appium-app'
require 'lib/ignore_region'
driver = Appium::Driver.new(
    {
      'caps' => capability,
      'appium_lib' => {
        server_url: "https://#{USER_NAME}:#{ACCESS_KEY}@hub-cloud.browserstack.com/wd/hub"
      }
    }, 
    true
  ).start_driver
custom_ignore_regions = [Percy::IgnoreRegion.new(top=0, bottom=500,left=0, right=500)]
percy_screenshot(driver, name='screenshot name', custom_ignore_regions: custom_ignore_regions)

Ignore elements by directly identifying them

Copy icon Copy 
import io.percy.appium.AppPercy;
import io.percy.appium.lib.IgnoreRegion;
public class Example {
  private static AppPercy percy;
	public static void main(String[] args) throws MalformedURLException, InterruptedException {
    	DesiredCapabilities caps = new DesiredCapabilities();
      // Add caps here
      AndroidDriver<AndroidElement> driver = new AndroidDriver<AndroidElement>(
          new URL("http://hub.browserstack.com/wd/hub"), caps);
      percy = new AppPercy(driver);
      // Add ignore region options here
      ScreenshotOptions options = new ScreenshotOptions();
      List<MobileElement> ignoreRegionAppiumElements = new ArrayList<MobileElement>();
      
      // add valid element that you want to ignore
      ignoreRegionAppiumElements.add(valid_Appium_element);
      
      // add those to options
      options.setIgnoreRegionAppiumElements(ignoreRegionAppiumElements);
      
      // pass options in screenshot call
      percy.screenshot("Screeshot name", options);
      driver.quit();
	}
}
Copy icon Copy 
using PercyIO.Appium.
namespace csharp_appium__jwp_first_android_test_browserstack
{
  class Android
  {
    static void Main(string[] args)
    {
      AppiumOptions capabilities = new AppiumOptions();
      // Add caps here
      
      AndroidDriver<AndroidElement> driver = new AndroidDriver<AndroidElement>(
              new Uri("https://hub-cloud.browserstack.com/wd/hub"), capabilities);
      // Initialize AppPercy
      AppPercy appPercy = new AppPercy(driver);
      var options = new ScreenshotOptions();
      
      // Add ignore region options here
      List<AppiumWebElement> appiumWebElements = new List<AppiumWebElement>();
      
      // add valid element that you want to ignore
      appiumWebElements.Add(valid_Appium_element);
      // add those to options
      options.IgnoreRegionAppiumElements = appiumWebElements;
      // pass options in screenshot call
      appPercy.Screenshot("Screeshot name", options);
      driver.Quit();
    }
  }
}
Copy icon Copy 
from appium import webdriver
from percy import percy_screenshot
from percy.lib.ignore_region import IgnoreRegion
driver = webdriver.Remote("http://hub.browserstack.com/wd/hub", options)
// add valid element that you want to ignore
ignore_region_appium_elements = [valid_Appium_element]
// pass options in screenshot call
percy_screenshot(driver, 'Screeshot name'
     ignore_region_appium_elements = ignore_region_appium_elements,
)
Copy icon Copy 
const percyScreenshot = require('@percy/appium-app');
const { IgnoreRegion } = require('@percy/appium-app/percy/util/ignoreRegion')
describe('Search Wikipedia Functionality', () => {
  it('can find search results', async () => {
    
    // add valid element that you want to ignore
    var ignoreRegionAppiumElements = [];
    ignoreRegionAppiumElements.push(valid_Appium_element);
    
    // pass options in screenshot call
    var options = {
      ignoreRegionAppiumElements,
    }
    // pass options in screenshot call
    await percyScreenshot('Snapshot Name', options);
  });
});
Copy icon Copy 
const percyScreenshot = require('@percy/appium-app');
const { IgnoreRegion } = require('@percy/appium-app/percy/util/ignoreRegion')
let wd = require('wd');
const desiredCaps = {} // Update capabilities
const driver = wd.promiseRemote('http://hub-cloud.browserstack.com/wd/hub');
// add valid element that you want to ignore
var ignoreRegionAppiumElements = [];
ignoreRegionAppiumElements.push(valid_Appium_element);
// pass options in screenshot call
var options = {
  ignoreRegionAppiumElements,
}
    
driver.init(desiredCaps)
  .then(function(x) {
    console.log(x);
    return percyScreenshot(driver, 'Screenshot Name', options);
  })
  .fin(function() {
    return driver.quit();
  })
  .done();
Copy icon Copy 
require 'appium_lib'
require 'percy-appium-app'
require 'lib/ignore_region'
driver = Appium::Driver.new(
    {
      'caps' => capability,
      'appium_lib' => {
        server_url: "https://#{USER_NAME}:#{ACCESS_KEY}@hub-cloud.browserstack.com/wd/hub"
      }
    }, 
    true
  ).start_driver
ignore_elements = [valid_Appium_element]
percy_screenshot(driver, name='screenshot name', ignore_region_appium_elements: ignore_elements)

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

  • ON THIS PAGE

    Is this page helping you?

    Yes
    No

    We're sorry to hear that. Please share your feedback so we can do better

    Contact our Support team for immediate help while we work on improving our docs.

    We're continuously improving our docs. We'd love to know what you liked





    Thank you for your valuable feedback!

    Talk to an Expert
    Download Copy Check Circle