How do I ensure that all images are fully loaded before taking a screenshot in Playwright?


Sure, you want to take screenshots in Playwright, but you're running into an issue where the images haven't finished loading. No worries, I've got you covered!

Playwright's waitForLoadState method is your best friend here. It lets you wait until the page reaches a certain load state, like "networkidle" or "domcontentloaded", before you take that screenshot.

Here's a quick example:

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://ray.run');
  // Chill until the network is idle
  await page.waitForLoadState('networkidle');
  // Now, take that screenshot!
  await expect(page).toHaveScreenshot();

In this snippet, we first head over to a webpage with page.goto. We then tell Playwright to hang tight with page.waitForLoadState until there's no more than two network connections for at least 500 milliseconds. This makes sure all network requests are done and dusted.

Once we've waited for the load state we want, we can take our screenshot with expect(page).toHaveScreenshot(). This way, we know we're capturing the webpage in all its fully-loaded glory.

So, by using waitForLoadState in your Playwright tests, you can make sure your screenshots are picture-perfect and don't miss any images. Happy testing!


Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Discord Threads

Related Questions

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.