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
```java
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();
}
}
```
```csharp
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();
}
}
}
```
```python
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,
)
```
```java
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();
}
}
```
```csharp
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();
}
}
}
```
```python
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,
)
```
```java
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();
}
}
```
```csharp
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();
}
}
}
```
```python
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
)
```
```java
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();
}
}
```
```csharp
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();
}
}
}
```
