使用 Cypress 验证 CSS 'backgroud-image' URL

Question

我正在尝试验证 CSS 'backgroud-image' URL 是否具有状态代码“200”。是否可以使用赛普拉斯验证图像的加载。谁能推荐一下？

it('Validate the images displayed',() => {
    cy.get('.logo').each(($el,index,$list) => {
        expect($el).to.have.css('background-image','*should pass dynamic url image*')     
    })

Answer 1

获取元素后，您可以使用 JQuery 函数来 return background-image css 值 ($el.css('css-property'))，然后使用它在 cy.request() 函数中验证它是 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);
        });     
    });
});