Chrome无头木偶：使屏幕截图呈现滚动条

Question

使用chrome无头木偶为网页截图时，它永远不会呈现。

要复制：

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

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

3. 拍摄屏幕截图

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

有没有办法打开它？

Answer 1

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

Headless mode should not force --hide-scrollbars

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

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

Answer 2

似乎网站本身会根据视口和其他一些因素打开/关闭滚动条。如果通过DevTools模拟某些设备，则可以看到滚动条消失。此外，它们还以正面的伪装者模式出现。