Using cypress how do I check that a background image has loaded?

Question

Writing my first cypress test in conjunction with percy visual tester. I load my landing page, check a few links and then take a percy snapshot. The issue is that the background image hasn't loaded in the snapshot.

I can get it to appear by artifically waiting before taking the snapshot, but I'd prefer to have a cypress assertion to check this instead.

Here is the css:

.bg-hero { @include image("/images/background/landing.jpg", center); }

Here is the html: <div class="bg-hero bg top-header bg-header-top" id="#"></div>

I tried: cy.get('.bg-hero').should('be.visible');

Am currently using: cy.wait(3000);

thanks

Answer 1

You can use Route command as this

cy.route('imageURL').as('image')
cy.wait('@image')
cy.get('.bg-hero').should('be.visible');

Answer 2

The issue was with Percy and not Cypress. I had to tweak a setting such that Percy would wait a while longer. Percy command line docs reference a network idle timeout setting. Thanks to Rob@Percy for putting me onto this. It has made my visual testing much more robust.