# Requires Node.js
npm init playwright@latest
# choose TypeScript or JavaScript; it installs browsers and a sample test
npx playwright test          # run tests
npx playwright show-report   # open the HTML report

// screenshots.spec.js
const { test } = require("@playwright/test");

const pages = ["/", "/pricing", "/signup"];
const sizes = { phone: [390, 844], tablet: [820, 1180], desktop: [1440, 900] };

for (const path of pages) {
  for (const [name, [w, h]] of Object.entries(sizes)) {
    test(`capture ${path} on ${name}`, async ({ page }) => {
      await page.setViewportSize({ width: w, height: h });
      await page.goto(`https://staging.example.com${path}`);
      const file = path === "/" ? "home" : path.slice(1);
      await page.screenshot({ path: `shots/${file}-${name}.png`, fullPage: true });
    });
  }
}

// visual.spec.js
const { test, expect } = require("@playwright/test");

test("pricing page looks as approved", async ({ page }) => {
  await page.setViewportSize({ width: 1440, height: 900 });
  await page.goto("https://staging.example.com/pricing");
  await expect(page).toHaveScreenshot("pricing-desktop.png", {
    fullPage: true,
    maxDiffPixelRatio: 0.01,
    mask: [page.locator(".current-date")],
  });
});
// First run creates the baseline; later runs fail if the page changes.
// Update approved baselines with: npx playwright test --update-snapshots

Visual diff review routine
1. Open the HTML report after each run
2. For each failed comparison, view expected / actual / diff
3. Intended change? → approve and update the baseline
4. Unintended change? → file a bug with the diff image
5. Note patterns (e.g. one component breaking everywhere)

// npm install -D @axe-core/playwright
const { test, expect } = require("@playwright/test");
const AxeBuilder = require("@axe-core/playwright").default;

test("signup page has no detectable accessibility violations", async ({ page }) => {
  await page.goto("https://staging.example.com/signup");
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

const { test, expect } = require("@playwright/test");

test("signup shows email error as designed", async ({ page }) => {
  await page.goto("https://staging.example.com/signup");
  await page.getByLabel("Email").fill("not-an-email");
  await page.getByRole("button", { name: "Create account" }).click();
  await expect(page.getByText("Enter a valid email")).toBeVisible();
  await expect(page).toHaveScreenshot("signup-email-error.png");
});

Design QA Plan
Pages: ______________
Breakpoints: phone 390, tablet 820, desktop 1440 (adjust to your system)
States to cover: default, hover/focus, error, loading, empty
Checks: screenshots ☐ visual comparison ☐ accessibility ☐
When: every staging deploy
Owner: designer + QA partner

Design Bug Report
Page/URL: ______________
Viewport: ______
Expected (Figma link): ______
Actual (screenshot): attached
Diff (if visual test): attached
Impact: cosmetic / usability / accessibility
Suggested fix: ______________

Playwright for designers — learning plan
Week 1: install, run the sample test, capture one screenshot
Week 2: screenshots for key pages at three breakpoints
Week 3: visual comparison with baselines
Week 4: accessibility checks and error-state tests
Then: pair with QA to add your tests to their pipeline