I want to be able to click on a check box and test that an element is no longer in the DOM in Cypress. Can someone suggest how you do it?
//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.')
I want to do the opposite of the test above. So when I click it again the div with the class should not be in the DOM.
you can also search a for a text which is not supposed to exist:
cy.contains('[email protected]').should('not.exist')
Here you have the result in Cypress: 0 matched elements
documentation: https://docs.cypress.io/guides/references/assertions.html#Existence
Use .should('not.exist') to assert that an element does not exist in the DOM.
Do not use not.visible assertion. It would falsely pass in < 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')
Migration Docs here: Migrating-to-Cypress-6-0
According to https://docs.cypress.io/guides/references/assertions.html#Existence
// retry until loading spinner no longer exists
cy.get('#loading').should('not.exist')
This works for the case that it is being removed. but in the case that you want it to never exist... docs.cypress.io/guides/references/assertions.html#Existence It will retry until it goes away. This doesn't really work for the title problem which is what most people will be looking for.
However if you want to test that the thing never exists in our case.
// 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`);
});
})
Here's what worked for me:
cy.get('[data-cy=parent]').should('not.have.descendants', 'img')
I check that some <div data-cy="parent"> has no images inside.
Regarding original question, you can set data-cy="something, i.e. child" attribute on inner nodes and use this assertion:
cy.get('[data-cy=parent]').should('not.have.descendants', '[data-cy=child]')
You can use get and contains together to differentiate HTML elements as well.
<button type='button'>Text 1</button>
<button type='button'>Text 2</button>
Let's say you have 2 buttons with different texts and you want to check if the first button doesn't exist then you can use;
cy.get('button').contains('Text 1').should('not.exist')
