Visual regression testing concept in Cypress - Build an Automation Script

Visual Regression Test for Homepage

Preconditions (2)

Step 1: Open the homepage URL in the browser.

Step 2: Take a screenshot of the homepage.

Step 3: Compare the screenshot with the baseline image stored previously.

✅ Expected Result: The current homepage screenshot matches the baseline image with no visual differences.

Automation Requirements - Cypress with cypress-image-snapshot plugin

Assertions Needed:

Assert that the current screenshot matches the baseline snapshot with zero or acceptable pixel differences.

Best Practices:

Use explicit commands to capture screenshots.

Store baseline images in a dedicated folder.

Use descriptive test names for easy identification.

Run tests in a consistent environment to avoid false positives.

Automated Solution

Cypress

import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';

addMatchImageSnapshotCommand();

describe('Visual Regression Test for Homepage', () => {
  beforeEach(() => {
    cy.visit('https://example.com');
  });

  it('should match the homepage visual snapshot', () => {
    cy.document().toMatchImageSnapshot({
      failureThreshold: 0.01, // 1% threshold for minor acceptable differences
      failureThresholdType: 'percent'
    });
  });
});

This test uses the cypress-image-snapshot plugin to perform visual regression testing.

First, we import and add the snapshot command to Cypress.

In the test, we visit the homepage URL before each test to ensure a fresh state.

The toMatchImageSnapshot command takes a screenshot of the current page and compares it to a baseline image stored in the snapshots folder.

The failureThreshold is set to 1% to allow minor differences like anti-aliasing or rendering variations.

If the images differ more than the threshold, the test fails, indicating a visual regression.

Common Mistakes - 3 Pitfalls

Not setting up the baseline images before running tests

Running tests in different screen sizes or environments

Using too strict failure thresholds (like 0%)

Bonus Challenge

Now add data-driven visual regression tests for three different pages: homepage, about page, and contact page.

Show Hint