I need some clarification on the usage of Cypress. I'm writing some e2e tests and one of them failed, because the element is not visible.

I found this

CodePudding user response：

I think adding the data-cy attribute to the a tag would be a good option, so that you get the element as visible and click it. What I understood from the cypress best practices page, the data-cy or data-test or data-testid should be added to the target element, which in your case is the a tag.

I would suggest you to not use click({force: true}) until absolutely required because it forces the action and disables waiting for actionability.

By actionability, cypress means commands that simulate a user interacting with your application. Under the hood, Cypress fires the events a browser would fire thus causing your application's event bindings to fire.

So in case, a real user is not able to see or interact with a button for some reason, then the test should fail, but with force:true, the test will pass because it bypasses the actionability checks and forcefully clicks the button. You can read more about Actionability and Forcing from the docs.

Or in case you don't want to use any tags, one good way would be to use the combination of a selector and inner text value to find the element and click it, something like:

cy.contains('a', 'dApp-Info').click()

CodePudding user response：

Actions

If clicking the link is just a way to take action (i.e get to another page) using {force:true} is pragmatic.

Regressions

On the other hand, if you want to test for regressions in the menu system itself forcing might be the wrong thing to do.

Events bubble from one element to another, so it might not be necessary to click the <a> directly.

Try clicking up the parent element chain until you find the wrapper that's both visible and clickable.

Framework libraries

Using a mainstream library like Material UI, it's not necessary to test functionality that is provided by that library.

You can trust that the library builders have already tested it.

So a test like "Does this menu open?" is probably wasting your time (although configuration of the library isn't).