[Bug]: Snapshot not taken correctly

[iwan-uschka]

Version

1.52.0

Steps to reproduce

Before creating a reproduction repo i wanted to ask if this issue sounds familiar to someone. I couldn't find any related issue here. The problem: i am facing flaky snapshot tests containing half empty snapshots like

every now and then. Nothing but the dimensions are correct. It should contain a lot of text, some buttons, icons and even a background color. The white box on the right side doesn't exist like this on this page.

Playwright config:

import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  workers: 1,
  fullyParallel: true,
  preserveOutput: 'failures-only',
  retries: 2,
  globalTimeout: 60 * 60 * 1000,
  reporter: [['line'], ['html', { open: 'never' }]],
  testMatch: 'src/**/*.test.[j|t]s',
  use: {
    headless: true,
  },
  projects: [
    {
      name: 'Chrome Stable',
      use: {
        browserName: 'chromium',
        channel: 'chrome',
        viewport: { width: 1280, height: 20000 },
      },
    },
  ],
};

export default config;

Tests are called like this:

  const { width = 1280, height = 810 } = snapshotTestDefinition.viewport || {};

  test(getTestName(snapshotTestDefinition), async ({ page }) => {
    // block urls other than from `allowedDomains`
    await page.route('**/*', async (route, request) => {
      const requestUrl = request.url();
      const originRegExp = new RegExp(
        `https?:\\/\\/[^/]*(${allowedDomains.join('|').replaceAll('.', '\\.')})(\\/.*)*$`
      );
      const hasRequestUrlAllowedOrigin = originRegExp.test(requestUrl);

      if (hasRequestUrlAllowedOrigin) {
        await route.continue();
      } else {
        await route.abort();
      }
    });

    await page.goto(snapshotTestDefinition.url, { waitUntil: 'networkidle' });
    await page.setViewportSize({ width, height });
    await page.waitForTimeout(250);
    await expect(page).toHaveScreenshot({
      fullPage: true,
      threshold: 0.75,
      animations: 'disabled',
    });
  });

snapshotTestDefinition looks like this:

{
  url: 'http://domain.tld/path/to/site',
  name: 'name-of-site',
  viewport: {
    width: 400,
    height: 800,
  },
}

Expected behavior

Screenshots always contain the actual content and not some random white box on a transparent background.

Actual behavior

Screenshots sometimes contain some random white box on a transparent background instead of the actual content.

Additional context

No response

Environment

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.39 GB / 64.00 GB
  Binaries:
    Node: 20.19.2 - ~/.nvm/versions/node/v20.19.2/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.19.2/bin/npm
    pnpm: 10.12.1 - ~/.nvm/versions/node/v20.19.2/bin/pnpm
  IDEs:
    VSCode: 1.101.0 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash

[mxschmitt]

Sounds definitely like a bug! Having a reproduction for that would be really helpful (also if it also happens 1/100 times or something like that). Thanks!

[Skn0tt]

Closing as stale.