CODEWITHSUNDEEP
javascripthtmltestingautomated-testscypress
Varun Sukheja
Varun Sukheja

Reputation: 6536

Cypress: Using multiple selector wih OR condition

I have multiple login pages as:

First login page

Input element is as:

<input placeholder="[email protected]" class="input" 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" class="input">

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"]?

Upvotes: 2

Views: 6337

Answers (2)

Alapan Das
Alapan Das

Reputation: 18626

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

Upvotes: 7

Awaji-mitop N. Gilbert
Awaji-mitop N. Gilbert

Reputation: 86

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

Upvotes: 4

Related Questions