Puppeteer

Puppeteer 是由 Google Chrome 团队维护的开源 Node.js 库。它通过 Chrome DevTools Protocol 或 WebDriver BiDi 控制 Chrome 或 Chromium，也能控制 Firefox。它默认以无头模式运行，页面在没有可见窗口的情况下加载和渲染。

Puppeteer 脚本会启动浏览器、打开页面，并像用户一样操作页面：跳转、点击、输入以及等待内容出现。这个库常用于截图、生成 PDF、抓取数据、性能检查，以及对基于 Chrome 的 Web 应用进行自动化测试。

Puppeteer 能做什么

• 启动 Chrome、Chromium 或 Firefox，或连接到正在运行的浏览器。
• 设置视口、User-Agent、地理位置和网络条件。
• 点击、输入、提交表单，并等待选择器出现或网络空闲。
• 拦截请求，屏蔽广告、图片或跟踪器。
• 用 page.screenshot() 保存截图，用 page.pdf() 保存 PDF。

用 Puppeteer 截图

page.screenshot() 可输出 PNG、JPEG 或 WebP。fullPage 选项截取整个可滚动文档，clip 截取一个矩形区域，元素句柄则截取单个元素。page.setViewport() 设置宽度、高度和 deviceScaleFactor，后者决定输出为 1x 还是 2x 分辨率。

page.pdf() 与截图不同。它使用浏览器的打印布局和打印 CSS，因此可能会对页面分页或隐藏某些元素，而 page.screenshot() 记录的是屏幕上渲染出的画面。

Puppeteer 与 Playwright

Puppeteer 是以 Chrome 为核心的 JavaScript 库。Playwright 支持 Chromium、Firefox 和 WebKit，提供 JavaScript、Python、Java 和 .NET 绑定，并内置测试运行器。只需要 Chrome 的 Node.js 项目适合用 Puppeteer，需要 Safari 的 WebKit 引擎或其他语言的团队适合用 Playwright。

常见错误

• 页面跳转后立即截图，此时字体和图片尚未加载完成。
• 期望 page.pdf() 的效果与屏幕显示一致。
• 同时运行大量浏览器实例，导致内存耗尽。
• 忘记关闭浏览器，留下仍在运行的进程。

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

Temposhot 的 Website Capture 会在受管理的本地浏览器中加载一组 URL，并以 Viewport 或 Full page 区域为每个 URL 保存一张图像。详见网站截图自动化。

常见问题

Puppeteer 只能用于 Chrome 吗？

Chrome 是它的主要目标。Puppeteer 也通过 WebDriver BiDi 支持 Firefox。

Puppeteer 能截取 Retina 截图吗？

能。在 page.setViewport() 中把 deviceScaleFactor 设为 2，即可得到宽度和高度均为 2 倍像素的图像。

使用 Puppeteer 需要编程吗？

需要。它是一个库，需在 Node.js 上运行的 JavaScript 或 TypeScript 代码中调用。

参考资料

• Puppeteer 文档
• Chrome DevTools Protocol

相关资源

• Website Capture 快速入门：无需代码即可截取多个 URL。
• Chrome 扩展程序：将当前标签页保存为一张整页 PNG。
• 拼接截图：在浏览器中把多张截图拼成一张图像。