32. Visual Regression Testing & Pixel Diffing

Visual Testing with toHaveScreenshot()

import { test, expect } from "@playwright/test";
test("landing page visual comparison", async ({ page }) => {
  await page.goto("https://targetqa.com");
  await expect(page).toHaveScreenshot("landing.png", {
    mask: [page.getByTestId("live-clock")],
    maxDiffPixelRatio: 0.02,
  });
});

Update baselines when UI intentionally changes:

npx playwright test --update-snapshots

Task

  • Implement isDiffAcceptable:
  • 1. Accept diffPixels (number), totalPixels (number), and maxAllowedRatio (number, default 0.01).
  • 2. Return false if totalPixels === 0. Otherwise return diffPixels / totalPixels <= maxAllowedRatio.
💡Common doubts
Did you like the problem?
Lesson 32 of 35
JavaScript
Loading code editor…
Next