In this post, I’ll briefly describe how an easy-to-install plugin for Cypress will allow us to extend our E2E testing to include visual verification of applications.
The Cypress Image Snapshot plugin allows us to add tests that verify the appearance of all or part of a page with the base screen saved earlier. Thus, in addition to the standard tests related to application logic, we are able to compare the position and colors of all elements on the page.
The right combination of such tests with CI/CD mechanisms, on the other hand, will allow us to automatically visually preview any change that has been made to the code – for example, in the form of an automatically created Pull Request with modified screenshots.
A theoretically minor change to a component that caused it to display badly elsewhere in the application? A quick-at-a-glance UI library update that caused a lot of minor changes and UX issues? With these and many similar situations, screen tests will help.
Another advantage is the ability to run tests using the official cypress/included docker image.
Full installation and configuration instructions can be found in the Readme of the plugin repository, while it is worth mentioning that the capture option of the addMatchImageSnapshotCommand configuration takes three values:
'viewport'– visible area of the page in the browser window'fullPage'– screen of the full page, from top to bottom (minor distortion possible for elements withposition: fixed;)'runner'– viewport of the browser along with Cypress sidebar with logs.
If this article helped you in any way let me know in the comments. Or is it too general and you would love to see more details here?
