1

enter image description hereI 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>
  • 1
    There is no "else if" in Javascript, you need to leave out if after else. – pavelsaman Feb 27 at 6:47
  • @pavelsaman thanks for pointing it out! my problem still remains, even though the element "There are no more results" exists on the web page, it still gets the length as 0 and therefore enters the else block.. – RenukaA Feb 28 at 15:53
3
$()

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 validated 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

Reference:

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

| improve this answer | |
  • Thanks for your help! There is one part where I am still stuck: – RenukaA Feb 25 at 21:41
  • Please comment what you are stuck with , I will try to help – PDHide Feb 25 at 21:54
  • javascript const $el=Cypress.$(class="Typography__StyledTypography-sc-153d8g4-0 jhYDmS TrainingQueueListstyles__EmptyListMessage-sc-19yfim3-1 ihRiqU"); There is some syntax error in my statement and I am unable to fix it as cypress says missing { near the = after class. It shows a red mark under the = – RenukaA Feb 25 at 21:59
  • @RenukaA still it's invalid locator , read about css locator you should put a square bracket for attribute. So the valid locator would be $([class="whateveritis"]) – PDHide Feb 25 at 22:01
  • I think I know what you are referring to: so there are three spaces in the class, meaning its not actually one single class but a combination of 4 classes, and should there fore be combined with a .dot Please could you take a look at the image in my edited question, there is a red mark under the = sign..so I have written something wrong there... This is what i have written (same as the image, I am just writing it here): const $el=Cypress.$([class='Typography__StyledTypography-sc-153d8g4-0.jhYDmS.TrainingQueueListstyles__EmptyListMessage-sc-19yfim3-1.ihRiqU']); Many thanks! – RenukaA Feb 26 at 3:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.