Is there a way to conditionally skip the Playwright Visual Comparison toMatchSnapshot() based on if the test is running in headed or headless mode?

I recently ran into a scenario where I was attempting to have a Visual Comparison test within a login test, and ran into a slight difference in the way headless and headed versions of chrome handled a scroll bar.

• 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. Below is an example of one of my outputs where the only difference is the scroll bar. Also look how sweet that slider is, it's all built into the Playwright test runner report!

In order to avoid failures, 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 McTester");
    headless
      ? expect(await page.screenshot()).toMatchSnapshot("loginUser.png")
      : console.log("Running in Headed mode, no screenshot comparison");
  });

This does require a bit of extra work in your spec file but solves my problem. I am also keeping my eye on this github issue in hopes of removing this conditional.

Thanks for reading! If you found this helpful, reach out and let me know on LinkedIn or consider buying me a cup of coffee. If you want more content delivered to you in your inbox subscribe below.