'Run a cypress command if content is present and skip if content is not present

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.

Solution 1:^[1]

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.

Solution 2:^[2]

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
  }
})

it('tests the edit button', () => {

  if (!Cypress.$('#editButton').length) {
    this.skip()                              // exit the test here
  }

  cy.get('div[id=editButton]').click()
  // rest of test
})

Solution 3:^[3]

I would go with the below option.

cy.get('div[id="editButton"]')
  .then (($element) => {
    if($element.length) cy.get('div[id=editButton]').click()
  })

Solution 4:^[4]

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()
}

Solution 5:^[5]

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()
  })
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Seeker
Solution 3	Hien D. Nguyen
Solution 4
Solution 5	Dizzy Al

'Run a cypress command if content is present and skip if content is not present

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]