garris/BackstopJS

Wait until background-image is loaded?

Closed this issue · 3 comments

visma-zanas-stundys commented

We have an icon library that uses background-image: url(...) mechanism to display them. BackstopJS works fine, but sometimes the screenshot is taken before the icon image is loaded.

Is there any way to wait for those images to load? Tried using timeouts, but they're flaky and do not work 100% of the time.

visma-zanas-stundys commented

Looks like #1330 is related -- but I it's solution doesn't fit here

garris commented

Check out this thread for a discussion related to ensuring assets are loaded in puppeteer... https://stackoverflow.com/questions/52497252/puppeteer-wait-until-page-is-completely-loaded

You can experiment with these techniques in an onReadyScript to find the approach which suits your needs. Hope this helps!

  • 👍1
visma-zanas-stundys commented

Thanks for pointing me in the right direction. Looks like the following snippet did the trick:

await page.goto(scenario.url, { waitUntil: 'networkidle0' });

I noticed that in BackstopJS's source code, page.goto is called before the onReadyScript -- I wonder if the second call I did to page.goto introduces any navigation overhead. It's acceptable for now ;)

The final configuration as reference for those who might encounter this in the future.

image

  • 👍1