Cypress: Using multiple selector wih OR condition-CodePudding

I have multiple login pages as:

First login page

Input element is as:

<input placeholder="[email protected]"  name="email" type="text" value="">

Cypress selector is as follows:

cy.get('input[name="email"]').as('email').click();

Second login page:

Input element is as:

<input id="email" type="email" required="required" >

Cypress selector is as follows:

cy.get('input[id="email"]').as('email').click();

If we notice, the 1st input element has name=email while the 2nd has id=email.
Is there a way to write a cypress selector where it can look for selector input[name="email"] if not found it looks for input[id="email"]?

CodePudding user response：

Yes, there is. It is called cypress conditional testing according to the docs.

There are a number of ways to get this done as seen in the docs depending on what you may want.

Below is something we can do

  cy.get('input[name="email"]').then(($btn) => {
    if ($btn.length) {
      // do something if it's active
      $btn[0].click();
    } else {
      // do something else
      cy.get('input[id="email"]').as('email').click();
    }
  })

CodePudding user response：

You can use the comma , to do an OR condition if you are using css selectors. Something like:

cy.get('input[name="email"],input[id="email"]').click()