Can I prevent Cypress cy.get from failing if no elements are found?

Question

I am using Cypress cy.get to grab elements, but if there are none, my test is failing. I do not want it to fail. I want it to continue. The test is simply to list the items that are there, if any.

const listItemTitle = '[data-cy-component=list-item-title]';
cy.get(listItemTitle).each(($el, index, $list) => {
  cy.wrap($el).then(($span) => {
    const spanText = $span.text();
    cy.log(`index: ` + index + ' ' + spanText);
  });
});

I would have thought, if there are no elements there - that this code would still be ok, but not so. When I run it, I get this error: CypressError: Timed out retrying: Expected to find element: '[data-cy-component=list-item-title]', but never found it.

It works fine where elements are present. If no elements are found, I want to go on & do a different test.

Here is an experiment I tried:

let count: number = Cypress.$(listItemTitle).length;
cy.log('before:' + count);
cy.get(actionsBarActionsAdd).click();
cy.get(singlePickerSearch).type('Assets' + '{enter}');
cy.get(listItemCheckboxTitle)
  .first()
  .click();
cy.toast({
  type: 'Success',
});
count = Cypress.$(listItemTitle).length;
cy.log('after:' + count);
cy.get(listItemTitle).each(($li, index, $lis) => {
  cy.log('interface no. ' + (index + 1) + ' of ' + $lis.length);
  cy.wrap($li).click();
});

This was the outcome:

18 LOG        before:0
19 GET       [data-cy-component-key="actions-add"] input
20 CLICK
21 GET       [data-cy-component=single-picker-search] input
22 TYPE      Assets{enter}
23 GET       [data-cy-component="list-item-checkbox-title"]
24 FIRST
25 CLICK
26 GET       .iziToast    toast2
27 ASSERT    expected [ <div.iziToast.iziToast-opening.fadeInUp.iziToast-theme- 
alloy.iziToast-color-green.iziToast-animateInside>, 1 more... ] to have class iziToast-color-green
28 LOG       after:0
29 GET       [data-cy-component=list-item-title]
30 LOG       interface no. 1 of 1

Conclusively shows that Cypress.$(listItemTitle).length does not count number of elements with selector: listItemTitle.

Update:

By putting a cy.wait(1000); after the Add had been executed (in my experiment) - giving the DOM time to update - the new element was found. With more specific selectors, the wait is not required

Answer 1

You can use jquery via Cypress.$ to check if any exist.

const listItemTitle = '[data-cy-component=list-item-title]';
if (Cypress.$(listItemTitle).length > 0) {
  cy.get(listItemTitle).each(($el, index, $list) => {
    cy.wrap($el).then(($span) => {
    const spanText = $span.text();
    cy.log(`index: ` + index + ' ' + spanText);
    });
  });
}

Answer 2

Update for Cypress 12

The ideal way to do this is with Gleb Bahmutov's cypress-if, but it's blocked at the moment due to changes in version 12 of Cypress.

The issue is being worked on, but in the meantime here is a hack on .should() that performs the check with retry, but does not fail when no elements turn up - based on @M.Justin's method.

let start = Date.now()

const commandRetry = ($subject, {assert, timeout}) => {
  const elapsed = Date.now() - start
  console.log(elapsed, assert($subject))
  if (elapsed < timeout && !assert($subject)) {
    const err = new Error('Retry')
    err.isDefaultAssertionErr = true
    throw err
  }
}

cy.get('li')
  .should($subject => commandRetry($subject, { 
    assert: ($subject) => $subject.length > 0, 
    timeout: 3000 
  }))
  .should("have.length.gte", 0)
  .then($subject => cy.log(`Found ${$subject.length} items`))

Below is the web page I used to test it. It initially has no <li> elements, and after two seconds adds one.

You can see the test retrying the assertion in the console, and passing after 2 seconds.

If you comment out the script on the page, so no <li> are added, you see the test run for 4 seconds but does not fail.

If both cases the correct element count is logged.

<ul></ul>
<script>
  setTimeout(() => {
    const ul = document.querySelector('ul')
    const li = document.createElement('li')
    li.innerText = 'A list item'
    ul.appendChild(li)
  }, 2000)
</script>

Answer 3

You can use cy.get(".field").should("have.length", 0)

Answer 4

The following retrieves the items, even if there are none:

cy.get(listItemTitle).should("have.length.gte", 0)

Note that this won't wait for the items to exist if the page is still loading them, and therefore might return before the elements are present. It should be safe to use when you know those items will have already been loaded.

This pattern can easily lead to problematic tests, so be careful about when and how it's used.

Answer 5

I have a similar case: I want the test to succeed if there is no element found, but if there are elements, I need that elements to be further tested with should. I came across this question, and based on the answer of M. Justin, I came up with the following:

        cy.get('td:eq(0) i').should("have.length.gte", 0).then (($hits) => {
            cy.log ('number of hits: ' + $hits.length)
            if ($hits.length == 0) {
                cy.log ('no hits OK');
                cy.wrap (true);
            }
            else {
                cy.log ('hits. test hits....');
                // this is only an example
                cy.wrap($hits).should('have.css',
                            'color').and('equal', 'rgb(170, 181, 0)');
            
            }
        });

Answer 6

We can use this solution for finding optional elements in the DOM.

I added this as a constant function.

`export const optionalFindingElement = (element: string) => {
  return Cypress.$(element).length;
};
`

and then use it like this:

`Given('There are not assets generated by cypress in the kanban', () => {
  const assetNumber = optionalFindingElement('[data-fx-name="assetName"]');
  if (assetNumber > 0) {
   // Do something if the element was found
  } else {
 // Do something if the element was not found
}
});

`

Cheers!