Cypress 的 be.visible 断言通过不代表元素真正可见，因其仅检查 CSS 渲染属性（display、visibility、opacity、宽高），不检测 DOM 加载延迟、条件渲染、CSS 动画、父级裁剪或像素级显示；应结合 .should('exist')、尺寸校验、CSS 属性断言或业务状态验证。
元素不可见但断言通过？大概率是用了 not.be.visible 却没考虑 DOM 未加载或条件渲染延迟——Cypress 的 .should('be.visible') 只检查当前渲染状态，不保证“该出现的时候它就出现了”。
为什么 cy.get('button').should('be.visible') 有时不报错却实际没显示？
Cypress 的可见性判断基于浏览器原生规则：元素需满足「display !== 'none'」且「visibility !== 'hidden'」且「opacity > 0」且「宽高 > 0」。但若元素还在 Vue/React 的条件渲染队列里、或被 CSS 动画遮挡（如 transform: scale(0)）、或父级 overflow: hidden 裁剪了内容，be.visible 仍可能返回 false 正值（即断言通过），因为 Cypress 不做像素级检测。
- 用
cy.get('button').then($btn => console.log($btn[0].offsetWidth, $btn[0].offsetHeight))手动验证尺寸是否为 0 - 对动画中元素，改用
.should('have.css', 'transform')配合正则断言，例如.and('match', /scale\(1\)/) - 避免在
ng-if或v-if切换后立刻断言，加.should('exist')前置确认 DOM 已挂载
not.be.visible 和 not.exist 的区别必须分清
not.be.visible 表示元素在 DOM 中存在但不可见（比如 display: none）；not.exist 表示元素根本不在 DOM 树里（比如尚未渲染或已被移除）。选错会导致误判：
- 弹窗关闭后验证按钮消失 → 用
cy.get('.close-btn').should('not.exist') - 表单提交中禁用按钮 → 用
cy.get('button[type="submit"]').should('be.disabled').and('not.be.visible')（注意：disabled 不等于 invisible，要显式加not.be.visible） - 加载骨架屏时主内容不可见 → 先
cy.get('.content').should('not.be.visible')，再cy.get('.skeleton').should('be.visible')
多层嵌套下 be.visible 容易失效的场景
当目标元素被多个 position: absolute 或 transform 父容器包裹时，Cypress 的可见性计算可能因坐标系偏移而失准。此时应跳过视觉判断，转为逻辑断言：
立即学习“前端免费学习笔记（深入）”；
- 用
.invoke('attr', 'aria-hidden')检查无障碍属性是否为"true" - 对 Modal 类组件，断言 body 上是否有
data-modal-open="true"这类状态标记 - 结合
.within()缩小作用域：例如cy.get('.modal').within(() => { cy.get('.confirm-btn').should('be.visible') })，避免外层遮罩干扰判断
图片加载完成不能只靠 be.visible
<img alt="HTML自动化测试：利用Cypress进行DOM元素可见性断言的方法" > 标签即使 display: block 也可能因 src 未加载完而空白，此时 be.visible 为 true 但用户看到的是占位符或断裂图标。必须补充自然尺寸校验：
cy.get('img[data-testid="avatar"]').should($img => { expect($img[0].naturalWidth).to.be.greaterThan(0) })- 封装成自定义命令：
Cypress.Commands.add('shouldLoadImage', { prevSubject: true }, (subject) => { cy.wrap(subject).should($img => expect($img[0].naturalWidth).to.be.greaterThan(0)) })，后续可链式调用cy.get('img').shouldLoadImage() - 慎用
have.attr('src')—— 它只检查属性值是否存在，不反映真实加载状态
真正难的不是写断言，而是判断「此刻该信 DOM 还是信业务状态」。Cypress 的重试机制会掩盖渲染时序问题，所以每次看到 be.visible 通过，都该反问一句：它是真的在那儿，还是只是还没来得及消失？
