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

Answer

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!