If else statement in cypress is not working-what is wrong with my code?

Question

I am starting out with cypress automation testing tool. What I am trying to accomplish:

if the page contains "there are no results" then "mark as certified" button should not exist. else if the page does not contain "there are no results" then click the select all button."mark as certified" button should exist.

here is the code that I have so far:

cy.get('body').then($body=> {
        if ($body.find('There are no results')) {
            //cy.get('.hZDZBR > .Typography__StyledTypography-sc-153d8g4-0');
            cy.get('Mark as Certified').should('not.exist');
        }
        else {
            cy.get('input[id="selectAll"]').click();
            cy.get('.hZDZBR > .Typography__StyledTypography-sc-153d8g4-0').contains('Mark as Certified');
            cy.get('.hZDZBR').click();

        }
    })

What cypress does right now is: It enters the if loop, executes it and says "mark as certified" not found. But my question is, if "there are no results" does not exist on the page, and it does not find it, then why does it even execute the if loop and go into the else loop? So it is executing the if loop as though it finds "mark as certified" but I can see that that doesnt exist on the page.

Help is appreciated thanks!

So I updated the above code to:

       cy.wait(5000);
        if ($body.find('There are no results').length>0) {
            //cy.get('.hZDZBR > .Typography__StyledTypography-sc-153d8g4-0');
            cy.wait(5000);
            cy.get('Mark as Certified').should('not.exist');
            cy.get('input[id="selectAll"]').should('not.exist');
        }
        else if($body.find('There are no results').length==0) {

            cy.get('input[id="selectAll"]').click();
            cy.get('.hZDZBR > .Typography__StyledTypography-sc-153d8g4-0').contains('Mark as Certified');
            cy.get('.hZDZBR').click();

        }
    })````
Now the control goes to else loop and does not execute: 
````cy.get('Mark as Certified').should('not.exist');
     cy.get('input[id="selectAll"]').should('not.exist');

What is wrong with my code?

Hi, I again edited my code with:

const $el=Cypress.$('.Typography__StyledTypography-sc-153d8g4-0 jhYDmS TrainingQueueListstyles__EmptyListMessage-sc-19yfim3-1 ihRiqU');
       if($el.length){
        cy.log($el.length);
        cy.get('Mark as Certified').should('not.exist');
       } else{
        cy.get('input[id="selectAll"]').click();
        cy.get('.hZDZBR > .Typography__StyledTypography-sc-153d8g4-0').contains('Mark as Certified');
        cy.get('.hZDZBR').click();
       }

"There are no results" exists on the page but cypress still enters the else loop, I fail to understand why. Also I am trying to log $el.length using cy.log($el.length) but I dont see it logging this value anywhere.

hi, this is the latest code edit I made ,but cypress shows this red mark under the = sign and says , expected "{", I am unable to understand why its expecting this here: Any ideas how I can resolve this?

javascript
const $el=Cypress.$([class='Typography__StyledTypography-sc-153d8g4-0.jhYDmS.TrainingQueueListstyles__EmptyListMessage-sc-19yfim3-1.ihRiqU']);

Answer 1

you can't use code synchronously after a cy.wait like that. You'll need to use a .then:

cy.wait(5000).then(()=>{
  // if ($body.find(...
})

Answer 2

Using conditions like this in your code is not recommended. This will cause a test case to no longer be deterministic in the worst case. I would recommend to write the two if/else cases in two different test cases and in there can clearly describe (maybe also with cypress networking) when it should come to which behaviour.

You can find more information here: https://docs.cypress.io/guides/core-concepts/conditional-testing#Client-side-rendering