Interact with Hidden Elements in a Cypress Test
We often only show UI elements as a result of some user interaction. Cypress detects visibility and by default won’t allow your test to interact with an element that isn’t visible. In this lesson, we’ll work with a button that is shown on hover and see how you can either bypass the visibility restriction or use Cypress to update the state of your application, making items visible prior to interacting with them.
Hi Andrew, thanks for these great Cypress videos.
Just a small note on the usage of .invoke('show'). To me that feels like a hack. We write an end-to-end test to simulate real user behaviour. So I would argue .trigger('mouseover') would be a better alternative.
This "show button on mouse over" is typically one of those UX patterns that are nice on paper but don't work well across mouse and touch. A good end-to-end test would expose this.
Jasper,
Thanks for the feedback. This example is using the default TodoMVC implementation in order to show how to work around this particular issue. Triggering the JS mouseover event will only work if the behavior is dependent on the JS event. In this case, it won't show the element since its behavior is based on a CSS psuedo selector. (see: https://docs.cypress.io/api/commands/hover.html?utm_source=comment_mailer&utm_medium=email&utm_campaign=notification#Trigger)
I don't disagree that this pattern may not be ideal, but the goal here was to show how to work around this particular issue when you come across it when testing in Cypress.
Thanks for the clarification! Didn't realise that part about the CSS pseudo selector not being triggered.
Hi Andrew, thanks for these great Cypress videos.
Just a small note on the usage of .invoke('show'). To me that feels like a hack. We write an end-to-end test to simulate real user behaviour. So I would argue .trigger('mouseover') would be a better alternative.
This "show button on mouse over" is typically one of those UX patterns that are nice on paper but don't work well across mouse and touch. A good end-to-end test would expose this.
I like the approach in consideration of a real life example. Mouse over was what I was thinking as well
I came to comment the same thing Jasper did. But it appears the instructor is correct. I found this page in the Cypress docs which suggests the same workarounds as the instructor does in the video.
https://docs.cypress.io/api/commands/hover#Workarounds