puppeteer - Chrome headless puppeteer 师 : make screenshot render scrollbar

Question

当使用 chrome headless puppeteer 截取网页的屏幕截图时，滚动条永远不会呈现。

复制:

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

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

截图

导航菜单(左侧)中的滚动条未呈现。

有没有办法开启它？

Answer 1

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

Headless mode should not force --hide-scrollbars

确保滚动条在我们的 headless 和本地 CI 上呈现的快速解决方案是明确忽略 --hide-scrollbars puppeteer 的启动配置中的参数:

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