Cypress中be.visible断言对未可见元素通过，如何等待加载屏结束后校验

问题根因 #

该断言误判通常由全局加载层遮挡导致：Cypress默认be.visible校验规则仅判断目标元素本身的属性（宽高非0、display不为none、visibility不为hidden），不会优先校验是否被上层固定定位元素覆盖。当目标元素DOM先渲染完成、加载层还未消失时，就会出现断言误通过的情况。

解决方案 #

方案1（优先推荐）：主动等待加载层完全消失 #

在所有可见性断言执行前，先断言加载层已不存在/不可见，从根源上规避加载阶段的误判：

// 替换选择器为你实际项目中加载屏的选择器
cy.get('[data-cy="loading-overlay"]').should('not.exist');
// 加载层消失后再执行目标元素的可见性校验
cy.get('[data-cy="cam-button"]').should('be.visible');

如果加载层是隐藏而非从DOM中移除，可将加载层的断言修改为should('not.be.visible')。

方案2：增强可见性断言的校验逻辑 #

如果不方便统一处理加载层等待，可以在目标元素的断言中增加层级遮挡校验：

cy.get('[data-cy="cam-button"]').should($el => {
  expect($el).to.be.visible;
  // 校验目标元素的层级高于加载层，未被遮挡
  expect(Number($el.css('z-index'))).to.be.greaterThan(Number(Cypress.$('[data-cy="loading-overlay"]').css('z-index')));
})

方案3：全局封装加载等待逻辑 #

如果所有测试用例都需要先等待加载层消失，可以把等待逻辑封装为Cypress自定义命令，避免重复代码：

1. 在cypress/support/commands.js中添加自定义命令：

Cypress.Commands.add('waitLoadingFinish', () => {
  // 可根据项目情况调整超时时间
  cy.get('[data-cy="loading-overlay"]', { timeout: 10000 }).should('not.exist');
})

2. 用例中直接调用即可：

cy.waitLoadingFinish();
cy.get('[data-cy="cam-button"]').should('be.visible');

相关现象 #

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