Playwright Element Snapshots

Element snapshots for Playwright.

Read the full documentation

[!NOTE] Element Snapshots are currently experimental. Not all HTML elements, ARIA roles and attributes are covered. Breaking changes to the snapshot format are possible.

Getting Started

Installation

pnpm add -D @cronn/element-snapshot

npm install -D @cronn/element-snapshot

yarn add -D @cronn/element-snapshot

Writing Tests

import { semanticSnapshot } from "@cronn/element-snapshot";
import { defineFileSnapshotMatchers } from "@cronn/playwright-file-snapshots";

const expect = defineFileSnapshotMatchers();

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

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

Output (matches_element_snapshot.json):

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