Automated Visual Testing with Cypress

Digital assurance services involves verifying whether a software product satisfies the anticipated criteria and guaranteeing it is defect-free. It consists of putting software/system components through their paces using human or automated methods to assess one or more properties of interest. Not getting rid of bugs can cause a range of failures and unexpected behavior due to defects in the system logic. 

However, many automated tests do not interact with applications in the same way as real users. Consequently, IDs, CSS selectors, and XPaths cannot be validated. In addition, there may be limited checks for the display of specific objects or text, broken pages, overlapping modules, hidden buttons, and off-screen components.

Modern web applications employ complex CSS structures to build their visual features, which function as an enticing ‘front door’ for the user/customer to engage with the app. Moreover, with the increase in one-touch digital access, users interact with different devices, a dizzying variety of operating systems, browser versions, screen sizes, fonts, and languages. Given the danger of incorrect visuals and the difficulty of maintaining control over every piece of the code connected to it, visual testing should become an integral component of any testing approach.

The screenshot above shows the overlaying jumbled text, yet the test automation script can still log in to the application without seeing this obvious UI glitch. Using manual testing to scan the whole application for aesthetic flaws can be expensive. Instead, these visual problems can be reported using automation in conjunction with the current regression automation script. In this article, we discuss the impact of automated visual testing and how to perform it using Cypress.

Visual Testing

Visual testing or user interface test evaluates an application’s visible output, compares it with pixel-to-pixel definition, and locates the position of each element on the page against the expected baseline design. To simplify things further, recall the old school puzzle ‘Spot the difference?’ Then you have perhaps already seen what visual testing does.

Manual visual testing is laborious since it requires running the full software to compare and evaluate UI changes from the planned design. There are several API or third-party commercial and open-source plugins to add to our testing automation tool kit for a smoother, less error-prone visual evaluation.

Must read: Cypress – A Modern Trend in Web Automation

Cypress in Visual Testing

Cypress offers a multitude of open-source and commercial plugins and APIs that can accelerate visual testing and drastically reduce manual verification mistakes. Additionally, we can configure CI pipelines for test execution on the cloud. This image from an official Cypress paper illustrates how various plugins may be used for visual testing.

Percy, AppliTools, Happo, cypress image snapshot, cypress visual regression, Kobiton, and Phantom CSS are the most effective tools and APIs available for visual testing. Here, the well-known Percy and Cypress will serve as a visual example of what we’re discussing.

Percy with Cypress

Percy is a software-as-a-service visual testing tool owned by BrowserStack. It offers a dashboard and the ability to interact with any version control system; it can also continuously integrate with the CI pipeline to monitor and report visual changes. Percy has a parallel execution option enabled by default in the Chrome and Firefox browsers. To connect Percy with Cypress, one must have the access token key that can interface with the Percy server.

This will ensure that every test run in Cypress is in sync with the Percy server. The illustration below depicts Percy’s dashboard’s user interface.

As we explained in this post, BrowserStack’s Percy follows suit and utilises the snapshot to compare and verify the application’s visual front end. We can implement the visual test in our current Cypress test by following standard procedures.

Prerequisites: Cypress to be installed and a BrowserStack account with Percy access/subscription.

1. Installing Percy library

2. To access the Percy snapshot inside the script, import the Percy package into cypress/support/index.js

3. Calling Percy snapshot within our script.

4. To connect with the Percy server, set the environment variable with the Percy access token.

5. Wrapping Cypress test runner command with a Percy-exec command to start Percy server and receive a snapshot from Cypress test execution.

And now we begin! If we execute the run command from our local terminal, the Percy dashboard displays the screenshot compared to the baseline screenshot and notes differences. If there are no changes in the UI, the user can click the Approve Changes button on the Percy dashboard to make the same screenshot as the baseline screenshot for future test executions. 

Advantages of Using Percy 

• The dashboard displays the visual diff for comparison and analysis.
• The visual review allows us to compare diff in browsers with responsive screen sizes)
• Issue/pull request management is supported by almost every source code management tool. 
• Separates and uploads the visual tested screenshot to Percy’s dashboard while keeping our previous regression test information and report in place.
• Readily integrates into CI/CD pipelines (including Azure Pipelines) through Percy script or by merging with your automation test SDK (Cypress, puppeteer, Selenium…)

Another test automation tool similar to Cypress: Selenium 4.0- The Latest Test Automation Tool

Conclusion

Thus, with Percy’s rich feature to integrate with version control and CI pipeline to keep up the continuous feedback on the visual aspect of the application under test, it stands out as an effective tool for visual testing. On the contrary, Applitools have a similar rich dashboard and AI integrated feature with a free forever plan that offers one user up to 100 visual checkpoints per month.

But that is a topic of discussion for our next blog…!