如何在Cypress中检查DOM元素是否存在及Selenium isDisplayed代码的等效实现

• Cypress内置了自动重试的断言机制，无需手动编写轮询逻辑即可完成元素存在性判断：
• 仅校验元素是否存在于DOM节点树的写法：cy.get('目标元素选择器').should('exist')
• 规则说明：exist断言不会校验元素的可见状态，即使元素被display:none、visibility:hidden设置为隐藏，只要在DOM中匹配到对应节点就会通过断言

原Java Selenium代码的核心逻辑为：通过xpath定位目标元素，获取元素是否对用户可见的布尔值。
对应Cypress的实现可根据使用场景选择：

1. 常规测试断言场景（无需手动读取布尔结果）
   直接调用内置可见性断言即可对齐Selenium isDisplayed()的校验规则：

   // 替换locator为原Selenium使用的xpath定位值
   // 注意：原生Cypress不支持xpath选择器，使用cy.xpath需提前安装@cypress/xpath官方插件
   cy.xpath('locator').should('be.visible')
   

   该断言的校验逻辑和Selenium的isDisplayed()完全一致：会校验元素存在于DOM、拥有非零宽高、未被CSS设置为隐藏、透明度大于0。
2. 需要手动获取可见性布尔值的场景
   由于Cypress命令为异步链式执行模式，无法在命令链路外同步获取判断结果，可在then回调中读取判断值：

   let displayStatus = false
   cy.xpath('locator').then(($el) => {
     // 调用Cypress内置DOM判断方法，返回和Selenium isDisplayed逻辑等价的布尔结果
     displayStatus = Cypress.dom.isVisible($el)
     // 可基于displayStatus值执行条件分支逻辑
   })
   

常见注意事项

• 不要混淆exist和be.visible断言的适用场景：前者仅判断DOM节点存在，后者判断元素是否真实可见、可交互
• 若不想安装xpath插件，可将原Selenium中的xpath定位转换为等效CSS选择器，替换为cy.get('css选择器')即可正常使用所有断言

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