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 is hover. Cypress does not have a hover command. If we try cy.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 a mouseover event, as in cy.get("#element").trigger("mouseover"). There are other possible workarounds in the Cypress docs, though.

Get hands-on with 1000+ tech skills courses.