Playwright ARIA Snapshots

JSON-based ARIA snapshots for Playwright.

Read the full documentation

Getting Started

Installation

pnpm add -D @cronn/aria-snapshot

npm install -D @cronn/aria-snapshot

yarn add -D @cronn/aria-snapshot

Writing Tests

import { ariaSnapshot } from "@cronn/aria-snapshot";
import { defineFileSnapshotMatchers } from "@cronn/playwright-file-snapshots";

const expect = defineFileSnapshotMatchers();

test("matches ARIA snapshot", async ({ page }) => {
  await page.setContent(`
    <main>
      <h1>List</h1>
      <ul>
        <li>Apple</li>
        <li>Peach</li>
      </ul>
    </main>
  `);

  await expect(ariaSnapshot(page.getByRole("main"))).toMatchJsonFile();
});

Output (matches_ARIA_snapshot.json):

{
  "main": [
    "heading 'List' [level=1]",
    {
      "list": [
        {
          "listitem": "Apple"
        },
        {
          "listitem": "Peach"
        }
      ]
    }
  ]
}