Visual Comparisons

Screenshot assertions

Playwright has built-in visual comparison: await expect(page).toHaveScreenshot('home.png') (or on a locator) takes a screenshot, compares it to a stored baseline and fails if the difference exceeds a threshold. The first run writes the baseline; npx playwright test --update-snapshots refreshes baselines after intentional changes. Options such as maxDiffPixels, maxDiffPixelRatio, mask (hide dynamic regions) and animations: 'disabled' reduce noise. Rendering differs between operating systems and browsers, so baselines are stored per platform and should be generated in the same environment as CI (for example in the official Docker image). Cypress has no built-in pixel comparison; teams use plugins or hosted visual testing services.

Check how it looks, who can use it and what the API says

E2E tools can also catch visual regressions, accessibility violations and API contract problems.

A stable visual check

Mask dynamic content and allow a small tolerance.

import { test, expect } from '@playwright/test';

test('pricing page looks right', async ({ page }) => {
  await page.goto('/pricing');
  await expect(page).toHaveScreenshot('pricing.png', {
    fullPage: true,
    mask: [page.getByTestId('live-visitor-count')],
    maxDiffPixelRatio: 0.01,
  });
});

test('primary button looks right', async ({ page }) => {
  await page.goto('/styleguide');
  await expect(page.getByRole('button', { name: 'Buy now' })).toHaveScreenshot();
});

Keep visual tests few and targeted

Full-page screenshots of every screen produce noisy diffs. Snapshot key layouts and design-system components, and review diffs as part of code review.

त्वरित जाँच: Why should visual baselines be generated in the same environment as CI?

• Screenshots only work on Linux
• Baselines are encrypted per machine
• CI cannot read PNG files
• Font rendering and anti-aliasing differ across operating systems and browsers