How to Wait for Fonts and Network Idle Before a Screenshot

A screenshot taken before web fonts and images finish loading captures a fallback-font layout, so wait for fonts.ready and network idle first.

Await page.waitForLoadState('networkidle') and document.fonts.ready before the assertion so late-arriving fonts and images are painted before capture.

Steps

• Navigate, then wait for networkidle.
• Evaluate document.fonts.ready in the page.
• Then run toHaveScreenshot.
• Preload critical fonts to shorten the wait.

Test

await page.goto('/');
await page.waitForLoadState('networkidle');
await page.evaluate(() => document.fonts.ready);
await expect(page).toHaveScreenshot('home.png');

Gotchas

• networkidle can hang on pages with long-polling or streaming connections.
• Self-host fonts so a slow third-party CDN does not cause intermittent flicker.

Related guides