How I can Execute next command if current command element is not found in cypress?

Question

Here is below code I want to search "select-dropdown" if its visible than execute if block , if not found than instead of returning error that "select-dropdown" not found, it should execute else block and should click on button.

but it still return error that "select-dropdown" never found instead of clicking on button in else block . how I can acheive my desire behavior to check if "select-dropdown" found then execute if block code, otherwise execute else block code instead of returning not found error.

I tried try catch but facing same issue.

  cy.get("body").then($body=>{
   if($body.has("select-dropdown")){
    cy.get("select-dropdown).trigger("mousehover")
    }
   else{
      cy.get("#Btn2").click()
       }
  })

Cypress is not built to easily support non-deterministic tests. All your tests should have a predictable set of steps in them and your app should behave the same every time the test is run. If your app doesn't behave the same every time, then you need to evaluate your approach to make it so it behaves the same every time. Generally, when you start writing tests that need to make choices (if/then) your going down a bad path of writing flaky tests. — DJSDev, Dec 30 '22 at 03:11

score 2 · Answer 1 · answered Dec 29 '22 at 20:44

You make things much harder than necessary for yourself. Just use the Cypress built-in jquery like this:

const itExists = Cypress.$("select-dropdown").length

if (itExists) {
  cy.get("select-dropdown").trigger("mousehover")
} else {
  cy.get("#Btn2").click()
}

Be careful about the loading of the page. The reason you want if-else means that element is sometimes present, but sometimes not. But any code that does needs it should check for a period of time, and that is exactly not happening.

score 0 · Answer 2 · answered Dec 29 '22 at 11:20

0

I don't know if it fully covers your question, but have you tried the 'end' command? https://docs.cypress.io/api/commands/end#Syntax

I'm still new to Cypress (as well?), so there might be better ways (or more correct ways).

Would assume it is placed after: cy.get("select-dropdown).trigger("mousehover")

answered Dec 29 '22 at 11:20

UserName1338

1
1

You should summarise the information from the link. The link should only be for supporting the answer not the answer itself. – moken Dec 29 '22 at 12:00
I don't think this will solve OP's problem, as they don't want to end a specific command chain, but rather correctly implement an `if/else` statement. – agoff Dec 29 '22 at 14:39

score -1 · Accepted Answer · answered Dec 29 '22 at 14:43

JQuery's .has() function does not return true or false, but rather a new JQuery object. I believe that even if an element is not found, because that object with a length of 0 is returned, your if/else always evaluates to true, as the object is considered Truthy. Instead, you can check for the length of that object to determine if it was successfully found. (If an object is not found, then the length will be 0, which is a Falsy value.)

cy.get("body").then(($body) => {
    if($body.has("select-dropdown").length) {
        cy.get("select-dropdown").trigger("mousehover")
    } else{
        cy.get("#Btn2").click()
    }
})

It is a little obscured in the JQuery example docs, but they use the same strategy. (Note: slightly different formatting from JQuery)

( $( "ul" ).has( "li" ).length ? "Yes" : "No" )

How I can Execute next command if current command element is not found in cypress?

3 Answers3