使用Cypress，如何测试元素是否不存在？

Question

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

// This is the Test when the checkbox 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

类的

check-box-sub-text

不应该出现在 DOM 中。

Answer 1

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

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

Answer 2

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

cy.contains('[email protected]').should('not.exist')

这是 Cypress 的结果：

0 matched elements

参考：文档 - 断言、存在

Answer 3

使用

.should('not.exist')

断言 DOM 中不存在某个元素。

---

不要使用not.visible

断言。它会错误地传入 

< 6.0, but properly fail now:

// 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')

迁移文档在这里：

迁移到Cypress-6-0

Answer 4

赛普拉斯 6.x+ 迁移

根据赛普拉斯关于存在的文档

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

// retry until loading spinner no longer exists
cy.get('#loading').should('not.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`) });
})

Answer 5

cy.get('[data-e2e="create-entity-field-relation-contact-name"]').should('not.exist'); 可能会导致一些错误的结果，因为一些错误消息被隐藏。使用可能会更好

.should('not.visible'); 在这种情况下。

Answer 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]')

Answer 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')

Answer 8

您也可以使用以下代码

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

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

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

Answer 9

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

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

Answer 10

cypress 中没有 try-catch 流程

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

Answer 11

你还可以在body内部或者元素的父容器内部查询匹配的元素，然后对其长度进行一些断言：

cy.get("body").find(".check-box-sub-text").should("have.length", 0);

Answer 12

万一有人遇到这个问题，我遇到的问题是

.should('not.exist')

 和 

.should('have.length', 0)

 都不起作用 - 更糟糕的是：如果我查询的元素实际上从一开始就在那里，两个断言仍然返回 true。

在我的例子中，这导致了非常奇怪的情况，即使断言 1+2 和 3 相互矛盾，这三个断言紧接着执行，却是正确的：

cy.get('[data-cy="foobar"]').should('not.exist')
cy.get('[data-cy="foobar"]').should('have.length', 0)
cy.get('[data-cy="foobar"]').should('have.text', 'Foobar')

经过大量测试，我发现这只是一个竞争条件问题。在运行上述 3 行之前，我正在等待后端调用完成。像这样：

cy.wait('@someBackendCall')
cy.get('[data-cy="foobar"]').should('not.exist')

然而，一旦后端调用完成，Cypress 立即运行前两个断言，并且两个断言仍然为 true，因为 DOM 尚未赶上基于后端数据的重新渲染。

我对一个我知道无论如何都会存在的元素添加了显式等待，所以我的代码现在看起来像这样：

cy.wait('@someBackendCall')
cy.get('[data-cy="some-element"]').should('contain', 'I am always here after loading')
cy.get('[data-cy="foobar"]').should('not.exist')

Answer 13

除了

cy.get('.check-box-sub-text').should('not.exist'); 另一个选择是

cy.get('.check-box-sub-text').should(checkBoxSubText => {
  expect(checkBoxSubText).to.not.exist;
});

在这种情况下它并没有增加太多，但在更复杂的情况下它可能更具可读性，因为它将选择对象与断言分开。

Answer 14

对我来说这个解决方案有效：

cy.get('body').then($body => {
  if ($body.find("mat-option[aria-selected='true']").length) {
    // Do something if exist
  } else {
    // Do if not exist
  }
})

Answer 15

如果没有元素，可以使用

cy.get('[type="checkbox"]').should('not.exist')

Answer 16

您可以使用 cypress if-else 条件

cy.get('body').then(()=> {
cy.get('[type="checkbox"]').if('visible').check().else().log('there is no check box')
})

上面的代码用于如果复选框可见则单击

cy.get('body').then(()=> {
cy.get('[type="checkbox"]').if('check').log('it is already checked').else().check()
})

此代码对于已选中复选框的情况很有用