如何在Cypress中断言按钮不存在或不可点击？

嘿，我来帮你搞定Cypress里的这两个断言需求！针对你给出的那段元素存在断言代码，我给你调整成断言元素不存在的版本，再补充断言元素不可点击的实用方法~

一、断言元素不存在 #

在Cypress里断言元素不存在，分两种常见场景，对应不同的写法：

场景1：断言某个选择器对应的元素完全不在DOM中 #

直接在元素选择器后链式调用should('not.exist')即可，Cypress会自动等待直到超时（默认4秒），确认元素确实不存在：

cy.get('#nova > div > div.content > div.px-view.py-view.mx-auto > div.relative > div.card > div.relative > div.overflow-hidden.overflow-x-auto.relative > table > tbody > tr > td:nth-child(4)')
  .should('not.exist')

场景2：断言列表中没有匹配指定文本的元素 #

如果你要确保目标列（第4个td）里没有文本为Tommy的元素，有两种精准的实现方式：

方式1：用contains直接断言不存在

cy.contains('table tbody tr td:nth-child(4)', 'Tommy')
  .should('not.exist')

方式2：遍历所有元素检查文本

如果需要验证该列所有元素都不包含目标文本，可以沿用你原来的each循环，把断言改成否定形式，记得先去除文本前后空格避免干扰：

cy.get('#nova > div > div.content > div.px-view.py-view.mx-auto > div.relative > div.card > div.relative > div.overflow-hidden.overflow-x-auto.relative > table > tbody > tr > td:nth-child(4)')
  .each(($e, index, $list) => {
    const text = $e.text().trim()
    expect(text).to.not.eq('Tommy')
  })

二、断言元素不可点击 #

断言元素不可点击要分情况处理，根据元素不可点击的原因选择对应的断言：

情况1：元素本身被禁用（带disabled属性，比如按钮） #

直接用should('be.disabled')或者should('not.be.enabled')，适用于有明确禁用状态的元素：

// 假设你的td里有按钮，先定位到按钮元素
cy.get('#nova > div > div.content > div.px-view.py-view.mx-auto > div.relative > div.card > div.relative > div.overflow-hidden.overflow-x-auto.relative > table > tbody > tr > td:nth-child(4) button')
  .should('be.disabled')

情况2：元素不可交互（比如被遮挡、不在视口内） #

用Cypress内置的should('not.be.clickable')断言，它会综合检查元素是否满足可点击的所有条件（可见、启用、在视口内等）：

cy.get('#target-element')
  .should('not.be.clickable')

情况3：元素存在但不可见 #

如果元素在DOM中但不可见（比如设置了display:none），可以断言should('not.be.visible')，这种情况下元素也无法被点击：

cy.get('#target-element')
  .should('not.be.visible')

小提醒 #

• 断言元素不存在时，确保选择器足够精确，避免因为页面异步加载导致的误判，必要时可以用cy.wait()等待页面稳定后再断言。
• 断言不可点击时，优先判断元素是被禁用还是不可见，选择最贴合场景的断言方式，这样测试结果更精准。

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