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 需要可见的浏览器吗?
不需要。它默认以无头模式运行,调试时也可以显示窗口。
参考资料
相关资源
- Website Capture 快速入门:无需代码即可截取一组 URL。
- Website Capture 选项:设备、区域、等待和格式设置。
- 比较图片:在浏览器中检查两张截图的差异。
总是重复截取相同的截图吗?
Temposhot 可定时截取屏幕、窗口或指定区域,并将结果导出为 PDF、图片、ZIP 或 MP4。免费的网页工具只能处理单张图片。