【问题标题】：Cypress: Test if element does not exist赛普拉斯：测试元素是否不存在
【发布时间】：2018-08-01 14:47:30
【问题描述】：

我希望能够单击一个复选框并测试一个元素是否不再在赛普拉斯的 DOM 中。有人可以建议你怎么做吗？

//This is the Test when the check box is clicked and the element is there
cy.get('[type="checkbox"]').click();
cy.get('.check-box-sub-text').contains('Some text in this div.')

我想做与上面测试相反的事情。因此，当我再次单击它时，具有该类的 div 不应该在 DOM 中。

【问题讨论】：

我知道这与您的问题无关，但我真的很好奇。使用仅支持 Chrome 的东西的决定是什么？赛普拉斯有什么更好的地方？我一直在从事开源项目 Courgette github.com/canvaspixels/courgette 工作，想知道是什么功能吸引了所有人使用赛普拉斯。
我喜欢 cypress，因为在大多数情况下它很简单，而且很有效。我发现它只能在 Chrome 中使用，但对我来说我可以忍受。
cy.get('.check-box-sub-text').contains('Some text in this div.') 在某些情况下可能不起作用（在某些设备上）。您可以用cy.contains('.check-box-sub-text', 'Some text in this div.') 替换它，它会以同样的方式工作。
我认为您应该澄清“测试元素是否被删除”的问题。否则它会与另一个问题混淆，“测试元素是否从未存在”。技术含义和答案因情况而异。
@alexrogers 有时您不需要跨浏览器测试，而只需启动一些快速的端到端测试。这对于无法负担测试所有浏览器但几乎无法支持 e2e 的小型团队特别有用。

标签： javascript cypress

【解决方案1】：

这似乎有效，所以它告诉我我还有更多关于 .should() 的知识要学习

cy.get('.check-box-sub-text').should('not.exist');

【讨论】：

嗨！我使用几乎相同的代码：cy.get(data-e2e="create-entity-field-relation-contact-name").should('not.exists') 但它在get 上失败，然后尝试多次调用should，每次都失败......知道我做错了什么吗？提前致谢
抱歉，我刚刚看到您的评论，您的选择器是否正在处理数据属性？你能把你的html粘贴到cmets中吗？我觉得那个选择器很奇怪！
@volk 我认为cy.get('[data-e2e="create-entity-field-relation-contact-name"]').should('not.exists') 应该可以工作。
@Maccurt, @YingYang ：实际上我发现了错误，而且有点傻：应该有多余的s：.should('not.exists') -> .should('not.exist')
这适用于它被删除的情况。但是如果您希望它永远不存在... docs.cypress.io/guides/references/assertions.html#Existence 它会重试直到它消失。这实际上不适用于大多数人会寻找的标题问题。

【解决方案2】：

您还可以搜索不应该存在的文本：

cy.contains('test_invite_member@gmail.com').should('not.exist')

这里有 Cypress 中的结果：0 matched elements

文档：https://docs.cypress.io/guides/references/assertions.html#Existence

【讨论】：

这对我不起作用，contains 超时并导致测试失败CypressError: Timed out retrying: Expected to find content: 'Im not supposed to be here' but never did.
我在回答中添加了更多解释，并附有示例。删除用户test_invite_member@gmail.com 后，我正在检查电子邮件是否存在于某处。结果是0 element。您使用的是什么版本的赛普拉斯？
为更新欢呼。 npx cypress --version - Cypress package version: 3.5.0 Cypress binary version: 3.5.0
这对我有用，我实际上不确定我错过了什么。感谢您的帮助
在 Cypress 4 中对我不起作用。它似乎适用于已删除的元素，而不是根本不应该存在的元素（例如，在测试服务器端渲染时）

【解决方案3】：

赛普拉斯 6.x+ 迁移

使用.should('not.exist') 断言DOM 中不存在元素。

不要不使用not.visible 断言。它会错误地传入

// for element that was removed from the DOM
// assertions below pass in < 6.0, but properly fail in 6.0+
.should('not.be.visible')
.should('not.contain', 'Text')

迁移文档在这里：Migrating-to-Cypress-6-0

【讨论】：

