[Bug]: toHaveScreenshot Timeout

[OneSir]

Version

1.45.3

Steps to reproduce

await page.goto(`https://modern-uitest.myshopline.com`,{ timeout: 60000 });
await page.waitForTimeout(1000);
await page.locator(`//*[contains(@class,'product--left')]`).first().scrollIntoViewIfNeeded({ timeout: 30000 });
await page.waitForTimeout(1000);
await expect(page).toHaveScreenshot('product.png', { mask: [] });
await page.waitForTimeout(1000);

Expected behavior

success to take screenshot

Actual behavior

failed to take screenshot

Call log:

• expect.soft.toHaveScreenshot(单个商品.png) with timeout 10000ms
• generating new stable screenshot expectation
• taking page screenshot
• disabled all CSS animations
• waiting for fonts to load...
• Timeout 10000ms exceeded.

Additional context

No response

Environment

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) Xeon(R) Silver 4110 CPU @ 2.10GHz
    Memory: 7.73 GB / 8.00 GB
    Container: Yes
  Binaries:
    Node: 22.5.1 - /bin/node
    npm: 10.8.2 - /bin/npm
  Languages:
    Bash: 4.3.48 - /bin/bash
  npmPackages:
    @playwright/test: ^1.45.3 => 1.45.3

[OneSir]

System:
OS: macOS 14.5
CPU: (8) arm64 Apple M1
Memory: 327.11 MB / 16.00 GB
Binaries:
Node: 20.10.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.13 - /usr/local/bin/npm
pnpm: 9.1.3 - /usr/local/bin/pnpm
Languages:
Bash: 3.2.57 - /bin/bash
npmPackages:
@playwright/test: ^1.45.3 => 1.45.3
---------------------------------
This environment can succeed

[yury-s]

I cannot reproduce it neither on my m1 mac nor in linux box. Do you pass any extra command line options to the browser or load any extensions? Are you running in a docker container on m1 mac? Would be nice if you shared complete project so that we could be sure that we run the same code.

Related issue: #29073

[OneSir]

@yury-s
7596486.zip
Attached is the complete content of the project.The command line content is: npx playwright test ./tests/2242-截图会失败的用例.spec.ts --workers=1 --retries=1 --project=MobileChrome -u
thanks.

[OneSir]

Error: Timeout 10000ms exceeded.

Call log:

• expect.soft.toHaveScreenshot(单个商品.png) with timeout 10000ms
• generating new stable screenshot expectation
• taking page screenshot
• disabled all CSS animations
• waiting for fonts to load...
• Timeout 10000ms exceeded.

19 | //【截图对比】
20 | await test.step(截图, async () => {

21 | await expect.soft(page).toHaveScreenshot('单个商品.png', { mask: [page.locator(//*[contains(@class,'featured-recommend-products')]).first()] });
| ^
22 | });
23 | //【设置等待时间】
24 | await test.step(等待, async () => {

at /data/services/7600606/tests/2242-截图会失败的用例.spec.ts:21:29
at /data/services/7600606/tests/2242-截图会失败的用例.spec.ts:20:14

[yury-s]

Thanks for sharing the project! Unfortunately, I'm still not able to reproduce the problem. Can you try running with PW_TEST_SCREENSHOT_NO_FONTS_READY=1 environment variable and see if it helps?

[OneSir]

Error: Timeout 10000ms exceeded.

Call log:

• expect.toHaveScreenshot(单个商品.png) with timeout 10000ms
• generating new stable screenshot expectation
• taking page screenshot
• disabled all CSS animations
• Timeout 10000ms exceeded.

trace.zip
@yury-s Thanks for the Pointers, but it still failed. Attached is the trace package to see if it can help analyze the cause.

[yury-s]

I still cannot reproduce it locally. Judging by the trace, you are running the test on a heavily loaded machine (e.g. page.waitForTimeout(20_000) took 28.2 seconds!), this may be a reason why the operation is sluggish and times out. Try increasing the timeout.

Also there is a bunch of waitForTimeout in the test which is a discouraged practice, you should rely on Playwright's auto-waiting. If the test is still flaky, it means that the page keeps changing and toHaveScreenshot cannot take two identical snapshots in a row and keep retrying.

I'm closing this report as we cannot take any action on it without reproducing it and the trace logs suggest that the problem is caused by a slow machine which simply cannot complete expensive operations before the timeout. Try increasing the timeout and see if it helps. Feel free to open a new issue if it doesn't work.

[OneSir]

{
name: 'MobileChrome',
use: { ...devices['iPhone 14 Pro Max'] },
}
@yury-s The problem was resolved because the mobile phone mode was used. After changing to chromium, it will be normal after setting the specified width and height.