How to check for an element that may not exist using Cypress

Question

I am writing a Cypress test to log into a website. There are username and password fields and a Submit button. Mostly logins are straightforward, but sometimes a warning dialog appears first that has to be dismissed.

I tried this:

    cy.get('#login-username').type('username');
    cy.get('#login-password').type(`password{enter}`);

    // Check for a possible warning dialog and dismiss it
    if (cy.get('.warning')) {
        cy.get('#warn-dialog-submit').click();
    }

which works fine, except that the test fails if the warning doesn't appear:

CypressError: Timed out retrying: Expected to find element: '.warning', but never found it.

Then I tried this, which fails because the warning doesn't appear fast enough, so Cypress.$ doesn't find anything:

    cy.get('#login-username').type('username');
    cy.get('#login-password').type(`password{enter}`);

    // Check for a possible warning dialog and dismiss it
    if (Cypress.$('.warning').length > 0) {
        cy.get('#warn-dialog-submit').click();
    }

What is the correct way to check for the existence of an element? I need something like cy.get that doesn't complain if the element can't be found.

Answer 1

There are various downsides to attempting to do conditional testing on DOM elements and also various workarounds in Cypress. All of this is explained in depth in the Cypress documentation in Conditional Testing.

Since there are multiple ways to do what you are trying to do, I suggest you read through the entire document and decide what is best for your application and your testing needs.