Is it possible to keep executing test if element wasn't found with Cypress

Question

I have a case when I need to wait for element (advertising), if it's visible then needs to click it, but if element wasn't found after timeout then needs to keep executing a test.

How to handle the situation with Cypress ?

Answer 1

The way Cypress says to check for a conditional element is Element existence

cy.get('body').then(($body) => {
  const modal = $body.find('modal')
  if (modal.length) {
    modal.click()
  }
})

Most likely you put that at the top of the test, and it runs too soon (there's no retry timeoout).

You can add a wait say 30 seconds, but the test is delayed every time.

Better to call recursively

const clickModal = (selector, attempt = 0) => {

  if (attempt === 100) return  // whole 30 seconds is up

  cy.get('body').then(($body) => {
    const modal = $body.find('modal')
    if (!modal.length) {
      cy.wait(300)  // wait in small chunks
      clickModal(selector, ++attempt)
    }
  })
  return             // done, exit
}

cy.get('body')
  .then($body => clickModal('modal'))

---

Intercept the advert

Best is if you can find the url for the advert in network tab, use cy.intercept() to catch it and stub it out to stop the modal displaying.

Answer 2

I tried the above solution, but seems that in some cases parameter $body could not contain necessary element, cause it was not loaded when we invoked cy.get('body'). So, I found another solution, using jQuery via Cypress, here is it:

let counter = 0;
const timeOut: number = Cypress.config('defaultCommandTimeout');
  
  const sleep = (milliseconds) => {
    const date = Date.now();
    let currentDate = null;
    do {
      currentDate = Date.now();
    } while (currentDate - date < milliseconds);
  };

  while (true) {
    if (Cypress.$(element).length > 0 && Cypress.$(element).is(':visible')) {
      Cypress.$(element).click();
      break;
    } else {
      sleep(500);
      counter = counter + 500;
        if (counter >= timeOut) {
          cy.log(elementName+ ' was not found after timeout');
          break;
        }
    }
  }