How to not break Cypress tests if element you'r looking for is not exist

Admin 1
Viewed 237

I have the div with classname 'okrSelectorSelect__value-container' in DOM.

<div class="okrSelectorSelect__value-container"><div>

This div is optional. I want to click on it and do some additional tests with block that appears after that IF IT EXIST. I'm trying this.

cy.get('.okrSelectorSelect__value-container').then(($higherObjectivePick) => {
 if ($higherObjectivePick.length > 0) {
  $higherObjectivePick.click();
 }
});

But got this when block is not on the page

enter image description here

Here is my solution, but looks like there is much more beautiful ways to do that.

 cy.get('body').then($body => {
    if ($body.find('.okrSelectorSelect__value-container').length > 0) { 
      cy.get('.okrSelectorSelect__value-container').click();
      cy.get('.okrSelectorSelect__option').eq(higherOrderObjectiveNumber).click();
    }
  });
cypress reactjs testing javascript
2 Answers

You could use jquery operators to check the existence of an element and wrap that function as below, adding to your support.js file:

Cypress.Commands.add("checkIfClassExists", (classToFind) => {
    return Cypress.$(classToFind).length>0
})

Then in your tests:

if (cy.checkIfClassExists('.okrSelectorSelect__value-container')) {
    //do something
} else {
    //do nothing 
}
user_2200400

I usually do the same like you but it would be more pretty to create a custom command for it like this:

Cypress.Commands.add("clickIfExists",(containerId , ItemId)=>{
  cy.get('body').then($body => {
    if ($body.find(containerId).length > 0) { 
      cy.get(ItemId).click();
    }
  }); 
})

and by this way you can always call it like that if you would like to click on .okrSelectorSelect__option :

cy.clickIfExists(".okrSelectorSelect__value-container",".okrSelectorSelect__option")
user_52032480
Related