how to pass an assertion in if condition using cypress without halting the execution in case of assertion failure

Question

I am trying to pass an assertion to if condition and execute a logic when the condition is met and another logic when condition is failed.

Since the test is failing on failure of assertion i am not able to achieve the desired result.

I tried the following...

if(cy.get("div").length \> 0) {
  cy.log("print this")
} else {
  cy.log("print this")
}

or

if(cy.get("div").should('have.length.greaterThan', 0) {
  cy.log("print this")
} else {
  cy.log("print this")
}

Answer 1

So, certain Cypress commands (inlcuding cy.get()) contain implicit assertions - meaning that Cypress will fail a test if the implicit assertion is not met. In this case, if cy.get() fails to find an element, that fails the implicit assertion, and the test will fail.

Additionally, Cypress commands will yield objects that are of type Chainable<T>, meaning they don't yield traditional objects that can have .length appended to them.

Instead of using cy.get('div'), we get the parent element and search for the div element using JQuery functions.

cy.get('body') // get the parent of the div
  .then(($body) => { // then unwraps the Chainable<JQueryHTMLElement> Object
    if ($body.find('div').length) { // We can use JQuery commands directly on the yielded $body element
      // code if `div` has a length greater than 0
    } else {
      // code if `div` has a length of 0
    }
  });

Answer 2

To pass the assertion to if() change cy.get() to Cypress.$().

if(Cypress.$('div').length > 0) {
  cy.log("print this")
} else {
  cy.log("print that")
}

cy.get() is a wrapper around Cypress.$() that retries until timeout then fails.

Cypress.$() just returns a jQuery object which has length === 0 if it fails, but in either case the test continues.

Make sure the page has finish loading (no fetch not yet responded) before running any if() condition.

Answer 3

Use cypress-if plugin.

cy.get("div")
  .if()
  .log("if statement passed, do this")
  .else()
  .log("else statement passed, do that")

You will need this plugin because Javascript statements like if(cy.get()) do not work with Cypress commands.

That is because Cypress put's it's commands onto a queue and runs independently of the statements in the javascript.

Adding the above plugin will give you access to if() statement inside the queue, and will branch according to the result of the cy.get("div").

When cy.get("div") does not find the element, it will not have an implicit assertion, instead it will pass the result to the next command sequence.

Answer 4

If you want to check the result of a command without failing the test, add a .should() that returns undefined.

cy.get('div#does-not-exist')
  .should(() => undefined)          // stops the above failing
  .then($result => {
    if ($result.length) {
      cy.log('Found')
    } else {
      cy.log('Not found')    
    }
  })

This works because .should() modifies the implicit assertion in the cy.get().

For example, if you run cy.get('div#does-not-exist').should('not.exist') it will pass. The not in the should inverts (negates) the implicit assertion in the cy.get().

The .should(() => undefined) also changes the implicit assertion, but allows you to perform the if() check further down the chain.

Please note all of the methods mentioned so far do not allow checking of elements that are in the process of loading, i.e there is no retry built in.

To do that, you need to poll the element as shown here
How to check for an element that may not exist using Cypress

Answer 5

try to use then((), it should help

cy.get("div").then(($div) => {
  if ($div.length > 0) {
    cy.log("print this")
  } else {
    cy.log("print this")
  }
})