剧作家元素快照

Playwright 的元素快照 .

阅读全部文档

[注] 元素快照目前是实验性的. 并非所有的HTML元素,ARIA角色和属性都被覆盖. 突破快照格式的更改是可能的.

开始

安装

pnpm add -D @cronn/element-snapshot

npm install -D @cronn/element-snapshot

yarn add -D @cronn/element-snapshot

写入测试

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();
});

产出(matches_element_snapshot.json:

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