柏树:测试元素是否不存在

我希望能够单击复选框,并测试元素不再在Cypress的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中。

258058 次浏览

好吧,这似乎工作,所以它告诉我,我有更多的学习。应该()

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

可能会导致一些错误的结果,因为一些错误消息被隐藏了。也许用起来更好

.should('not.visible');

那样的话。

以下是对我有效的方法:

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

您也可以使用下面的代码

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

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

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

你也可以搜索一个不应该存在的文本:

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

这里你有Cypress: 0 matched elements的结果

enter image description here

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

柏树6。x +迁移

根据cypress docs on Existence

非常流行的尝试,有点天真,将工作,直到它不起作用,然后你将不得不重新编写它……一次又一次……

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

这并不能真正解决大多数人想要的标题问题。

这适用于它被删除的情况。但如果你想让它永远不存在……它将重试,直到它消失。

但是,如果您想测试元素在我们的例子中是否不存在。

是的lol。这是你真正想要的,除非你只是想再头疼一天。

// 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`) });
})

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


使用not.visible断言。它会错误地传入<6.0,但现在正常失败:

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

你也可以同时使用getcontains来区分HTML元素。

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

假设你有两个不同文本的按钮,你想检查第一个按钮是否不存在,然后你可以使用;

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

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

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

也可以在cypress中使用jQuery模式:

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

柏树中没有试接流

在java-selenium中,我们通常添加NoSuchElementException并执行case。如果UI没有显示某些基于角色的访问情况下的元素。

在我的情况下,Cypress是如此之快,简单的.should('not.be.visible')正在通过测试,之后,加载器出现和测试失败。

我成功地做到了:

cy.get('.loader__wrapper')
.should('be.visible')
cy.get('.loader__wrapper', { timeout: 10000 })
.should('not.be.visible')

当应用程序加载超过4秒时,最好将超时设置为10秒。

我会用:

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

这比

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

(元素可以出现在DOM中,但在显示:没有透明度:0中不可见)

被投票的元素是正确的,但我强烈建议不要使用反模式,这样可以省去很多麻烦。为什么?是的,因为;

  1. 您的应用程序可以使用动态类或变化的ID
  2. 您的选择器从CSS样式或JS行为的开发更改中断 幸运的是,这两个问题都是可以避免的
  3. 不要基于CSS属性来定位元素,例如:idclasstag
  4. 不要以可能改变textContent的元素为目标
  5. 添加data-*属性,使目标元素更容易

例子:

<button id="main" name="submission" role="button" data-cy="submit">Submit</button>

如果你想要更具体,想要标识多个选择器,使用.shouldchainer总是很好的。

例子:

cy.get("ul").should(($li) => {
expect($li).to.be.visible
expect($li).to.contain("[data-cy=attribute-name]")
expect($li).to.not.contain("text or another selector")
})

如果没有元素,我们可以使用简单的行:

cy.get(“[类型=“checkbox"]”)登陆(“not.exist”)

你也可以在元素体或元素的父容器内查询匹配的元素,然后对其长度做一些断言:

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

以防有人遇到这个问题,我遇到了.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')


然而,一旦后端调用finished, Cypress立即运行前两个断言,并且它们都仍然为真,因为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')