Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to check if element exists using Cypress.io

How to check if element is present or not, so that certain steps can be performed if element is present. Else certain different steps can be performed if element is not present.

I tried something like below but it didn't work:

Cypress.Commands.add('deleteSometheingFunction', () => {   cy.get('body').then($body => {     if ($body.find(selectors.ruleCard).length) {       let count = 0;       cy.get(selectors.ruleCard)         .each(() => count++)         .then(() => {           while (count-- > 0) {             cy.get('body')             // ...             // ...           }         });     }   });   }); 

I am looking for a simple solution, which can be incorporated with simple javascript if else block or then() section of the promise

Something similar to Webdriver protocol's below implementions:

  1. driver.findElements(By.yourLocator).size() > 0
  2. check for presenece of element in wait

Kindly advise. Thanks

like image 391
user2451016 Avatar asked May 15 '19 09:05

user2451016


People also ask

How do you assert that an element is not present in Cypress?

Use . should('not. exist') to assert that an element does not exist in the DOM.

How do you verify text in Cypress?

Cypress can validate the text on an element with the help of jQuery text() method. This method shall help us to fetch the text content on the selected element. We can also put assertions on the text content of the element. cy.


2 Answers

I'll just add that if you decide to do if condition by checking the .length property of cy.find command, you need to respect the asynchronous nature of cypress.

Example: Following condition evaluates as false despite appDrawerOpener button exists

    if (cy.find("button[data-cy=appDrawerOpener]").length > 0)    //evaluates as false 

But this one evaluates as true because $body variable is already resolved as you're in .then() part of the promise:

    cy.get("body").then($body => {         if ($body.find("button[data-cy=appDrawerOpener]").length > 0) {                //evaluates as true         }     }); 

Read more in Cypress documentation on conditional testing

like image 130
DurkoMatko Avatar answered Sep 21 '22 09:09

DurkoMatko


it has been questioned before: Conditional statement in cypress

Thus you can basically try this:

cy.get('header').then(($a) => {          if ($a.text().includes('Account')) {             cy.contains('Account')             .click({force:true})         } else if ($a.text().includes('Sign')) {              cy.contains('Sign In')             .click({force:true})           } else {             cy.get('.navUser-item--account .navUser-action').click({force:true})         }     }) 
like image 21
Mr. J. Avatar answered Sep 19 '22 09:09

Mr. J.