Testing of floating UI elements

This feature came as a request by many of our customers who asked for an easy way to perform functional test scenarios using Applitools Eyes without requiring additional coding.
 

The floating region is structured from 2 parts: 

1) An inner rectangle - this is the area which you would like to validate (and can move).

2) An outer rectangle - this is the area where the inner rectangle can move in, and as long as the inner rectangle is within this area and the content is the same, no differences should be flagged. Note that the content within the outer rectangle will be ignored in terms of visual validation.

  
In order to define a floating region, all you need to do is click on the floating region icon (see image below) and mark the region that you want to validate.


 
After creating the region, the size of the boundary where this region is allowed to appear (or "float") can be specified as appears below.

 

Here are a few examples where floating regions are useful:

1. Running a test to validate credit card transactions, where during the test a specific transaction is generated and the test expects to find this specific transaction in a table, but all other transactions are random, and the order of the transactions might be different every time you run the test.
2. Running a Google search for fixed term for which a certain result is expected, but may appear at a different position in each test run (see image below).
3. A page displays random data which causes another fixed part of the page to appear at a different position on each test run.

 Note: As when using a floating region, a content comparison is made to validate that the same element is shared between the baseline and current images (with some movement tolerance) - a floating region has no relevance while comparing with the Layout match level, which ignores the content and focuses only on validating the structure of the page.