Articles in this section

See more

Visual Testing of dynamically positioned elements

Avatar
Yarden Naveh
  • Updated

 This feature was rated high on the wish list by many of our customers and we are happy to announce that its now available.  We would like to use this opportunity to thank you for helping us improve our service by providing us with excellent feedback. Keep it coming!

The check region feature allows you to handle cases where the position of some of the UI elements in your page might change based on some dynamic content that appears around it.
For example, if you are showing the user name of the logged in user on the top bar of your website, and the position of all the UI elements that appears to the right of the user name is relative and changes based on the length of the user name, you can run 'check window' to validate the entire window, mark this dynamic region (the user name and the moving elements on the right) as ignore region and then use 'check region' to validate the UI elements of interest to the right of the user name, that might appear in a different position the next time you run the test.

Check region method works in a similar way to check window, except for the fact that it takes a screenshot of the HTML element specified as its input (by means of a WebDriver "By" selector) instead of a screenshot of the entire web page. The check region command will take a snapshot of the specific object, regardless of where it appears in the page, and will perform smart visual comparison of that region with the baseline..In case this is a new region that does not exist in the baseline, this region will be added as a new region to the baseline.

Syntax:
Java:

eyes.checkRegion(selector, "Optional validation tag or description" );

.Net:

eyes.CheckRegion(selector, "Optional validation tag or description" );

Python:

eyes.check_region(by=By.CSS_SELECTOR,".someclass", "Optional validation tag or description")

Ruby:

eyes.check_region_by_selector(By.CSS_SELECTOR, ".someclass", "Optional validation tag or description")

Protractor:

eyes.checkRegionBy(By.CSS_SELECTOR, “Region by By”);
eyes.checkRegionByElement(element(by.className(‘form-inline’)), “Region by Element”);
eyes.checkRegion({left: 20, top: 50, width: 450, height: 120}, “Region by coordinates”);

where "selector" is the  “By” selector (of Selenium Webdriver) that identifies DOM element to check. 

You can see how Applitools eye different features handle with a dynamic content here. 
 

Related articles