浏览器自动化与真实边界

本节用一个最小 Playwright 测试把“浏览器自动化能证明什么”落到输入和 DOM 结果。先在测试目录安装 @playwright/test，并按项目需要安装目标浏览器。

import { test, expect } from '@playwright/test'
test('button updates status', async ({ page }) => {
  await page.setContent(`<button>保存</button><output></output><script>document.querySelector('button').onclick=() => document.querySelector('output').textContent = '已保存'</script>`)
  await page.getByRole('button', { name: '保存' }).click()
  await expect(page.locator('output')).toHaveText('已保存')
})

这个断言覆盖 DOM、点击和文本，不覆盖真实读屏、GPU 或移动端权限；把边界记录在测试说明中。

机制拆解

自动化浏览器能稳定断言 DOM、事件、请求和可见文本；真实读屏、GPU、权限提示和设备输入仍需要对应宿主验证。测试文件要声明运行时、浏览器项目和未覆盖边界。

边界与失败路径

• 所有权：监听器、observer、worker、连接、缓存和焦点都有创建者与释放时机；页面隐藏、路由离开和元素移除时都要验证。
• 宿主差异：SSR、Web Worker、Shadow DOM、跨文档、跨源和辅助技术不会共享同一套全局对象与事件路径。
• 错误分类：取消、超时、权限拒绝、协议错误、配额不足和浏览器不支持应分别进入可观察状态。
• 安全边界：用户输入、URL、HTML、消息和持久化数据不能仅因为来自同源或类型正确就视为可信。

可运行实验

在 Chromium、Firefox 和 WebKit 项目中运行同一 Playwright 测试，记录 DOM 断言、控制台错误和权限/读屏未覆盖项；不能用一个浏览器的绿色结果代表全部宿主。

实验记录要包含运行时、输入步骤、预期输出、实际日志和未覆盖的宿主差异。

练习

1. 在 Chromium、Firefox、WebKit 运行同一 DOM 断言并保存版本。
2. 加入键盘路径和网络失败路径，记录自动化覆盖与真实宿主缺口。
3. 说明读屏、GPU、权限提示为何需要额外的真实环境验证。 查看本节答案

下一步

完成练习后回到本章概览，按下一篇继续；遇到跨章节故障，先回到本节的所有权与宿主边界。