I am trying to validate if the CSS 'backgroud-image' URL has status code '200'. Is it possible to validate loading of images using Cypress. Can anyone please suggest?
it('Validate the images displayed',() => {
cy.get('.logo').each(($el,index,$list) => {
expect($el).to.have.css('background-image','*should pass dynamic url image*')
})
After you get the element, you can use a JQuery function to return the background-image css value ($el.css('css-property')), and use that in a cy.request() function where you validate it is a 200.
it('Validate the images displayed',() => {
cy.get('.logo').each(($el) => {
// $el.css('background-image') => may take some formatting to be just right, depending on what is returned by that function.
cy.request($el.css('background-image')).then((res) => {
expect(res.statusCode).to.eql(200);
});
});
});