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


当前回答

您还可以同时使用get和contains来区分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中不存在。


不要用not。可见的断言。它会错误地通过< 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')

迁移文档:迁移到cypress -6-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")
  })

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

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

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

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

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

cy。get (' [type = "复选框“]”)。should(“not exist。”)