Conflicting information on using .should('be.visible') before .click()

[todd-m-kemp]

Hello!

Up until now my organization has been purposefully omitting checks on an element's visibility prior to clicking or otherwise interacting with that element because of Cypress' built-in check for "actionability" as described here. Having read this page, it seemed pretty clear that explicitly checking that an element .should('be.visible') was unnecessary because if the element was not visible the attempt at using .click() on it would fail with an appropriate error.

However, today I came across this blog post and my understanding was no longer clear. This post seems to suggest that as an anti-flake measure, using .should('be.visible') prior to .click() is a good idea but I am unsure why this would be since an element being visible is one of the "actionability" requirements referred to in the list above.

In short, I guess my question is which of these should we be doing?

cy.get('[data-cy=myElement]')
  .should('be.visible')
  .click()

or

cy.get('[data-cy=myElement]')
  .click()

If someone could clear up the confusion here that would be greatly appreciated as I want to make sure that my organization is taking the right steps towards creating flake-free tests.

[bahmutov]

The repo is at https://github.com/bahmutov/next-js-example-may-2020

The test as written without an explicit visibility check shows the eye icon at the moment of the cy.get command, I believe. Thus if this is the first command, it is racing against the Next framework. Sometimes cy.get finds the element visible, and sometimes not yet. Thus if you reload the tests you will see different results, as this video below demonstrates

We want to remove non-deterministic behavior, and adding cy.get('...').should('be.visible') ensures the Next app is fully rendered before proceeding to cy.click command. I really do not like the "invisible element" badge in the Command Log. Thus adding an assertion like this helps at the application load, even if the test clicks correctly afterward due to built-in visibility requirement.

I also tried upgrading Cypress to 6.4.0 to see how it handles the race condition - the same thing.

So my last word is to use an explicit cy.get(...).should('be.visible') to ensure the application has loaded and ready to interact with.

[dudeinascarf]

Curious, is it still relevant?

[IlCallo]

Yes, this is still a problem, and caused a lot of headaches