How to check if element is never visible in Cypress e2e testing?

Question

Is there any way to assert that an element is never visible at any point when routing within Cypress?

I have a server-rendered web app that is sometimes showing a "loading" state when it shouldn't. So when I navigate between pages, a "loading" indicator is showing for a few seconds and then disappearing.

I know that Cypress's assertions will sometimes "wait" -- in this case Cypress waits until loading indicator goes away and that makes the test think that it has passed. But I want the test to fail because the loading indicator was visible at some point.

I'm using these two assertions:

cy.get('[data-test="loading"]').should('not.exist');

cy.get('[data-test="loading"]').should('not.be.visible');

But both of them are passing because the loading indicator goes away.

I've checked through all the documentation but there doesn't seem to be some kind of method for checking that an element is never visible. Is there some method I'm missing or some hack to test this a different way?

can you add a wait of some sort of 0, so i does not wait? – Maccurt Dec 12 '18 at 15:45 — Maccurt, Dec 12 '18 at 15:45

score 14 · Accepted Answer · answered Dec 12 '18 at 16:26

14

I might be crazy, and i have not tested this yet, but I wanted to throw this out there

I assume you are testing that there should NEVER be a loading indicator and it is waiting the default 4 seconds and the indicator goes away, and thus your test pass. So below I set the wait to zero, so it does not wait. I am also confused as to why you don't fix the actual code so you don't see the indicator if you are not supposed to. Perhaps you don't have access to the code..

cy.get('[data-test="loading"]',{ timeout: 0 }).should('not.exist');

cy.get('[data-test="loading"]',{ timeout: 0 }).should('not.be.visible');

answered Dec 12 '18 at 16:26

Maccurt

12,655
7
32
43

1

Yes, that timeout worked perfectly, thank you so much! Also I do have access to the code, but I'm basically using the loading indicator temporarily as a fallback. The way it's intended to work is to render the page on the server (I'm using React / Next.js) and show a fully loaded page. – greatbearshark Dec 12 '18 at 16:34
1

This will only test that the element is not visible at *that specific moment*. You question was looking for a way "to assert that an element is never visible at any point". The element could have existed for the entire duration of the test, up until a millisecond before you called the above code, and the test would pass. – Brendan Dec 12 '18 at 16:55
1

@Brendan can you provide an alternative, I am open to it. I question if this is even a good thing to test.. I am willing to learn.. – Maccurt Dec 12 '18 at 19:01
1

@Maccurt negative testing is always tricky. Is there an XHR request that is sent when the loading state is shown? If so, you can check for that route at the end of your test. https://docs.cypress.io/api/commands/route.html#Syntax – Brendan Dec 12 '18 at 19:04

Richard Matsen · Answer 2 · 2018-12-13T19:54:32.067

Cypress has a lite version of jQuery, so we can watch for changes to the parent of the element that should not exist.

@Maccurt's tests are applied whenever a change occurs.

You want to keep watch firing to a minimum, so find the immediate (or nearest) parent of tested element.

Note this covers exists tests, but should not be necessary for visible tests if the element is present all the time but is just not visible.

In this example a button is added to body.
The first test watches for a span (which is never added so the test succeeds).
The 2nd test watches for the button and fails.

describe('watching for an element to not appear', () => {

  const watchAndTest = function(parentSelector, assert) {
    Cypress.$(parentSelector).bind('DOMNodeInserted', function(event) {
      assert()
    });
  }

  it('should succeed because "span" does not exist', () => {
    const parentSelector = 'body'
    const watchForSelector = 'span'
    watchAndTest(parentSelector, 
      () => {
        // Place your 'assert' code here
        cy.get(`${parentSelector} ${watchForSelector}`,{ timeout: 0 })
          .should('not.exist');
      }
    )

    // Place your 'act' code here
    cy.get(parentSelector).then(parent => {
      var newElement = document.createElement('button');
      parent[0].appendChild(newElement)
    })
    Cypress.$(parentSelector).unbind('DOMNodeInserted')
  })

  it('should fail because "button" exists', () => {
    const parentSelector = 'body'
    const watchForSelector = 'button'
    watchAndTest(parentSelector, 
      () => {
        // Place your 'assert' code here
        cy.get(`${parentSelector} ${watchForSelector}`,{ timeout: 0 })
          .should('not.exist');
      }
    )

    // Place your 'act' code here
    cy.get(parentSelector).then(parent => {
      var newElement = document.createElement('button');
      parent[0].appendChild(newElement)
    })
    Cypress.$(parentSelector).unbind('DOMNodeInserted')
  })

})

Thanks for posting this answer, I will take a look. – Maccurt Dec 13 '18 at 12:55 — Maccurt, Dec 13 '18 at 12:55

How to check if element is never visible in Cypress e2e testing?

2 Answers2