我会调查一下并升级到 6
我们可以检索布尔标志，如 true 或 false
这意味着 not.exist/exist 检查 DOM 中的存在性？和可见/不可见检查 UI 中的存在
should not exist 在 cypress 8 中不起作用。如果 cypress 没有找到该元素，它将失败。相反，不可见正在工作。

【解决方案4】：

赛普拉斯 6.x+ 迁移

According to cypress docs on Existence

非常流行但有点幼稚的尝试将一直有效，直到它不起作用，然后您将不得不再次重写它......一次又一次......

// retry until loading spinner no longer exists
cy.get('#loading').should('not.exist')

这实际上不适用于大多数人会寻找的标题问题。

这适用于它被删除的情况。 but in the case that you want it to never exist... 它会重试直到消失。

但是，如果您想测试该元素在我们的案例中从不存在。

是的，哈哈。这才是你真正想要的，除非你想改天再头痛。

// Goes through all the like elements, and says this object doesn't exist ever
cy.get(`img[src]`)
  .then(($imageSection) => {
    $imageSection.map((x, i) => { expect($imageSection[x].getAttribute('src')).to.not.equal(`${Cypress.config().baseUrl}/assets/images/imageName.jpg`) });
})

【讨论】：

同意，见github.com/cypress-io/cypress/issues/7651

【解决方案5】：

cy.get('[data-e2e="create-entity-field-relation-contact-name"]').should('not.exist');

可能会导致一些错误的结果，因为一些错误消息会被隐藏。使用可能会更好

.should('not.visible');

在那种情况下。

【讨论】：

如果它不存在于 DOM 中不会。可见的工作？我会试试看。谢谢！！！！
对我来说完全相反！（should('not.exist') 修正了一个错误的should('not.be.visible')）
如果它在 dom 中不存在，那么 not.be.visible 将起作用。如果您检查 cypress 日志，您会得到类似预期的 undefined 不可见，并且断言将通过。所以在某种程度上不可见实际上覆盖不存在并且在一个断言中不可见
不要使用should('not.visible') 断言。它会错误地传入 Cypress should('not.exist')。请参阅下面的答案：stackoverflow.com/questions/48915773/…

【解决方案6】：

这对我有用：

cy.get('[data-cy=parent]').should('not.have.descendants', 'img')

我检查了一些<div data-cy="parent"> 内部没有图像。关于原始问题，您可以在内部节点上设置data-cy="something, i.e. child" 属性并使用此断言：

cy.get('[data-cy=parent]').should('not.have.descendants', '[data-cy=child]')

【讨论】：

【解决方案7】：

您也可以同时使用get 和contains 来区分HTML 元素。

<button type='button'>Text 1</button>
<button type='button'>Text 2</button>

假设您有 2 个不同文本的按钮，并且您想检查第一个按钮是否不存在然后您可以使用；

cy.get('button').contains('Text 1').should('not.exist')

【讨论】：

它适用于您的情况，但如果按钮从不存在，则“get”失败，因为 cypress 从未在 DOM 中找到按钮

【解决方案8】：

也可以在 cypress 中使用 jQuery 模式来完成：

assert(Cypress.$('.check-box-sub-text').length==0)

【讨论】：

【解决方案9】：

cypress 中没有 try-catch 流程

在 java-selenium 中，我们通常会添加 NoSuchElementException 并执行我们的案例。如果 UI 未显示某些基于角色的访问案例的元素。

【讨论】：

【解决方案10】：

你也可以使用下面的代码

expect(opportunitynametext.include("Addon")).to.be.false

或

should('be.not.be.visible')

或

should('have.attr','minlength','2')

【讨论】：

【解决方案11】：

我关闭了一个元素并检查了 should('not.exist') 但断言失败，因为它存在于 DOM 中。只是它不再可见。

在这种情况下，should('not.visible') 对我有用。我刚开始使用柏树。很多东西要学。

【讨论】：

【解决方案12】：

较新版本的 cypress 没有should()。你可以使用其他类型的断言（检查docs），使用cy.expect(...).not.to.exist

所以在你的情况下应该是以下

cy.expect('.check-box-sub-text').not.to.exist

【讨论】：