How to check not visible **or** not exists

[lgenzelis]

Hey folks!

Is there any way I can make an assertion that will pass both in the case an element is not in the DOM and in the case it's not visible?

If I do cy.get('selector').should('not.be.visible');, the test will fail if no element is found.
If I do cy.get('selector').should('not.exist');, the test will fail if the element is found (whether it's visible or not)

Can I somehow make an assertion that accepts both cases? Like, cy.get('selector').should('not.exist.or.not.be.visible');

I saw this was asked before, in #17197 , but the accepted answer there is

the simplest would be to write .should(callback) function

I don't really know what that means. 😞 Can anyone point me in the right direction please?

[jjhelguero]

A .should(callback function allows you work with the passed in DOM element to add more assertions, custom assertions, etc. For your question, you can do the following to check if your DOM element either does not exist or is not visible. Here is a working example.

cy.get('selector').should($el => {
  const doesNotExist = $el.length == 0;
  const isNotVisible = !$el.is("visible");
  const doesNotExistOrIsNotVisible = doesNotExist || isNotVisible;

  expect(doesNotExistOrIsNotVisible, "does not exist or is not visible").to.be
    .true;
})

[lgenzelis]

Wow, this is excellent! Knowing this pattern will open the door for a lot of other similar checks. Thank you @jjhelguero !

[angel-paella]

Just small nit because I just found the answer relevant and useful, but there's a small bug: I believe you're missing the : on the :visible condition, otherwise this code will just always pass 🙏

  const isNotVisible = !$el.is(":visible");

[machineghost]

This seems like a pretty common problem: why is there not a simpler tool (than dropping into jQuery) available for solving it?

One vote for there being such a tool.

P.S. Also this approach doesn't work if the element is gone from the page completely, eg.

cy.get('h5')
   .should($el => !$el.length);

Before you even get to the guts of your assertion, the query fails (because the element isn't there):

Timed out retrying after 4000ms: Expected to find element: h5, but never found it.

Again, Cypress really needs a tool to solve this problem.