How Can I Tell If a Background-Image Loaded Successfully ... AFTER The Fact?

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. machineghost is looking for a to this question: ：

Surely there has to be some sort of way to "assertBackgroundImageLoaded(div)" in Puppeteer?

There are several Stack Overflow questions like How can I check if a background image is loaded? which are similar to mine. They attempt to run code when an element's background-image loads, and accomplish this by adding an onload handler to the element.

But what if you are running (for instance) a Puppeteer script, which checks the page after it has already loaded? In that case you can't add onload handlers.

Is there any way to verify that the background-image of an element loaded, "after the fact", without using onload ?

The only way I can think of is to grab their background-image style, then fetch the image myself to see if it loads ... but that seems a lot slower than just asking the browser (somehow) if the image loaded ... especially if I'm checking a lot of background-image s.

Answer 1

Puppeteer has a config for pages to check the number of idle connections. So the images should be loaded while there are no more requests than specified in 500ms.

await page.goto('https://www.google.com/', {"waitUntil" : "networkidle0"});

Answer 2

In the onLoad event, write away the data you wish to check such that you save state.

Then when your Puppeteer script runs, you will be able to re-inspect the very same data.