如何在懒加载场景下可靠测试图片加载？Cypress滑块测试问题

你的测试时而失败，大概率是因为图片未完全加载或者滑块组件未初始化完成就执行了断言，以下是具体优化方案：

• 等待图片加载完成再断言
  naturalWidth和naturalHeight只有在图片完全加载后才会有有效值，直接断言可能碰到图片还在加载中的情况。可以在检查可见性后，额外等待图片的complete属性为true：

  cy.wrap($handytoolbar).find('img')
    .should('be.visible')
    .should('have.prop', 'complete', true) // 确保图片加载完成
    .each(($img) => {
      expect($img[0].naturalWidth).to.be.greaterThan(0)
      expect($img[0].naturalHeight).to.be.greaterThan(0) 
    })
  

• 确保滑块组件初始化完成
  Flickity滑块需要时间完成初始化，直接查找子元素可能拿到未渲染的节点。可以先等待滑块容器处于稳定状态：

  // 先等待滑块容器可见且初始化完成
  cy.get('#CM551318 .flickity-slider').should('be.visible')
  cy.get('#CM551318').find('.flickity-slider > [data-teaser-variant]').then( $handytoolbar => {
    // 后续逻辑...
  })
  

• 处理懒加载图片
  如果滑块内的图片是懒加载模式，需要先将图片滚动到视窗内触发加载：

  cy.wrap($handytoolbar).find('img')
    .should('be.visible')
    .each(($img) => {
      cy.wrap($img).scrollIntoView() // 滚动到图片可见区域
      cy.wrap($img).should('have.prop', 'complete', true)
      expect($img[0].naturalWidth).to.be.greaterThan(0)
      expect($img[0].naturalHeight).to.be.greaterThan(0) 
    })
  

• 修正选择器的转义问题
  原代码中按钮选择器的id="consentAcceptAll"是HTML转义字符，直接用可能导致选择器匹配失败，改成正常引号：

  cy.get('button[id="consentAcceptAll"]').click()
  

优化后的完整测试代码 #

it('Verify image properties', () => {
  cy.visit('https://geschaeftskunden.telekom.de/mobilfunk')
  // 修正同意按钮选择器
  cy.get('button[id="consentAcceptAll"]').click()
  // 等待滑块容器初始化完成
  cy.get('#CM551318 .flickity-slider').should('be.visible')
  cy.get('#CM551318').find('.flickity-slider > [data-teaser-variant]').then( $handytoolbar => {
    cy.wrap($handytoolbar).find('img')
      .should('be.visible')
      .should('have.prop', 'complete', true)
      .each(($img) => {
        expect($img[0].naturalWidth).to.be.greaterThan(0)
        expect($img[0].naturalHeight).to.be.greaterThan(0) 
      })
  })
})

内容的提问来源于stack exchange，提问作者jxx