跳至内容

Playwright

Playwright 是什么,它如何跨浏览器截图,以及在自动化方面与 Puppeteer 有何不同。

Playwright 是由 Microsoft 维护的开源浏览器自动化库。它通过同一套 API 驱动 Chromium、Firefox 和 WebKit,并为 JavaScript 与 TypeScript、Python、Java 和 .NET 提供官方绑定。脚本可以打开页面、点击、输入、等待网络活动并读取 DOM,通常在没有可见窗口的无头浏览器中运行。

Playwright 自带测试运行器 Playwright Test,提供并行执行、失败重试、追踪(tracing)和截图断言。许多团队用它编写端到端测试,或在构建、部署流水线中生成截图。

Playwright 能做什么

  • 用同一个脚本在 Chromium、Firefox 或 WebKit 中打开页面。
  • 模拟设备:视口尺寸、设备缩放比例、触控、语言区域、时区和配色方案。
  • 填写表单、点击元素,并等待选择器、网络请求或页面加载状态。
  • 拦截或模拟网络请求。
  • 为每次测试运行录制追踪记录、视频和截图。

用 Playwright 截图

page.screenshot() 将当前视口保存为 PNG 或 JPEG。fullPage 选项截取整个可滚动页面,clip 截取一个矩形区域,locator.screenshot() 截取单个元素。浏览器上下文的 deviceScaleFactor 决定输出为 1x 还是 2x 分辨率。

在 Playwright Test 中,toHaveScreenshot() 会将新图像与已保存的基准图比较,像素差异超过阈值时测试失败。这是视觉回归测试的常见基础。

Playwright 与 Puppeteer

两者都能用代码自动化浏览器,也都能截图和生成 PDF。Playwright 支持 Chromium、Firefox 和 WebKit,并覆盖 4 个语言生态。Puppeteer 是专注于 Chrome 的 Node.js 库,后来才加入 Firefox 支持。Playwright 内置完整的测试运行器,Puppeteer 通常要搭配 Jest 等独立运行器使用。选择哪一个,往往取决于编程语言、所需浏览器以及团队现有的技术栈。

常见错误

  • 在网页字体、图片或懒加载内容加载完成之前就截图。
  • 画面中留有 Cookie 横幅或聊天插件。
  • 拿在不同操作系统上生成的基准图做比较,而不同系统的字体渲染存在差异。
  • 忽略默认视口很小,并不是常见的桌面宽度。

需要反复截取相同的截图?

Temposhot 的 Website Capture 无需编写脚本,即可按 Desktop 1920×1080、Tablet 768×1024 或 Mobile 390×844 截取一组 URL。详见网站截图自动化。

常见问题

Playwright 是免费的吗?

是的。Playwright 以 Apache 2.0 许可证开源。

Playwright 能截取整个网页吗?

能。向 page.screenshot() 传入 fullPage: true 即可。带有懒加载的页面可能需要先滚动一遍,让所有图片加载完成。

Playwright 需要可见的浏览器吗?

不需要。它默认以无头模式运行,调试时也可以显示窗口。

参考资料

相关资源

总是重复截取相同的截图吗?

Temposhot 可定时截取屏幕、窗口或指定区域,并将结果导出为 PDF、图片、ZIP 或 MP4。免费的网页工具只能处理单张图片。

相关资源

相关术语

全部术语