Importance of Screenshot Stabilization in Visual Testing

The Optical Testing or Visual Validation technique is the most popular way to essay the user interface, such as mode, UI Elements, alinement, fonts, etc. doesn & # 8217; t require advanced technical skills, the issue are easy to rede and analyse.

works by comparing two screenshots pixel-by-pixel; even if there is pixel-level modification, the ocular examination differentiate the test as betray or conflict will be highlighted. The major challenge in optical examination is the stabilisation of screenshots that needs a strong algorithm in the background.

Challenges faced without Screenshot / Snapshot Stabilization

1. More mistaken failures:The false failure will be increased, and screenshot equivalence becomes unstable which create the visual establishment examination worthless.
2. Difficult to test dynamic substance:The stabilization helps to freeze gif icon; though GIF ikon movement occur randomly, the stabilization perpetually tries to enchant the same frames as a result, visual testing will be more stable and precise
3. Difficult to test websites receive media content:Nowadays, many websites contain autoplay picture features, and the video ask to freeze and be captured; differently, the false failure will increase.
4. More fault without impost stability pick:The screenshot stabilization also imply that you can identify what is causing the mistaken failure. By writing the custom script, you should be able to make it stable. The tradition option includes position the sensitivity, changing the styles, cover the dynamic elements, etc.

Importance of Screenshot Stabilization

Screenshot stabilization is a proficiency or an algorithm that helps freeze the animation and other dynamic elements to trim false failure. Let & # 8217; s understand with an example the grandness of it all:

We have a page withGIF image; let & # 8217; s see what hap with and without the stabilization feature.

The Visual Validation Test Result – Without Snapshot Stabilization Feature

Image:Output of visual test with no screenshot stabilization

The above results from a that doesn ’ t have a screenshot stabilization feature.

• You can see that the GIF icon looks more or less similar, but the visual testing tool marked the test as a fail by foreground the difference in red.
• When you run the visual exam on the website with animation like loaders, GIFs, and videos, this is the expected upshot if the tool doesn ’ t support the stabilization feature.

There are instrument in the market that do the screenshot stabilisation before capturing the snapshot and processing the screenshot as per the given resolution, producing the output. is one such tool that freezes the animations and dynamic substance and make accurate output even if you have GIFs or animation.

Let & # 8217; s run the same visual test with the Percy tool, which has a screenshot stabilization feature.

Image: Optic testing result with Percy tool

In the above ikon, you can see that Percy has markedNo Changes,which means there are no departure. Since Percy has an in-built stabilisation mechanics, it produces accurate yield. The above is an illustrated model of the grandness of screenshot stabilisation in visual examination.

Customize Screenshot Stabilization in Visual Testing

Tools like Percy have in-built stabilization features; however, in some scenarios, that may not be sufficient. For example, if we have dynamic data where data change every second (Example Date and Time), so we might experience to set some custom choice to brace the screenshots.

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

1. Screenshot Stabilization for Dynamic Content

There are multiple options to steady the screenshots for dynamic message; for example, if you have the Date and time on the website, you can set the fake date before trance screenshots.

Tools like provide an option to set a fake appointment.

// const now = new Date (2021, 3, 14) // month is 0-indexed // cy.clock (now)

There are also other options to fake the data or response, you can use mock API or fake the responses; you can also write a impost script to replace the rendered dynamical content with a still one.

2. Hiding Dynamic Content

The component or message changing dynamically may not be the significant characteristic, so you can hide that completely using the hide feature of the tool you are employ.

Example of Dynamic element hiding in Percy and

cy.percySnapshot ('Hide Content ', {percyCSS: ` # clk_box {display: none;} `});

You can see the difference, in the above image; Percy provide an option to hide the content while occupy the shot. The before-hiding image shows the Clock, but the clock has disappeared after adding the code to hide dynamic content.

3. Modifying the CSS Styles

Consider you have a scenario whenever you visit the website color of some component or webpage changes dynamically. A scenario like this stymy the ocular testing. In such cases, you can set the unchanging color by use the impost CSS styling choice.

Many tools provide such features; below is the exemplar of Percy

cy.percySnapshot ('Custom Styles ', {percyCSS: ` body {ground: lightgrey;} `});

The above codification put the ground of the site body to light grey. Similarly, you can modify any styles which CSS indorse. This help to stabilize any dynamic content variations because of CSS.

4. Capturing Individual Elements

In some scenario, you may not want to prove the entire site; instead, you might be interested in only a single component or set of components. Testing only mandatory components helps to reduce mistaken failures. The advanced ocular testing tool cater such options where you can specify the HTML locater to capture.

Example of Percy captures the single element

percySnapshot ('Single Element ', {setting: 'someselector '});

5. Sensitivity Options

The sensitiveness is also called the door, the comparison level for the screenshot. Generally, sensibility values will be hard-and-fast, recommended, and relaxed. The relaxed choice compares the screenshot in a relaxed way by cut minor differences in the screenshots. The sensitivity option is least recommended as there is a high luck of ignoring valid visual defects.

Percy render the sensibility option under the Project scene.

Good Practices for Visual Testing

• Choose the tool for visual testing by analyzing the features
• Make Visual Testing mandatory while developing the user interface
• To avoid regression, execute visual examination more often
• Handle the to forefend the false failure
• Review the optic testing results before taking farther actions, as optic test sometimes produces the false output
• Consider component-level optical testing as and when required
• Consider SAAS-based tools like Percy which provides an option to review, feedback from anywhere and helps in quicker cross-team communication
• Never try to test the functionalities with Visual Testing

Closing Notes

There is no doubt that visual testing is the faster and more effective way to test user interface. However, the efficiency depends on the tool you choose. The should create accurate and reliable output, which should help to reduce manual verification. Screenshot stabilisation is one of the significant features many creature don & # 8217; t ply, as this require a strong and complicated algorithm in the backend. The screenshot stabilisation helps to reduce false failure.

The impost stabilisation option aid configure the webpage & # 8217; s active content, which the tool can not do by default. There are many open rootage plugins for almost every tool however; sometimes, the outcome is not stable and dependable. A tool like Percy actively accumulate user feedback and improves functionality, making tests more stable, accurate, and reliable.

Related Guides