Need to check either selected or remove button displaying

Question

There are two buttons in a page called Remove and selected.I need to check either one of the button's should be visible , beacuse sometimes selected won't be there. Cy.get('remove button') Cy.get('selected button')

I need to check whether either of the above elements should present. There will be case sometimes only remove will be available. So when I write above code it's searching for selected button and throwing error.

Answer 1

To get either 'selected button' or (if not present) then 'remove button', you must specify the them in that order in a list

cy.get('selected button',  'remove button')

But this is not official Cypress documentation. I think it can fail too many times because of page loading delays.

Here is the official pattern Element existence

cy.get('body')
  .then(($body) => {
    if ($body.find('selected button').length) {
      cy.get('selected button').click()
    } else {
      cy.get('remove button').click()
    }
  })

Answer 2

You can do something like this. Writing the two selectors with comma denotes 'OR'. This means if removeButtonSelector is present consider that and move on, if not then go to selectedButtonSelector. For this to work, two things are necessary:

1. Make sure the page are loaded completely and all elements are loaded before this line of code is executed.
2. The other element should not exist on the DOM, otherwise everytime removeButtonSelector would be considered.

cy.get('removeButtonSelector,selectedButtonSelector').should('be.visible')