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

1

5 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

6

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

cypress all steps are async ,, so that you should make common function in commands file or page object file,,..

 export function checkIfEleExists(ele){ return new Promise((resolve,reject)=>{ /// here if ele exists or not cy.get('body').find( ele ).its('length').then(res=>{ if(res > 0){ //// do task that you want to perform cy.get(ele).select('100').wait(2000); resolve(); }else{ reject(); } }); })
}
// here check if select[aria-label="rows per page"] exists
cy.checkIfEleExists('select[aria-label="rows per page"]')
.then(e=>{ //// now do what if that element is in ,,.. })
.catch(e=>{ ////// if not exists... })

I found a solution, hope it helps!

You can use this:

cy.window().then((win) => { const identifiedElement = win.document.querySelector(element) cy.log('Object value = ' + identifiedElement) });

You can add this to your commands.js file in Cypress

Cypress.Commands.add('isElementExist', (element) => { cy.window().then((win) => { const identifiedElement = win.document.querySelector(element) cy.log('Object value = ' + identifiedElement) });
})

1

Using async/await gives a clean syntax:

const $el = await cy.find("selector")
if ($el.length > 0) { ...

More info here:

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

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