Agfdhyk

I'm trying to start automated testing with Cypress. But apparently learning a new concept AND a new language is challenging... So I'm not sure if I found the best solution for simply testing the presence of UI elements depending on conditions.

All elements are rendered server-side.

So basically there is a DIV element which can contain either

• a DIV element of class 'card'

OR

• a P element of class 'no-ops'

In order to test this conditionally I figured out this code:

cy.get('div#section_paused_op').then(($div) => {

    if($div.find('div.card').length > 0) {

        cy.get('div#section_paused_op div.card').should('exist')

    } else {

        cy.get('div#section_paused_op p.no-ops').should('exist')

    }

})

So to test the existence of the DIV element of class 'card' in one case, first I have to find it with find(). Is this good practice or can this be done in a better way?

As you mentioned best practices, I'm going to answer with that, and not a code suggestion:

I would say your testing should be based on triggering those conditions, and knowing for sure what state something is meant to be in during that test.

What makes the DIV with class "card" show up? Have a test that triggers that condition, then asserts that the element is there.

What makes the P with class "no-ops" show up? Have a test that triggers that condition, then asserts that the element is there.

Just because something is there on the page doesn't mean it should be.