Headless mode should not force --hide-scrollbars

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 1.17.0
• Platform / OS version: macOS / CI (linux)
• Node.js version: 10.16.0

What steps will reproduce the problem?

Please include code that reproduces the issue.

1. Create a page with a block level element and measure its width
2. Increase the element height so the page shows the scrollbars
3. Measure the element’s width again

What is the expected result?

The element’s width differs because the scrollbar makes it shrink

What happens instead?

The element’s width doesn’t change. This is because Puppeteer in headless modes hides the scrollbars. https://github.com/GoogleChrome/puppeteer/blob/f5bb333cd0c42306f47e7767e5cb8b78af557c27/lib/Launcher.js#L85

AFAIK at the moment there is no way to override this behavior.

[karl]

With a bit of Googling I found out you can override the default behaviour so you do see scrollbars in headless mode. Just add ignoreDefaultArgs: ["--hide-scrollbars"] to your puppeteer configuration:

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

Code copied from here: https://github.com/GoogleChrome/puppeteer/issues/2999#issuecomment-490854398

[ThibaultJanBeyer]

+1 the default set-up should be the same as a non-headless mode = i.e. either display the scrollbars or hide the scrollbars on both. But currently, headless: true, will hide scrollbars while headless: false will show scrollbars. Giving different test results based on wether it’s headless or not.