Actions in Cypress
Understand more about how Cypress actions work in this lesson.
We'll cover the following
Actions
Once we’ve identified the DOM element or elements we want to interact with, we can then send actions to those elements. Our first test used click
to interact with a DOM element on the page and send it an action. Cypress provides for essentially any action we’d want:
- Click actions:
click
,dblclick
,rightclick
- Form actions:
check
,clear
,select
,submit
,type
,uncheck
- Focus actions:
blur
,focus
- Scroll actions:
scrollIntoView
,scrollTo
- Send a generic event:
trigger
These are essentially the names of their associated actions. The ones that might not be forthcoming are type
, which places text into a text field, and clear
, which clears a text field. We use all of them by chaining onto a set of commands that yields DOM elements.
Cypress Has No Hover:
The missing action here ishover
. Cypress does not have ahover
command. If we trycy.hover()
, we will get a runtime error and a link to a page explaining why Cypress doesn’t have a hover command. In short, there isn’t a hover command because it’s near impossible to implement one in a way that would activate the CSS:hover
pseudo-selector. The recommended workaround is to trigger amouseover
event, as incy.get("#element").trigger("mouseover")
. There are other possible workarounds in the Cypress docs, though.
Get hands-on with 1400+ tech skills courses.