Visual Regression Testing
Visual regression testing catches UI changes that functional tests miss - pixel-level differences in layout, fonts, colors, and spacing that appear after code changes. A button test passes because it's clickable, but visual regression catches when someone accidentally made the button purple. It's the automated equivalent of 'does this look right?'
Visual Regression with Playwright and Cypress
// ══════════════════════════════════════════════════════════════
// PLAYWRIGHT VISUAL REGRESSION (built in - no extra packages)
// ══════════════════════════════════════════════════════════════
// tests/visual/homepage.visual.spec.ts
import { test, expect } from '@playwright/test';
test('homepage layout matches approved baseline', async ({ page }) => {
await page.goto('/');
// Full page screenshot comparison
await expect(page).toHaveScreenshot('homepage.png', {
maxDiffPixels: 100, // Allow up to 100 different pixels (anti-aliasing)
threshold: 0.2, // 20% color difference tolerance per pixel
});
});
test('product card matches baseline', async ({ page }) => {
await page.goto('/products');
const card = page.locator('.product-card').first();
// Element-level screenshot (just the card)
await expect(card).toHaveScreenshot('product-card.png');
});
// HOW IT WORKS:
// First run: Creates baseline screenshots in tests/visual/__snapshots__/
// Subsequent runs: Compares new screenshots to baselines
// Failure: Shows side-by-side diff of baseline vs actual
// Update baselines: npx playwright test --update-snapshots
// ══════════════════════════════════════════════════════════════
// CYPRESS VISUAL REGRESSION (with cypress-image-snapshot plugin)
// ══════════════════════════════════════════════════════════════
// npm install --save-dev cypress-image-snapshot
// cypress/e2e/visual/login.visual.cy.ts
it('login page matches baseline', () => {
cy.visit('/login');
cy.matchImageSnapshot('login-page'); // Creates/compares baseline
});
it('error state matches baseline', () => {
cy.intercept('POST', '/api/auth/login', { statusCode: 401 });
cy.visit('/login');
cy.get('#email').type('bad@test.com');
cy.get('#submit').click();
cy.get('.error-message').should('be.visible');
cy.matchImageSnapshot('login-error-state');
});
// ══════════════════════════════════════════════════════════════
// PROFESSIONAL SETUP: Percy.io (cloud visual diff platform)
// ══════════════════════════════════════════════════════════════
// Percy takes snapshots, uploads to cloud, shows visual diffs in PR
// npx percy exec -- npx playwright test
// In Playwright test:
import percySnapshot from '@percy/playwright';
test('visual check with Percy', async ({ page }) => {
await page.goto('/dashboard');
await percySnapshot(page, 'Dashboard'); // Uploads to Percy cloud
});
// Percy shows visual diffs in GitHub PRs - team approves or rejectsCommon Mistakes
- Running visual tests with dynamic content - timestamps, user avatars, or random data cause false positives; mask dynamic regions
- Zero tolerance for pixel differences - anti-aliasing causes minor pixel differences between renders; set maxDiffPixels: 50-200 to avoid noise
- Not updating baselines after intentional changes - after a design change, run --update-snapshots to update the approved baseline
- Running visual tests on every PR - visual regression is slow; run it on merge to main or weekly, not on every feature PR
Tip
Tip
Practice Visual Regression Testing in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Chromatic + Storybook.
Practice Task
Note
Practice Task - (1) Write a working example of Visual Regression Testing from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with Visual Regression Testing is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready software testing code.
Key Takeaways
- Visual regression testing catches UI changes that functional tests miss - pixel-level differences in layout, fonts, colors, and spacing that appear after code changes.
- Running visual tests with dynamic content - timestamps, user avatars, or random data cause false positives; mask dynamic regions
- Zero tolerance for pixel differences - anti-aliasing causes minor pixel differences between renders; set maxDiffPixels: 50-200 to avoid noise
- Not updating baselines after intentional changes - after a design change, run --update-snapshots to update the approved baseline