ARIA Snapshots

Playwright's ARIA Snapshots snapshot the accessibility tree of a page using YAML as serialization format. @cronn/aria-snapshot provides a lightweight adapter, transforming the original YAML format to an optimized JSON format.

Serializing ARIA Snapshots in JSON provides more flexibility when writing Playwright tests, because JSON structures are natively supported in JavaScript and can be composed without requiring additional tooling.

Getting Started

Adding the library to your project

pnpm

pnpm add -D @cronn/aria-snapshot

npm

npm install -D @cronn/aria-snapshot

yarn

yarn add -D @cronn/aria-snapshot

Writing Tests

import { snapshotAria } from "@cronn/aria-snapshot";
import { defineValidationFileExpect } from "@cronn/playwright-file-snapshots";

const expect = defineValidationFileExpect();

test("matches ARIA snapshot", async ({ page }) => {
  await expect(snapshotAria(page.getByRole("main"))).toMatchJsonFile();
});

ARIA Snapshot Example:

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

Composing Multiple ARIA Snapshots

To compose multiple ARIA snapshots in a single JSON file, you can use an object structure:

import { snapshotAria } from "@cronn/aria-snapshot";

test("matches composed ARIA snapshots", async ({ page }) => {
  await expect({
    nav: await snapshotAria(page.getByRole("navigation")),
    main: await snapshotAria(page.getByRole("main")),
  }).toMatchJsonFile();
});