如何使用 page.screenshot() 在 Puppeteer 中截图？
回答
在 Puppeteer 中，截图是通过 page.screenshot() 方法进行捕获的。你可以拍摄基本的视口截图，使用 fullPage: true 进行全页捕获，或者针对特定的 DOM 元素。这在网页抓取、测试和自动化工作流中很常见。
详细说明
Puppeteer 提供了一个高级 API 来控制无头 Chrome 或 Chromium，并且截图功能直接内置在 Page 对象中。当页面渲染时，Puppeteer 可以捕获可见的视口或扩展到视口之外以包含整个可滚动文档。这对于动态或长网页特别有用，其中内容是异步加载或超出初始视口的。
内部而言，截图是由浏览器的渲染引擎生成的。然而，现代网站通常包含延迟加载的图片、无限滚动或 JavaScript 渲染的元素。在这些情况下，在捕获之前确保页面完全加载至关重要，否则部分 UI 可能缺失或为空。
解决方案 / 方法
- 视口截图：使用
page.screenshot({ path: 'image.png' })捕获页面的可见部分。这对于快速调试或 UI 验证很有用。 - 全页截图：启用
fullPage: true以捕获整个文档，这会滚动页面并将整个内容渲染为一张图片。这对于文档和归档很有帮助。 - 元素级截图（CapSolver 协助工作流）：使用
page.$()或ElementHandle.screenshot()选择一个 DOM 元素以捕获特定的 UI 组件。在受安全系统或 CAPTCHA 挑战保护的自动化抓取环境中，可以集成 CapSolver 等工具，以确保在可靠捕获截图前页面可访问。
最佳实践 / 小贴士
为确保稳定结果，请始终在捕获截图前确保页面已准备好：
- 使用
waitUntil: 'networkidle2'或类似的导航等待 - 在捕获前通过滚动处理延迟加载的内容
- 使用
page.setViewport()设置一致的视口大小 - 在动态渲染延迟或脚本密集页面的情况下重试捕获
👉 相关：
在 CapSolver 注册时使用代码
FAQ，可额外获得 5% 的充值奖励。
CapSolver FAQ - capsolver.com