search

garris / BackstopJS

Catch CSS curve balls.
http://backstopjs.org
MIT License
6.69k stars 604 forks source link

Wait until background-image is loaded? #1421

Closed visma-zanas-stundys closed 2 years ago

visma-zanas-stundys commented 2 years ago

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 2 years ago

Looks like https://github.com/garris/BackstopJS/issues/1330 is related -- but I it's solution doesn't fit here

garris commented 2 years ago

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!

visma-zanas-stundys commented 2 years ago

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