Using of if-else in Cypress test - if-statement

Question

Just learning how to write conditional tests using JS in Cypress. Write sample test as per Cypress.io
Test I trying to run:
describe ('sample tests', () => {
it('conditional test', () => {
cy.visit('https://example.cypress.io/commands/actions');
if (cy.get('input[placeholder*="Email"]')) => {
cy.type('email-1#mail.com')
} else {
cy.visit('https://www.google.com/')
}
})
})
Displayed error:
Error: Webpack Compilation Error
./cypress/e2e/4-home-page/test4.cy.js
Module build failed (from C:/Users/userName/AppData/Local/Cypress/Cache/12.3.0/Cypress/resources/app/node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\userName\Desktop\Cypressinstall\cypress\e2e\4-home-page\test4.cy.js: Unexpected token (7:51)
5 | it('conditional test', () => {
6 | cy.visit('https://example.cypress.io/commands/actions');
> 7 | if (cy.get('input[placeholder*="Email"]')) => {
| ^
8 | cy.type('email-1#mail.com')
9 | } else {
10 | cy.visit('https://www.google.com/')
What I tried:
I moved "=>" in different location but Cypress display that "No tests found".
Expected behavior:
Cypress must run test without error, using condition if-else.

Answer 1

Understanding the use of "=>" is essential here and it has nothing to do with cypress.
The "=>" belongs to Javascript arrow functions
This is used to introduce shorter functions.
Now let's understand the then() method, reading this document
With the above, you should be able to understand how to use these principles correctly.
More to note:
If an element doesn't exist conditionally, we cannot use cy.get for that element (will trigger No Such Element Exception). Use
cy.get("body).then($body => {
//cy.get("body") returns the dom element which we can capture
with "then"
//Check if element exists
if($body.find("input[placeholder*=\"Email\"]").length > 0){
cy.get("input[placeholder*=\"Email\"]").type("email-1#mail.com");
}
else{
cy.visit('https://www.google.com/')
}
})
To learn more on cypress if conditions read the Cypress Documentations
Hope this helps!

Answer 2

As far as I understand you, the purpose in your given example is to verify if the element (email field) exists and if so, type there a value. In this case you'd better use conditional testing the following way and verify if the field is visible:
const emailField = 'input[placeholder*="Email"]';
cy.get('body').then(($email) => {
if ($email(emailField).is(':visible')) {
cy.type('email-1#mail.com')
}
else {
// Anything to do here
}
});
Or you can just check that element exist (if it's hidden for any reason):
const emailField = 'input[placeholder*="Email"]';
cy.get('body').then(($parent) => {
if ($parent.find(emailField).length > 0) {
cy.type('email-1#mail.com')
}
else {
// Anything to do here
}
});
Instead of cy.get('body').then... you can use any DOM element which is higher in the hierarchy than your desired element.