3

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-images.

machineghost
  • 33,529
  • 30
  • 159
  • 234

2 Answers2

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"});
Filas Siuma
  • 301
  • 1
  • 8
  • Thanks, but then if the page doesn't load, how do I know what image was broken? – machineghost Sep 02 '21 at 16:47
  • You can set a request interceptor and check for requests status and type. This might help https://stackoverflow.com/questions/52969381/how-can-i-capture-all-network-requests-and-full-response-data-when-loading-a-pag – Filas Siuma Sep 03 '21 at 07:09
  • Using that technique, how can I tell if an image failed to load? – machineghost Jan 10 '22 at 00:14
  • https://stackoverflow.com/questions/50531779/puppeteer-cant-catch-failing-request-errors. Store the request failures in an array using the `requestfailed` hook. After the page has loaded, loop the DOM nodes checking for a background image src property(computed style). If the background-image src in the request failed array, you know it didn't load. – first last Jan 10 '22 at 01:50
  • I don't see this as the correct answer. "So the images should be loaded while..." - keyword being "should be". This is just checking the page seems to have finished loading everything. – majixin Jan 18 '22 at 13:01
0

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.

majixin
  • 186
  • 9
  • Mixing testing code into production code is generally considered a bad practice. – machineghost Jan 13 '22 at 23:10
  • True, but I don't think you have many options. Having the puppeteer script see if it can fetch the background image is only testing if the script can do it, not if the page under test actually did it. Why is it worth testing in the first instance, since you can only test that the image loaded at that particular moment (if the image is remote and not on the same server). Testing that the background image loaded is not a guarantee it will always load or that the page is coded correctly. It just indicates the resource was available at the moment the page requested it. – majixin Jan 14 '22 at 13:12