How to wait for full rendered image in Playwright

Question

I have a problem with one of my tests. In my project I use playwright 1.37.1 and typescript 5.1.6. I want to compare images using snapshot method. The thing is screenshot during of tests is not fully rendered and my assertions is always failed. I try to use some waiter e.g. waitForSelector(), waitFotLoadState() but is not helping. Only if I use code below it's working

await new Promise(resolve => setTimeout(resolve, 1000)); // 1000 milliseconds = 1 second

Do you know better solutions? :) Thanks for any tips :)

Answer 1

May be the image(s) loading lazily , try to scroll to wait till all images are loaded completely:

In the below code, you will wait for all images in parallel to finish loading so it will wait only upto the load time of the image which takes maximum time to load.

// Trigger loading of all images
let locators=  page.locator('//img')
await locators.evaluateAll(e => e.scrollInfoView());
// Set up listeners concurrently
const promises = locators.map(locator => locator.evaluate(image => image.complete || new Promise(f => image.onload = f)));
// Wait for all once
await Promise.all(promises);

Reference: https://github.com/microsoft/playwright/issues/14388#issuecomment-1147769469