{"id":15653,"date":"2019-06-21T01:33:08","date_gmt":"2019-06-21T01:33:08","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/blog\/?p=5653"},"modified":"2020-04-17T21:23:40","modified_gmt":"2020-04-17T21:23:40","slug":"inspect-just-changes","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/inspect-just-changes\/","title":{"rendered":"Shifts Happen – Inspect Just The Changes That Matter"},"content":{"rendered":"

If you use visual testing tools, one of the biggest challenges you\u2019ll face are displacement diffs: something gets wider, narrower, taller, or shorter and other visual elements shift vertically or horizontally. The problem of shifting elements affects all kinds of snapshot test tools. How do you inspect just the changes?<\/p>\n

Visual element changes between builds can shift other elements up, down, or side to side. Applitools Eyes spots these changes but does not know if they are either intentional or acceptable. Should they be highlighted as changes? Or, should they be ignored as acceptable? In Applitools Eyes, 10.7, we make it easy for you to inspect just the changes. You can choose to turn off notification for displaced items.<\/p>\n

In this third blog about the new Applitools Eyes 10.7 features, we cover a new feature, “Hide Displacement Diffs.” You can also read about our new visual testing insights feature<\/a>, as well as our integration with Atlassian Bitbucket<\/a>.<\/p>\n

<\/p>\n

Automated visual testing compares the visible results of your applications easily across many test environments. Of course, keeping track of all the screen sizes and operating systems in their tool leaves Selenium or Cypress users with a massive maintenance headache. Snapshot testers get bogged down trying to figure out which snapshot differences are valid.<\/p>\n

What Causes Visual Displacement?<\/h2>\n

Visual displacement occurs as visual elements on a page change size. One thing changes, and everything else is affected. You want to inspect just the changes, but everything has changed.<\/p>\n

When a CSS change affects font sizes, large sections of the page move accordingly – both horizontally and vertically. This displacement causes the other elements on the page to shift down or up, right or left. It\u2019s a big issue – one for which developers have invested energy in training<\/a>\u00a0to solve.<\/p>\n

When one visible element of a page goes missing or gets added, other parts displace. For example, a bar across the screen in the baseline goes missing in the captured image. Everything else shifts upward. Effectively, the entire page from that element down changes.<\/p>\n

How does your visual testing tool handle these kinds of differences? Yes, these displacements result in shifts across the page – rendering plenty of potential discrepancies. Can you inspect only the changed elements and ignore elements that remain the same except for displacement?<\/p>\n

An Example: One Change Affects Everything Below It<\/h2>\n

Let’s look at an example comparison between a baseline and a checkpoint image.<\/p>\n

\"\"\"\"<\/p>\n

Here are two screens – a baseline on the left, and a checkpoint on the right. How many differences can you spot?<\/p>\n

Next let\u2019s take a look at the two screens in the Test Editor with differences identified, using \u201cStrict\u201d comparison. In “Strict” mode, Applitools Eyes highlights any visible change.<\/p>\n

\"Pixel<\/p>\n

Wow, look at all the pink highlights. Starting from the top, you spot a difference with the wifi icon. The clock on the top right shows a different time. Further down, one page has the status of \u201cOpen\u201d in green, while the other has the status \u201cClosed\u201d in red. Further down, starting from the horizontal line, Applitools highlights everything as pink and different? Why?<\/p>\n

Compare the two lines. On the checkpoint image on the right, the thinner horizontal line shifts all the other bits further up the page. In Strict mode, Applitools notes everything down the page as different.<\/p>\n

The screen on the left has the baseline image, and if you look just below \u201cOpening time,\u201d you\u2019ll notice a thick horizontal line. The screen on the right has a thinner line, which affects all the pixels below it.<\/p>\n

Inspect Just the Changes in Applitools Eyes 10.7<\/h2>\n

In the latest version of Applitools Eyes, we can easily distinguish between images that are the same but displaced. What we cannot do is answer that question about the developer\u2019s intention. So, we leave it up to you. And, we make it easy to record your preference and keep it going forward.<\/p>\n

Once you are testing results, you\u2019ll see a new icon on the screen. It looks like this: \"Screen<\/p>\n

When you hover over this icon, it tells \u00a0you it means \u201cHide Displacement Diffs.\u201d This icon shows up in both the Step Editor and the Test Editor in Applitools Eyes.<\/p>\n

]\"pasted<\/p>\n

The Hide Displacement Diffs button is in the View Toolbar. When you click it for the images above, Hide Displacement Diffs will toggle to the following view:<\/p>\n

\"Visual<\/p>\n

Here, Hide Displacement Diffs ignores all the elements that would render the same on both the baseline and checkpoint. From the narrower horizontal line, every displacement difference loses its highlight. So, the only other highlighted change shows the added text for hours showing Saturday-Sunday as \u201cClosed\u201d in the checkpoint.<\/p>\n

 <\/p>\n

Hide Displacement Diffs lets you eliminate highlights for all the elements whose relative size and content remain unchanged. Once set, the Hide Displacement Diffs setting for a given page will persist for that pair of captured page and baseline.<\/span><\/p>\n

Look For Changes That Impact Everything<\/h2>\n

If you use traditional snapshot testing tools today, you will tell us what our customers tell us about their time using those tools – that you hate wasting time. We know that you spend all this time storing baselines and capturing snapshots, only to discover a large number of false positives. You want to know what makes Applitools different – and more efficient for you.<\/p>\n

Applitools Eyes runs on a simple premise – if something looks different to the human eye, show it. Hide Displacement Diffs lets you choose what to highlight. You can choose to show all the visual changes. You can choose to ignore displacement of the elements that have remained entirely the same and focus on the changed items only. This new feature helps you become more productive by focusing solely on the cause, and not also the effects of visual change.<\/p>\n

If you\u2019re using Applitools Eyes today, get ready to try Hide Displacement Diffs.<\/p>\n

For More Information<\/h2>\n