如何在拍摄Percy快照前等待图片加载完成？

我有一套Cypress测试用例，多数用Percy生成页面快照，页面中的图片均从CMS获取。目前遇到的问题是：Percy会在图片完全渲染完成前拍摄快照，导致快照里只显示图片的占位空间，看不到实际图片内容。但使用Cypress原生的cy.screenshot()时，所有图片都能正常加载完成。

正常工作的Cypress截图代码 #

it('/', function () {
  cy.visit('/')
  cy.screenshot('before')
  cy.get('img').each((img) => {
    cy.wrap(img)
    .scrollIntoView()
    .its('0.naturalWidth')
    .should('be.greaterThan', 0)
  })
  cy.screenshot('after')
})

存在问题的Percy快照代码 #

it('/', function () {
  cy.visit('/')
  cy.percySnapshot('before')
  cy.get('img').each((img) => {
    cy.wrap(img)
    .scrollIntoView()
    .its('0.naturalWidth')
    .should('be.greaterThan', 0)
  })
  cy.percySnapshot('after')
})

可行的解决方法 #

1. 强化图片加载验证逻辑

虽然用了naturalWidth检查，但Percy的快照机制和Cypress命令队列存在异步差异，可以在验证中增加渲染状态的确认，确保图片真的显示在页面上：

it('/', function () {
  cy.visit('/')
  cy.percySnapshot('before')
  
  cy.get('img').each((img) => {
    cy.wrap(img)
      .scrollIntoView()
      .should(($img) => {
        // 确认图片已加载完成
        expect($img[0].naturalWidth).to.be.greaterThan(0)
        // 针对有占位高度的图片，确认实际渲染高度大于占位值（按需调整阈值）
        expect($img[0].offsetHeight).to.be.greaterThan(30)
      })
  })
  
  // 增加短延迟，给Percy足够时间捕获最终渲染状态
  cy.wait(500)
  
  cy.percySnapshot('after')
})

2. 配置Percy快照的等待超时

Percy的percySnapshot支持waitForTimeout参数，可以延长快照前的等待时间，确保页面状态稳定：

cy.percySnapshot('after', {
  waitForTimeout: 2000 // 等待2秒后执行快照，根据实际情况调整
})

3. 确保懒加载图片被触发

如果页面使用图片懒加载，仅用scrollIntoView()可能无法完全触发所有图片加载，可以先滚动到页面底部触发懒加载，再逐个验证：

it('/', function () {
  cy.visit('/')
  cy.percySnapshot('before')
  
  // 滚动到页面底部，触发所有懒加载图片
  cy.scrollTo('bottom')
  cy.wait(1000)
  
  // 逐个确认图片加载状态
  cy.get('img').each((img) => {
    cy.wrap(img)
      .scrollIntoView({ force: true }) // 强制将图片带入视口
      .its('0.naturalWidth')
      .should('be.greaterThan', 0)
  })
  
  cy.percySnapshot('after')
})

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