[Question] Scrollbars in Firefox headless

[imsocrazy]

Hi, Our tests are based on comparing screenshots of page elements with baselines. One use case is to take a screenshot of a dialog with and without a scrollbar to test layout and styles.

To display scrollbars in chromium based browsers, I can ignore the --hide-scrollbars argument. Is there any opportunity to show scrollbars in Firefox headless?

[pavelfeldman]

I don't think we have anything. Could you share a code snippet along with your expectations?

[imsocrazy]

I think it would be nice to have a consistent approach to working with scrollbars across all browsers. This means using --hide-scrollbars as the default argument as an indicator to disable scrollbars in case of headless mode for Firefox browser as well.

const firefox = require('playwright').firefox;

const browser = await firefox.launch({
    headless: true,
    ignoreDefaultArgs: ['--hide-scrollbars']
});

const page = await browser.newPage();
await page.goto('//some_url');

await page.screenshot({
    fullPage: false,
    path: './screenshot.png'
});

It is assumed that in this case screenshot.png will contain scrollbars.

[imsocrazy]

Hi again, @pavelfeldman, I updated Firefox omni.ja file to disable the "scrollbar-width" CSS style from juggler content to display scrollbars in headless mode. It works on windows but doesn't work inside Linux docker container. In Linux, the indent of all elements on the right side has increased (by the width of the scroll, I assume), but the scrollbar is not visible. Do you have any information about behavior of scrollbars in headless Firefox on Linux? And what is the reason why scrollbars were hidden for headless mode in all browsers?

[Sue9445]

I think it would be nice to have a consistent approach to working with scrollbars across all browsers. This means using --hide-scrollbars as the default argument as an indicator to disable scrollbars in case of headless mode for Firefox browser as well.

+1

[canonic-epicure]

Just stumbled upon this issue too. In headless mode, both Chromium and Firefox operates in no-scrollbars mode, whereas our tests assumes the scrollbars presence.

[canonic-epicure]

Perhaps this issue can be prioritized a little. I think its reasonable to expect that page has exactly the same state in headless/headul modes. If you test anything related to scrollbars (like we do) that becomes crucial.

[canonic-epicure]

Is there any workaround for this issue?

[leonidx86]

Continuing discussion from related #12494

Here is my usecase:

1. Need to use Chromium extension, hence limited to headful mode.
2. The screenshot must contain only the content for each page. But the scrollbar appears on pages with vertical scroll, and does not appear on pages without scroll.

For now I've added a check to see if document.documentElement.scrollWidth is less than page viewport width, meaning that there is a scrollbar, and then cropping it from the screenshot.

[twbryan]

We have the same use-case (wanting to run headful, but only screenshot the page contents for comparisons) as above.

[palewire]

I'm in the same headful boat. Would love a solution for Chromium.

[BMayhew]

I get a scrollbar from screenshot when running headless: false I don't get a scrollbar from screenshot when running headless: true

This causes an issue with the screenshot comparison. I only run into this issue when I am trying to debug or running my tests locally in headed mode.

My current work around is passing in headless to the test and doing a conditional ternary to only run tests when headless === true

  test("Successfully Login @happy", async ({ page, baseURL, headless }) => {
    await page.goto(baseURL + "/login");

    await page.getByTestId("login-email").fill(username);
    await page.getByTestId("login-password").fill(password);
    await page.getByTestId("login-button").click();
    await page.waitForLoadState("networkidle");

    expect(page.locator("header")).toContainText("Logged in as Testy");
    headless
      ? expect(await page.screenshot()).toMatchSnapshot("loginUser.png")
      : console.log("Running in Headed mode, no screenshot comparison");
  });

[deviantintegral]

You can make snapshots only run in headless mode with something like this in your config file:

if (process.argv.includes("--headed")) {
  process.env.PWHEADED = "true";
}

const HEADED = process.env.PWHEADED === "true";

And then in defineConfig:

  ignoreSnapshots: (() => {
    // Disable snapshots when running in headed mode.
    return HEADED;
  })(),