我希望能够单击复选框,并测试元素不再在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类复选框子文本不应该在DOM。


当前回答

以下是对我有效的方法:

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

其他回答

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

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

.should('not.visible');

那样的话。

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

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

我会用:

cy.get (.check-box-sub-text)登陆(“not.be.visible”);

这比

cy.get (.check-box-sub-text)登陆(“not.exist”);

(元素可以出现在DOM中,但不可见display: none或不透明度:0)

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

您的应用程序可以使用动态类或变化的ID 选择器将CSS样式或JS行为从开发更改中分离出来 幸运的是,可以避免这两个问题。 不要基于CSS属性(如:id, class, tag)来定位元素 不要针对那些可能改变文本内容的元素 添加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")
  })

柏树中没有试接流

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