A quick guide to visual regression testing with the popular end to end testing platform, Cypress.
Hello, youve stumbled into the old Cogblog archives
We've switched our blogging focus to our new Innerworks content, where tech community members can share inspiring stories, content, and top tips. Because of this, old Cogworks blogs will soon be deleted from the site, so enjoy it while you can. A few of these might refer to images in the text, but those have been deleted already sorry. Some of these subjects will return, some aren't relevant anymore, and some just don't fit the unbiased community initiative of Innerworks.
If you'd like to take on this subject yourself please submit a new blog!
Farewell Cogworks Blog 💚
Visual Regression Testing with Cypress
Visual regression testing ensures code modifications don’t introduce unintended visual changes.
What is Cypress?
Cypress is a testing tool popular for its intuitive interface and modern architectural approach.
How to Conduct Visual Regression Testing with Cypress
1. Install Cypress:
- npm install cypress --save-dev
- npx cypress open
2. Choose Your Visual Regression Tool:
- For this guide, we'll use Cypress Image Snapshot.
3. Install Cypress Image Snapshot:
- npm install --save-dev cypress-image-snapshot
4. Modify Plugin and Support Files:
- Update /cypress/plugins/index.js and /cypress/support/commands.js with plugin configurations.
5. Write Your Test:
- Define screen sizes and create a test suite to take snapshots.
6. Run Your Test:
- Start Cypress Test Runner and execute the test.
Reviewing Test Results
- Baseline images are created during the initial test run.
- Subsequent runs compare snapshots to these baseline images.
- Failed comparisons highlight differences for review and troubleshooting.
Sorted
Innerworks and Cogworks are proud to partner with Community TechAid who aim to enable sustainable access to technology and skills needed to ensure digital inclusion for all. Any support you can give is hugely appreciated.