Accessibility snapshot diff

v2Playwright accessibility.snapshot() · runs locally in your browser

Structural compare: roles, labels, and states—not pixels. Upload JSON or paste below, then export Markdown or CSV for tickets and PRs. For screenshots, use Screenshot diff.

How to capture snapshots in PlaywrightShow
const before = await page.accessibility.snapshot();
// … change page / build …
const after = await page.accessibility.snapshot();

await fs.writeFileSync(
  "a11y-before.json",
  JSON.stringify(before, null, 2),
);

// Keep options consistent, e.g.:
// await page.accessibility.snapshot({ interestingOnly: true });

Children are matched by DOM index. Reordering lists may show as remove + add. Use the Raw JSON tab for byte-level structural rows.

Baseline
Target

How it works

Semantic deltas on accessibility trees—no pixels required.

  1. 01

    Paste snapshots

    Before & after AX JSON exports.

  2. 02

    Normalize roles

    Parser trims noise for compares.

  3. 03

    See adds/removals

    Added, removed, changed entries.

  4. 04

    Drill summaries

    Field-level hints per node path.

  5. 05

    Export trace

    CSV · Markdown keeps audit trails.