Skip to content

Latest commit

 

History

History
67 lines (44 loc) · 1.9 KB

hover.md

File metadata and controls

67 lines (44 loc) · 1.9 KB
title
hover

{% note danger %} Cypress does not have a cy.hover() command. See {% issue 10 'Issue #10' %}. {% endnote %}

If cy.hover() is used, an error will display and redirect you to this page.

Workarounds

Sometimes an element has specific logic on hover and you do need to "hover" in Cypress. Maybe the element doesn't even display to be clickable until you hover over another element.

Oftentimes you can use {% url .trigger() trigger %}, {% url .invoke() invoke %} or {% url cy.wrap() wrap %} to show the element before you perform the action.

{% note info %} {% url 'Check out our example recipe on testing hover and working with hidden elements' recipes#Testing-the-DOM %} {% endnote %}

Trigger

If the hover behavior depends on a JavaScript event like mouseover, you can trigger the event to achieve that behavior.

{% note danger %} Using .trigger() will only affect events in JavaScript and will not trigger any effects in CSS. {% endnote %}

As a workaround, check out the {% url 'recipe leveraging Chrome remote debugging' recipes#Fundamentals %} to set pseudo classes like hover.

Simulating mouseover event to get popover to display

cy.get('.menu-item').trigger('mouseover')
cy.get('.popover').should('be.visible')

Invoke

Example of showing an element in order to perform action

cy.get('.hidden').invoke('show').click()

Force click

You can also force the action to be performed on the element regardless of whether the element is visible or not.

Example of clicking on a hidden element

cy.get('.hidden').click({ force: true })

Example of checking a hidden element

cy.get('.checkbox').check({ force: true })

See also

  • {% url .invoke() invoke %}
  • {% url .trigger() trigger %}
  • {% url cy.wrap() wrap %}
  • {% url 'Recipe: Hover and Hidden Elements' recipes#Testing-the-DOM %}