page.screenshot({ fullPage: true}) taking different screenshot dimensions based on headless/headful

Yes, it's described here: https://github.com/microsoft/playwright/issues/12683

if you need to take a screenshot of particular component that's just not fully visible, then there's a good workaround:

Then(
  'framework verified screenshot of scrollable element with testId {string}',
  async ({ page, $testInfo }, locator: string): Promise<void> => {
    const currentViewport = page.viewportSize();
    if (!currentViewport) {
      throw new Error('Current viewport size is not set.');
    }

    const pixelAmountRenderedOffscreen = await page.evaluate((locator) => {
      const content = document.querySelector(`[data-testid='${locator}']`);
      if (!content) {
        throw new Error(`Element with data-testId '${locator}' not found.`);
      }
      return content.clientHeight;
    }, locator);

    await page.setViewportSize({
      width: currentViewport.width,
      height: currentViewport.height + pixelAmountRenderedOffscreen,
    });

    try {
      await expect(page.getByTestId(locator)).toHaveScreenshot(`${$testInfo.title}.png`, {
        threshold: defaultThresholds.threshold,
        maxDiffPixelRatio: defaultThresholds.maxDiffPixelRatio,
        timeout: 15000,
      });
    } catch (error) {
      const pixelDifferenceMatch = error.message.match(errorMessageRegex);
      if (pixelDifferenceMatch) {
        throw new Error(pixelDifferenceMatch[1]);
      } else {
        throw error;
      }
    }
  }
);

BUT if that element is really huge you might run into performance issues.

Why the try{ } catch(error) {} block and not just the await expect(page.get....) directly ? If the expect fails, the test will fail with a proper expectation message saying whether it was the locator failing, or the toHaveScreenshot and pixel matching failing.

In report in case of a pixel mismatch it was outputting bit too much info, so I wanted to show only the pixel difference.

now it looks like:

Error: 508 pixels (ratio 0.11 of all image pixels) are different.

was

Call log:
      - page._expectScreenshot with timeout 5000ms
      -   verifying given screenshot expectation
      - waiting for getByTestId('select-wrapper')
      -   locator resolved to <div data-testid="select-wrapper">…</div>
      - taking element screenshot
      -   disabled all CSS animations
      -   waiting for element to be visible and stable
      -   element is visible and stable
      - 508 pixels (ratio 0.11 of all image pixels) are different.
      - waiting 100ms before taking screenshot
      - waiting for getByTestId('select-wrapper')
      -   locator resolved to <div data-testid="select-wrapper">…</div>
      - taking element screenshot
      -   disabled all CSS animations
      -   waiting for element to be visible and stable
      -   element is visible and stable
      - captured a stable screenshot
      - 508 pixels (ratio 0.11 of all image pixels) are different.

in case of missing locator in both cases it looks the same:

Call log:
      - page._expectScreenshot with timeout 5000ms
      -   verifying given screenshot expectation
      - waiting for getByTestId('select-wrapper1')
      - Timeout 5000ms exceeded.

Call log:
      - page._expectScreenshot with timeout 5000ms
      -   verifying given screenshot expectation
      - waiting for getByTestId('select-wrapper1')
      - Timeout 5000ms exceeded.