Visual Regression testing or Visual testing in software is a quality assurance activity of verifying if the visual aspects of the application’s user interface seem appropriate to the user. It is also known as Visual Validation Testing.
Visual Regression testing can be implemented using a variety of tools and languages and is a fast way of checking defects of front end applications. For more information on Visual Regression testing you can look at this article Here
Visual Regression Testing with Applitools Eyes
An Applitools eyes account - Applitools
We are using Applitools with Cypress for visual testing. For Stacks, we have configured the framework to use the free tier, which gives:
- 1 user (normally the pipeline)
- 100 checkpoints per month
Eyes-Cypress ships with official type declarations for TypeScript. This allows you to add eyes commands to your TypeScript tests.
The configuration file has been added to the
Running Applitools in Cypress
In order run Cypress with Applitools, you will need an Applitools account. Once signed up (there is a free tier), the API key can be used to create a connection with Applitools.
Please follow the nvm Cypress Tutorial
How to run the tests locally
To spin up the server locally, running Cypress headless, use:
npm run test:cypress:eyes. This is the same for running in CI pipelines.
Where Applitools tests should be located
*.test.eyes.cy.ts tests are located with the page compositions (a composition is several components that may come together to form a page).