Transcripted Summary
The 3rd and final interesting case we're going to look at is what happens when items get displaced on a webpage. For example, if we have our webpage here and then we add in a banner at the top, that pushes the rest of the content down. In cases like this, we may end up with the entire page being flagged as a visual difference when, in reality, the only change is the banner that was added to the top. When a large area of the page is impacted by such a change, the test result is full of differences, and it can be hard to identify what content actually changed and what content was simply displaced.
To resolve cases like this, we can employ a feature known as ignoreDisplacements. This feature can be configured directly in the test code as well as on the Applitools Test Manager Dashboard. If it's configured in the test code, only vertical displacements will be checked. If it's configured from the Applitools Test Manager Dashboard, both vertical and horizontal displacements will be checked. Only checking for vertical displacements when run from the code prevents this algorithm from slowing down your automation code while still providing coverage for the majority of cases that have displacements since vertical displacements are far more common than horizontal. With that said, let's head over to our code and set up an example to showcase this feature.
Let's go over some of the changes I made to prepare for this example. I first changed our test name to ignoreDisplacements so that we get a fresh baseline.
Then, I changed the URL back to the Applitools Hello World Page.
Finally, I removed the .lazyLoad() and .layoutBreakpoints Functions from our eyes.check() since we no longer need these for our test. Let's go ahead and run this test and generate our baseline.
On the Applitools Test Manager, we can confirm that we've created a new baseline with the test name ignoreDisplacements. Let's now head back to our code.
JavascriptExecutor execDriver = (JavascriptExecutor) driver;
execDriver.executeScript("document.querySelector('div.fancy:nth-child(1)').style.borderBottom = '5px solid gray';");
In our code, I've added in this JS injection to simulate a change made to our page that will cause displacements. This JS injection will add a gray border to the bottom of our Hello World title. Let's run this test again and then review the results.
Looking at our test result, we have a ton of pink differences flagged on our page. Even though the content below the header has been unchanged, it's still being flagged as a difference since it was displaced downwards by a few pixels. This isn't a very helpful test result because of all the noise. Let’s head back to our code and make a slight change that will give us a much cleaner test result.
Within our call to eyes.check(), I’ve added a call to the .ignoreDisplacements() function. This function will tell the Applitools visual AI to ignore differences caused by displacements. Let’s rerun the test once again and then review the results.
After adding our call to the .ignoreDisplacements() function, only the border that was added to the page is now highlighted as a difference. It’s now much clearer what has actually changed on this page and we can make a better decision about what to do with this test result.
In addition to using the .ignoreDisplacements() function, we can also turn on ignoreDisplacements flag from the UI by selecting this icon here when reviewing a test result. Clicking this icon will re-evaluate the comparison between the baseline and the checkpoint images with the ignoreDisplacements flag enabled.
To wrap up, the ignoreDisplacements feature is a powerful tool available for the Strict & Ignore Colors Match Levels that will help ignore unhelpful differences. It should be used as sparingly as possible to avoid slowing down your automation framework and can be turned on from the code or from the Applitools Test Manager.
In this chapter we took a look at 3 interesting cases that can come up as you work with the Applitools Visual AI. We saw how to handle pages that use Responsive Design by enabling the layoutBreakpoints feature. We handled a lazy loaded webpage using the .lazyLoad() function. And finally, we filtered out unwanted differences caused by displacements using the ignoreDisplacements flag. All of these tools are built right into the Applitools SDKs and offer powerful solutions to these interesting cases.
