# Playwright ARIA 快照：界面外观没变，也能发现按钮角色和可读名称退化

## 执行范围

已运行 Playwright 原生 ARIA 快照、角色定位器和修复后断言；没有调用 AI 账号，也未进行完整无障碍合规审计。

## 输入与目标

同样视觉外观的按钮/普通div、带label/缺label的表单对照

交付：语义快照diff、对照页面与修复补丁

## 运行

在 reference 目录执行；先按文件 requirements.txt / package.json 或原生工具文档安装依赖。浏览器练习需 `npx playwright install chromium`；也可设置 `PLAYWRIGHT_EXECUTABLE_PATH` 为自己的 Chrome 路径。

```sh
npm install
npm run verify
```

## 目录

- fixtures：作者原创输入，不包含用户真实资料。
- starter：读者待完成任务。
- reference：作者完成参考。
- results：作者实际运行所得或明确标注的待运行输入/预期合同。

## 七步

1. **保留视觉基线**

打开 fixtures/good.html：真实 button 和 for/id 关联标签都在。保存原生 ARIA 树时只选 main，避免把无关页眉和动态通知一起锁进快照。

2. **采集原生快照**

在浏览器上下文调用 locator.ariaSnapshot()，将 baseline.aria.yml 与源码一起保存。可读名称“联系邮箱”必须来自标签，而不是误把 placeholder 当成正确名称。

3. **制造语义退化**

把 button 改成同样样式的 div，并移除 label 的 for；不改 CSS。页面截图看起来几乎相同，但真实的 button 角色和邮箱名称会消失。

4. **定位差异来源**

运行坏页面后读取 regressed.aria.yml。getByRole 对两个预期名称都返回 0；把这两段树与 bad.html 的实际行对应起来，再交给 AI 修复。

5. **修复标签和角色**

要求 AI 恢复原生 button 与 label for/id，不用 aria-hidden 隐藏问题，也不把全部 div 强行标成 button。reference 保留作者完成版，starter 留给读者独立修改。

6. **放宽动态文字**

把更新时间从 10:23 改为 10:24，快照用正则只约束“更新时间”语义。toMatchAriaSnapshot 必须在 Playwright test 中执行，不能当普通 Node 脚本断言调用。

7. **回读修复产物**

重新运行验证：角色和名称恢复，动态时间变化仍可通过。保存两份 ARIA 树、同样外观的截图和 verification.json；这组断言不等于完整可访问性审核。

## 来源

- https://playwright.dev/docs/aria-snapshots