Validate CSS 'backgroud-image' URL using Cypress-CodePudding

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*')     
    })

CodePudding user response：

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);
        });     
    });
});