使用延迟加载时如何测试图像加载

Question

我正在尝试验证滑块内的图像属性。奇怪的是，我的测试一次成功，另一次失败。

这是我的代码：

it('Verify image properties', () => {
        cy.visit('https://geschaeftskunden.telekom.de/mobilfunk')
        cy.get('button[id="consentAcceptAll"]').click()
        cy.get('#CM551318').find('.flickity-slider > [data-teaser-variant]').then( $handytoolbar =>{
            cy.wrap($handytoolbar).find('img').should('be.visible')
                .each(($img) =>{
                    expect($img[0].naturalWidth).to.be.greaterThan(0)
                    expect($img[0].naturalHeight).to.be.greaterThan(0) 
            })

    })

你可以在截图中看到我的cypress测试。有什么想法可以让测试工作更可靠吗？

Answer 1

关键因素是您的图像加载缓慢（因为它们的大小），并且您当前使用

expect($img[0].naturalWidth).to.be.greaterThan(0)

测试它们的方式无法重试。

您可以使用

.should()

而不是

expect()

来更改它。

另一个因素是让图像进入视野。看来该网站对图像使用了延迟加载，因此仅当用户滚动到页面上的该位置时它们才会出现。

该功能值得测试，但首先我会通过使页面在视口中变得非常大来避免滚动。

滑块上还有水平滚动，这仅意味着一次加载 6 个图像，尽管页面上放置了 12 个

<img>

元素。

因此，作为第一步，我将测试限制为前 6 张图像。

cy.viewport(2500, 5000)
cy.visit('https://geschaeftskunden.telekom.de/mobilfunk')
cy.get('button[id="consentAcceptAll"]').click()
cy.get('#CM551318')
  .find('.flickity-slider')
  .find('img')
  .each(($img, index) => {
    if (index < 6) {
      cy.wrap($img).should('have.prop', 'naturalWidth').and('be.gt', 0)
    }
  })