Cypress中be.visible断言失败：fixed元素被遮挡问题求助

问题详情 #

执行以下Cypress断言代码时出现超时错误：

cy.get('[data-cy="myElement"] > path')
.should('be.visible')

错误信息：

Timed out retrying after 12000ms: expected '' to be 'visible'

This element is not visible because it has CSS property: position: fixed and it's being covered by another element:

<svg class="coveringElement" focusable="false" 
 aria-hidden="true" viewBox="0 0 24 24" name="large">...</svg>

相关备注：

• 实际使用应用时该元素可见，无遮挡
• 元素位于对话框内
• 使用exists断言可通过
• 尝试用.invoke隐藏遮挡元素无效

解决方案 #

1. 降低可见性检查的严格度 #

Cypress默认的可见性校验较为严格，可在断言时添加strict: false选项，或全局配置关闭严格模式：

单断言配置：

cy.get('[data-cy="myElement"] > path')
.should('be.visible', { timeout: 15000, strict: false })

全局配置（cypress.config.js）：

module.exports = defineConfig({
  e2e: {
    defaultCommandTimeout: 15000,
    strictVisibility: false, // 全局关闭严格可见性检查
    viewportWidth: 1280,
    viewportHeight: 720,
  },
})

2. 手动校验可见性相关CSS属性 #

绕过Cypress的默认断言，直接检查元素的核心可见性属性及视口位置：

cy.get('[data-cy="myElement"] > path')
  .should(el => {
    const $el = Cypress.$(el)
    // 检查元素自身可见性属性
    expect($el.css('display')).to.not.equal('none')
    expect($el.css('visibility')).to.equal('visible')
    expect($el.css('opacity')).to.be.greaterThan(0)
    // 确认元素在视口范围内
    const rect = $el[0].getBoundingClientRect()
    expect(rect.top).to.be.lessThan(Cypress.config('viewportHeight'))
    expect(rect.bottom).to.be.greaterThan(0)
    expect(rect.left).to.be.lessThan(Cypress.config('viewportWidth'))
    expect(rect.right).to.be.greaterThan(0)
  })

3. 等待遮挡元素完全消失 #

测试中可能存在遮挡元素未及时隐藏的情况，先等待其不可见再断言目标元素：

// 等待遮挡元素消失
cy.get('.coveringElement').should('not.be.visible')
// 断言目标元素可见
cy.get('[data-cy="myElement"] > path').should('be.visible')

4. 利用原生DOM的可见性检查API #

如果浏览器支持，使用原生checkVisibility方法验证：

cy.get('[data-cy="myElement"] > path')
  .then(el => el.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true }))
  .should('be.true')

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