I have multiple login pages as:
Input element is as:
<input placeholder="name@email.com" class="input" name="email" type="text" value="">
Cypress selector is as follows:
cy.get('input[name="email"]').as('email').click();
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"]?
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();
}
})
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()