Chrome headless puppeteer：制作屏幕截图渲染滚动条

Question

使用 chrome headless puppeteer 对网页进行屏幕截图时，滚动条永远不会呈现。

复制：

1. 转到他们的官方演示页面： https: //try-puppeteer.appspot.com/

2. 将 page.goto(' https://example.com ') 更改为 ' https://backbonejs.org/ '。

3. 截图

4. 导航菜单（左侧）中的滚动条未呈现。

有办法打开吗？

Answer 1

我遇到了同样的问题：我们的 CI 在无头模式下由于某种原因不再渲染滚动条。经过一番挖掘，我在 puppeteer 的 Github 存储库上发现了以下问题。

无头模式不应强制--hide-scrollbars

确保在无头 CI 和本地 CI 上渲染滚动条的快速解决方案是显式忽略--hide-scrollbarspuppeteer 启动配置中的参数：

this.browser = await puppeteer.launch({
  // Existing config goes here...
  ignoreDefaultArgs: ["--hide-scrollbars"]
});

Answer 2

看来网站本身会根据视口和其他一些因素打开/关闭滚动条。如果您通过 DevTools 模拟某些设备，您可以看到滚动条消失。此外，他们还以一种头脑傀儡师的方式出现。