InnerWorks Logo
Return to main siteReturn to main site
Blogs

The Quick Guide to Visual Regression Testing With Cypress

The Quick Guide to Visual Regression Testing With Cypress

Arek Koperek

16 Jun 2021 • 1 min read

A quick guide to visual regression testing with the popular end to end testing platform, Cypress.

Innerworks is coming soon...

This blog was originally published on our previous Cogworks blog page. The Cogworks Blog is in the process of evolving into Innerworks, our new community-driven tech blog. With Innerworks, we aim to provide a space for collaboration, knowledge-sharing, and connection within the wider tech community. Watch this space for Innerworks updates, but don't worry - you'll still be able to access content from the original Cogworks Blog if you want. 

 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

Community tech aid

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.