How to check if element exists using Cypress.io

Question

How to check if element is present or not, so that certain steps can be performed if element is present. Else certain different steps can be performed if element is not pres

Answer 1

I'll just add that if you decide to do if condition by checking the .length property of cy.find command, you need to respect the asynchronous nature of cypress.

Example: Following condition evaluates as false despite appDrawerOpener button exists

    if (cy.find("button[data-cy=appDrawerOpener]").length > 0)    //evaluates as false

But this one evaluates as true because $body variable is already resolved as you're in .then() part of the promise:

    cy.get("body").then($body => {
        if ($body.find("button[data-cy=appDrawerOpener]").length > 0) {   //evaluates as true
            cy.get("button[data-cy=appDrawerOpener]")
            .click();
        }
    });

Read more in Cypress documentation on conditional testing