Hi I am working with cypress for UI testing. Based on user we do have additional button on the page.
Is there a way cypress can look for a button and run the commands if button is present and skip the command if button is absent thus preventing from element not found error.
<div class="btn btn-success" id="editButton">Edit</div>
Cypress code is
if (!cy.get('div[id=editButton]')) {
this.skip();
} else {
cy.get('div[id=editButton]').click();
}
And yet cypress throws element not found error.
Instead of using the cypress command you have to use a JQuery command for this. And in that you have to check the length. If its 0, then the element doesn't exist.
if (Cypress.$('div[id=editButton]').length == 0) {
this.skip()
} else {
cy.get('div[id=editButton]').click()
}
I would go with the below option.
cy.get('div[id="editButton"]')
.then (($element) => {
if($element.length) cy.get('div[id=editButton]').click()
})Perhaps use a variation of Dynamic Text test
cy.get('body').then(($body) => {
const button = $body.find('div[id=editButton]')
if (button.length) {
// yup found it
cy.get('div[id=editButton]').click()
}
// don't need this.skip()
})
Please see the caveats on that page about conditional testing. If your $body.find('div[id=editButton]') fails because the button has not appeared yet, you will need to add more assertions to the test.
Another approach is to test for different classes of user. This makes your test suite more complete
For example,
it('tests the admin user', () => {
cy.login('admin')
cy.get('div[id=editButton]').click()
...
callCommonUserTests()
})
it('tests the read-only user', () => {
cy.login('read-only')
// cy.get('div[id=editButton]').click() // edit button not available
...
callCommonUserTests()
})
Now the test suite is much simpler and less prone to timing issues.
You can consolidate code common for all users in functions or custom commands.
To use jQuery with Cypress.$ you can test the existence without failing the test
it('tests the edit button', () => {
if (Cypress.$('#editButton').length) {
cy.get('div[id=editButton]').click()
// rest of test
}
})
Or
it('tests the edit button', () => {
if (!Cypress.$('#editButton').length) {
this.skip() // exit the test here
}
cy.get('div[id=editButton]').click()
// rest of test
})
You can check if the Edit button is on the page without failing the test
cy.get('div.btn').then($buttons => {
if ($buttons.text().includes('Edit')) {
cy.get('div[id=editButton]').click()
})
})