Cypress断言div[data-e2e-modal]消失时报错找不到元素，如何解决？

问题原因 #

你遇到的报错是Cypress的正常逻辑，not.be.visible断言的前提是目标元素已经存在于DOM树中，Cypress会先执行cy.get()查找元素，找不到元素就会直接抛出超时错误，不会执行后续的可见性断言。你已经确认模态窗是被直接移除出DOM，自然匹配不到元素触发报错。

可行解决方案 #

方案1：适配元素被移除的场景（最适配你的需求） #

直接使用not.exist断言，验证目标元素已从DOM中删除，完全符合你当前的测试逻辑：

.click({ force: true })
cy.get('div[data-e2e-modal]').should('not.exist');

方案2：如果模态窗仅隐藏、未被移除的场景 #

如果部分业务逻辑里模态窗只是加了display: none/visibility: hidden等样式、仍然保留在DOM中，才需要使用not.be.visible断言：

.click({ force: true })
// 确认元素存在于DOM中，且视觉不可见
cy.get('div[data-e2e-modal]').should('not.be.visible');

额外优化建议 #

• 不需要把断言嵌套在.then()回调中，Cypress自带命令队列自动按顺序执行，前面的点击操作完成后才会执行后续断言，直接链式编写即可，避免嵌套带来的时序问题。
• 如果模态窗有关闭动画，可以给cy.get()添加timeout参数延长等待时长，适配动画结束的延迟：

cy.get('div[data-e2e-modal]', { timeout: 15000 }).should('not.exist');

• 你尝试的第二种写法逻辑错误：模态窗已经被移除的前提下，再去模态窗内部查找Apply按钮自然无法匹配到元素，不需要在断言中二次查找按钮。

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