Playwright

Playwright 是 Microsoft 开发的开源自动化框架，可以控制 Chromium、Firefox 和 WebKit 浏览器，用于在主流浏览器引擎中进行测试、截图和网页自动化。

Playwright 可以做什么

Playwright 提供统一 API，可以自动操作三种主流渲染引擎：Chromium（Chrome 和 Edge 使用）、Firefox（Gecko）以及 WebKit（Safari 使用）。跨浏览器支持是它最显著的特点，同一份脚本无需修改，就能在三种引擎中运行。

主要功能包括：

• 跨浏览器自动化——编写一份脚本，即可在 Chromium、Firefox 和 WebKit 中运行。Playwright CLI 会安装并管理所需的浏览器二进制文件。
• 截取屏幕截图——把页面保存为 PNG 或 JPEG，截取整个网页、可见视口或特定元素，并设置视口尺寸和设备模拟。
• 生成 PDF——把渲染后的页面导出为 PDF，可以控制页面大小、页边距和缩放比例。
• 拦截网络请求——监测、模拟或修改网络请求，用于测试和数据采集。
• 浏览器上下文——创建互不共享 Cookie、存储或状态的独立浏览器会话，类似无痕窗口。无需重启浏览器，就能以不同用户状态截取页面。
• 多语言支持——为 JavaScript/TypeScript、Python、Java 和 .NET 提供官方绑定。

Playwright 的自动等待机制尤其有用。与需要明确编写等待调用的库不同，Playwright 会先等待元素挂载到 DOM、变为可见并保持稳定，再执行交互。脚本因此更可靠，也能减少“偶发失败”的测试。

使用 Playwright 截图

Playwright 的 page.screenshot() 方法可以精确控制截图输出。你可以截取当前可见视口、整个可滚动页面，也可以传入 locator 截取特定 DOM 元素。

设备模拟可以一次设置视口尺寸、设备缩放系数和 User-Agent，模拟具体设备。Playwright 内置常见手机和平板电脑的设备配置，因此可以直接查看页面在 iPhone、Pixel 或 iPad 上的效果。

对于包含延迟加载内容的页面，Playwright 的自动滚动行为和等待条件有助于确认图片和动态内容在截图前已完成加载。截图前还可以注入 CSS，隐藏 Cookie 横幅、移除聊天组件，或临时调整样式。

Playwright 支持 WebKit，因此可以发现仅使用 Chromium 时看不到的渲染差异。不过，经过修改的 WebKit 版本并不是 Safari，媒体编解码器等操作系统细节也可能不同。需要尽量接近 Safari 的结果时，应在 macOS 上运行 WebKit。

在与 Shotomatic 相邻的流程中，如果需要跨浏览器、路由或登录状态反复截取同一页面，Playwright 会很有用。它把截图过程变成明确的执行方案，而不是一次手动浏览器会话，因此常用于监测和 QA 流程。

Playwright 与 Puppeteer

两种库都适合无头浏览器自动化，但覆盖范围和设计取向不同。

浏览器覆盖范围——Playwright 通过统一 API 支持 Chromium、Firefox 和 WebKit。当前 Puppeteer 版本支持 Chrome for Testing 和稳定版 Firefox，但不支持 WebKit。需要 WebKit 覆盖时，应选择 Playwright。

自动等待——Playwright 会等待元素进入可交互状态。Puppeteer 需要更多明确的等待调用，例如 waitForSelector 和 waitForNetworkIdle，代码更多，也更容易遇到时序问题。

浏览器上下文——Playwright 可以在一个浏览器实例中运行多个隔离会话，减少资源占用。Puppeteer 也提供无痕浏览器上下文，但 API 完整度较低。

API 成熟度——Puppeteer 从 2017 年开始提供，社区资料更多。Playwright 于 2020 年推出，更新更频繁，功能覆盖也更广。

对于以截图为主的流程，通常根据浏览器要求选择。Chrome 和 Firefox 截图都可以使用这两种工具；需要同时比较 WebKit 时，应使用 Playwright。

常见错误

• 没有安装浏览器二进制文件。 安装 Playwright 软件包后，还必须运行安装命令下载浏览器二进制文件。缺少这一步，脚本会因“找不到浏览器”而失败。
• 忽略自动等待的限制。 自动等待可以减少偶发失败，但仍有默认超时。页面加载较慢时，内容准备好之前操作就可能超时。内容较多的页面应调整超时值。
• 延迟加载内容出现前就截图。 即使启用自动等待，Playwright 也不会自动滚完整个页面。截取延迟加载页面的全页截图时，应先加入滚动步骤。
• 使用了不适合场景的浏览器。 所有截图都用 Chromium 速度更快，却会漏掉 Firefox 和 WebKit 的渲染差异。视觉输出需要符合不同浏览器中的实际效果时，应进行跨浏览器截图。
• 没有关闭浏览器上下文。 截图后未关闭浏览器上下文，会让长时间运行的脚本发生内存泄漏。完成后应始终关闭上下文和浏览器实例。