如何使用Cypress测试元素不存在？含复选框测试场景

嘿，我来帮你搞定这两个Cypress测试的问题！

在Cypress里测试元素不存在，最直接且可靠的方式就是使用should('not.exist')断言。不过要注意，一定要通过Cypress的链式调用去做这个断言——因为Cypress自带自动等待机制（默认4秒），它会持续检查元素状态，确保元素确实是从DOM中移除了，而不是还在加载或者等待异步操作完成。

举个基础的例子：

// 断言类名为target-element的元素不存在
cy.get('.target-element').should('not.exist')

如果你的场景是“元素原本存在，经过操作后被移除”，建议先断言元素初始存在，再执行操作，最后断言不存在，这样测试逻辑会更严谨：

// 先确认元素存在
cy.get('.target-element').should('exist')
// 执行触发元素移除的操作（比如点击按钮）
cy.get('.remove-button').click()
// 断言元素已从DOM中移除
cy.get('.target-element').should('not.exist')

针对你提到的两个测试场景，我给你写了完整的实现代码，每一步都有注释说明：

场景1：点击复选框后验证某元素已从DOM中移除 #

it('点击复选框后验证目标元素被移除', () => {
  // 访问你的目标页面，替换成实际的URL
  cy.visit('/your-target-page')

  // 可选但推荐：先确认要被移除的元素初始是存在的
  cy.get('.element-to-remove').should('exist')

  // 点击复选框——这里的选择器可以根据实际情况调整，比如用id、name属性
  cy.get('[data-testid="toggle-checkbox"]').click()
  // 如果是需要勾选状态的复选框，也可以用.check()方法：cy.get('[type="checkbox"]').check()

  // 断言目标元素已从DOM中完全移除
  cy.get('.element-to-remove').should('not.exist')
})

场景2：反向测试——再次点击复选框后，check-box-sub-text的div不存在 #

it('再次点击复选框后验证check-box-sub-text不存在', () => {
  cy.visit('/your-target-page')

  // 先完成第一次点击操作（和场景1的步骤一致）
  cy.get('[data-testid="toggle-checkbox"]').click()
  // 可以在这里加场景1的断言，确保第一次操作生效
  cy.get('.element-to-remove').should('not.exist')

  // 再次点击复选框，切换回初始状态
  cy.get('[data-testid="toggle-checkbox"]').click()

  // 断言类名为check-box-sub-text的div不存在于DOM中
  cy.get('.check-box-sub-text').should('not.exist')
})

额外注意事项 #

• 选择器尽量精准：比如用data-testid属性来定位元素，这样就算页面样式或类名变化，测试也不会轻易失效，这是Cypress推荐的最佳实践。
• 区分“隐藏”和“移除”：如果元素只是被设置为不可见（比如display: none或visibility: hidden），而没有从DOM中移除，那应该用should('not.be.visible')断言，而不是not.exist。
• 避免手动等待：除非有特殊的异步请求需要等待，否则不要用cy.wait()，依赖Cypress的自动等待机制即可，它会自动等待元素出现或消失，直到超时。

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