[BUG] Chromium: screenshot is created without scrollbars

[DJ-Glock]

Context:

• Playwright Version: playwright-chromium 1.9.2
• Operating System: Windows (also can be reproduced on a Linux, using PW docker image)
• Node.js version: 12.18.3
• Browser: Chromium
• Extra: can be reproduced with React based sites.

Code Snippet
Here you are a code sample that can reproduce the issue

// @ts-check
const playwright = require("playwright-chromium");

(async () => {
  const browser = await playwright.chromium.launch({
    // Change it according your needs
    headless: true,
    slowMo: 100,
    args: [
      '--start-maximized',
      // '--window-size=1920,1080',
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage',
      '--enable-logging',
    ]
  });
  const context = await browser.newContext({viewport:{width:1920,height:1080}});
  // const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/virtual-scrolling/', { timeout: 60000 });
  await page.waitForTimeout(3000);

  const demo = await page.waitForSelector('[class="embedded-demo"]');
  await demo.scrollIntoViewIfNeeded();

  await page.screenshot({ path: './screenshots/test.png' });

  await browser.close();
})();

Describe the bug
When PW takes a screenshot of React based grid, scrollbars disappeared.

What you see in your browser:

What you can see on PW screenshot of the page:

[yury-s]

This is specific to headless mode where playwright hides scrollbars by default. You can override this behavior by changing your launch code like this:

const browser = await playwright.chromium.launch({
  ignoreDefaultArgs: [
    '--hide-scrollbars'
  ],
  // other options
});

[nickofthyme]

Alternatively, this can be set in the playwright config...

// playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  use: {
    headless: true,
    launchOptions: {
      ignoreDefaultArgs: ['--hide-scrollbars'],
    },
  },
  projects: [
    {
      name: 'chrome',
      use: {
        browserName: 'chromium',
        launchOptions: {
          ignoreDefaultArgs: false, // overrides top-level `use` value
        },
      },
    },
  ],
};
export default config;