If else loop is not working/ element exists: cypress automation

Question

I am new to cypress. I read some of the other if-else cypress related questions and yet fail to understand whats wrong with my code.

What I am trying to accomplish: if "There are no results" found on the page, then "mark as certified" should not exist. If "there are no results" not found on the page, user clicks on a "select all" checkbox, "mark as certified" should exist and user should click it.

Here is the code I have:

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();
       }

Currently, even if "there are no results" is found on the page, cypress enters the else loop and tries to locate the select all checkbox. How can I correct my code? Thanks!

Hi, I edited my code again, also got rid of the red mark that cypress was showing. The way to do it was const $el=Cypress.$(['.Typography__StyledTypography-sc-153d8g4-0.jhYDmS.TrainingQueueListstyles__EmptyListMessage-sc-19yfim3-1.ihRiqU']); That being done, now when cypress does not find this $el, it just stops and still does not enter the else loop! Here is the updated code i have:

javascript
const $el=Cypress.$(['.Typography__StyledTypography-sc-153d8g4-0.jhYDmS.TrainingQueueListstyles__EmptyListMessage-sc-19yfim3-1.ihRiqU']);
       //const $el=cy.get('.hwGfvi');
       if($el.size==1){
        cy.log($el.size);
        cy.get('.hZDZBR').should('not.exist');
        cy.get('input[id="selectAll"]').should('not.exist');
       } else if($el.size==0){
        cy.get('input[id="selectAll"]').click();
        cy.get('.hZDZBR > .Typography__StyledTypography-sc-153d8g4-0').contains('Mark as Certified');
        cy.get('.hZDZBR').click();
       }
    ```
So i updated my code to:

```javascript
it("User can set certification for multiple users at once",()=>{
       cy.get(':nth-child(4) > .RadioButton__StyledRadioButton-sc-1j2qp2u-1').click(); //clicking Non-certified button
       const $el=Cypress.$('[class="Typography__StyledTypography-sc-153d8g4-0.jhYDmS.TrainingQueueListstyles__EmptyListMessage-sc-19yfim3-1.ihRiqU"]');
       cy.get("body").then($body =>{
        if ($body.find($el.length>0)) {
         cy.log('in if loop');
         cy.log($el.length);
         cy.get('.hZDZBR').should('not.exist');
         cy.get('input[id="selectAll"]').should('not.exist');
        } else {
        cy.log('in else loop');
        cy.log($el.length);
        cy.get('input[id="selectAll"]').click();
        cy.get('.hZDZBR').click();
      }
     })
    })

But when the element $el is not found (and it logs $el.length=0 which is correct), it still tries to execute the if loop, whereas it should be in else loop...any ideas on how to resolve this?Thanks!

Here is my latest corrected code since $body.find($el.length>0)) always evaluates to true:

javascript

cy.get("body").then($body =>{
        if ($body.find($el).length>0) {
         cy.log('in if loop');
         cy.log($body.find($el).length);
         cy.get('.hZDZBR').should('not.exist');
         cy.get('input[id="selectAll"]').should('not.exist');
        } else if($body.find($el).length==0){
        cy.log('in else loop');
        cy.log($body.find($el).length);
        cy.get('input[id="selectAll"]').click();
        cy.get('.hZDZBR').click();
      }
    ```
   However, what happens now is that it gets the length as 0 and therefore enters else loop, but I can see that the element exists on the web page and yet it gets the length as 0..how shall I resolve this..?!

For reference, this is the element whose existence I am testing, so the if-else depends on the length/existence of this element:

```javascript
<p class="Typographystyles__StyledTypography-oqatwk-0 hwGfvi TrainingQueueListstyles__EmptyListMessage-sc-19yfim3-1 ihRiqU">There are no more results.</p>

Answer 1

$() is equal to findelement(by.css('')). And in your case the locator is:

.Typography__StyledTypography-sc-153d8g4-0 jhYDmS TrainingQueueListstyles__EmptyListMessage-sc-19yfim3-1 ihRiqU

which means find the element with the class name as Typography....

But this is not a valid locator as it contains space after Typography__StyledTypography-sc-153d8g4-0. Instead, you could use locator as:

[class="Typography__StyledTypography-sc-153d8g4-0 jhYDmS TrainingQueueListstyles__EmptyListMessage-sc-19yfim3-1 ihRiqU"]

and also as per cypress:

cy.get() is same as $(), so even that expects a CSS locator.

So cy.get('Mark as Certified') is not valid locator.

Fix all these errors, and read more about CSS locators

And about the loop, print the $a.length and see its value

References:

• https://docs.cypress.io/api/utilities/$.html#Syntax
• https://docs.cypress.io/api/commands/get.html#Synta