{
  "doc": {
    "id": "api/commands/hover",
    "title": "hover | Cypress Documentation",
    "description": "Cypress does not have a cy.hover() command: See common workarounds",
    "section": "api",
    "source_path": "/llm/markdown/api/commands/hover.md",
    "version": "524ff5211e60b5d53e55d6ad976d83966f66e7cd",
    "updated_at": "2026-04-30T14:20:05.396Z",
    "headings": [
      {
        "id": "api/commands/hover#hover",
        "text": "hover",
        "level": 1
      },
      {
        "id": "api/commands/hover#workarounds",
        "text": "Workarounds",
        "level": 2
      },
      {
        "id": "api/commands/hover#trigger",
        "text": "Trigger",
        "level": 3
      },
      {
        "id": "api/commands/hover#simulating-mouseover-event-to-get-popover-to-display",
        "text": "Simulating mouseover event to get popover to display",
        "level": 4
      },
      {
        "id": "api/commands/hover#invoke",
        "text": "Invoke",
        "level": 3
      },
      {
        "id": "api/commands/hover#example-of-showing-an-element-in-order-to-perform-action",
        "text": "Example of showing an element in order to perform action",
        "level": 4
      },
      {
        "id": "api/commands/hover#force-click",
        "text": "Force click",
        "level": 3
      },
      {
        "id": "api/commands/hover#example-of-clicking-on-a-hidden-element",
        "text": "Example of clicking on a hidden element",
        "level": 4
      },
      {
        "id": "api/commands/hover#example-of-checking-a-hidden-element",
        "text": "Example of checking a hidden element",
        "level": 4
      },
      {
        "id": "api/commands/hover#add-as-a-custom-command",
        "text": "Add as a custom command",
        "level": 3
      },
      {
        "id": "api/commands/hover#see-also",
        "text": "See also",
        "level": 2
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "hover"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress does not have a cy.hover() command. See "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://github.com/cypress-io/cypress/issues/10",
            "children": [
              {
                "type": "text",
                "value": "Issue #10"
              }
            ]
          },
          {
            "type": "text",
            "value": "."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "If `cy.hover()` is used, an error will display and redirect you to this page."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Workarounds"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "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."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Oftentimes you can use "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/api/commands/trigger.md",
            "children": [
              {
                "type": "text",
                "value": "`.trigger()`"
              }
            ]
          },
          {
            "type": "text",
            "value": ", "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/api/commands/invoke.md",
            "children": [
              {
                "type": "text",
                "value": "`.invoke()`"
              }
            ]
          },
          {
            "type": "text",
            "value": " or "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/api/commands/wrap.md",
            "children": [
              {
                "type": "text",
                "value": "`cy.wrap()`"
              }
            ]
          },
          {
            "type": "text",
            "value": " to show the element before you perform the action."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/references/recipes.md#Testing-the-DOM",
            "children": [
              {
                "type": "text",
                "value": "Check out our example recipe on testing hover and working with hidden elements"
              }
            ]
          },
          {
            "type": "text",
            "value": ". Also take a look at the "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://github.com/dmtrKovalenko/cypress-real-events",
            "children": [
              {
                "type": "text",
                "value": "cypress-real-events"
              }
            ]
          },
          {
            "type": "text",
            "value": " plugin that provides native events like hover and swipe in Chromium browsers."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Trigger"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "If the hover behavior depends on a JavaScript event like `mouseover`, you can trigger the event to achieve that behavior."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Using `.trigger()` will only affect events in JavaScript and will not trigger any effects in CSS."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "As a workaround, check out the "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/references/recipes.md#Fundamentals",
            "children": [
              {
                "type": "text",
                "value": "recipe leveraging Chrome remote debugging"
              }
            ]
          },
          {
            "type": "text",
            "value": " to set pseudo classes like `hover`."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Simulating `mouseover` event to get popover to display"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "cy.get('.menu-item').trigger('mouseover')cy.get('.popover').should('be.visible')"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Invoke"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Example of showing an element in order to perform action"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "cy.get('.hidden').invoke('show').click()"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Force click"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "You can also force the action to be performed on the element regardless of whether the element is visible or not."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Example of clicking on a hidden element"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "cy.get('.hidden').click({ force: true })"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Example of checking a hidden element"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "cy.get('.checkbox').check({ force: true })"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Add as a custom command"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Although Cypress does not have a built-in `cy.hover()` command, you can create your own custom command using "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/api/cypress-api/custom-commands.md",
            "children": [
              {
                "type": "text",
                "value": "`Cypress.Commands.add()`"
              }
            ]
          },
          {
            "type": "text",
            "value": "."
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "Cypress.Commands.add('hover', (...args) => {})"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Note that while `Cypress.Commands.add()` is the recommended way to define a custom `cy.hover()` command, "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/api/cypress-api/custom-commands.md#Overwrite-Existing-Commands",
            "children": [
              {
                "type": "text",
                "value": "`Cypress.Commands.overwrite()`"
              }
            ]
          },
          {
            "type": "text",
            "value": " will still work."
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "Cypress.Commands.overwrite('hover', (originalFn, ...otherArgs) => {})"
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "See also"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "We show how to use the `.trigger` command and the "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://github.com/dmtrKovalenko/cypress-real-events",
            "children": [
              {
                "type": "text",
                "value": "cypress-real-events"
              }
            ]
          },
          {
            "type": "text",
            "value": " plugin to test elements with hover states in the video "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://www.youtube.com/watch?v=TZjphtLrRT4",
            "children": [
              {
                "type": "text",
                "value": "Cypress hover example"
              }
            ]
          },
          {
            "type": "text",
            "value": ", with the source code available in the "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://github.com/bahmutov/cy-hover-example",
            "children": [
              {
                "type": "text",
                "value": "bahmutov/cy-hover-example"
              }
            ]
          },
          {
            "type": "text",
            "value": " repo."
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "/llm/markdown/api/commands/invoke.md",
                    "children": [
                      {
                        "type": "text",
                        "value": "`.invoke()`"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "/llm/markdown/api/commands/trigger.md",
                    "children": [
                      {
                        "type": "text",
                        "value": "`.trigger()`"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "/llm/markdown/api/commands/wrap.md",
                    "children": [
                      {
                        "type": "text",
                        "value": "`cy.wrap()`"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "/llm/markdown/api/cypress-api/custom-commands.md#Overwrite-Existing-Commands",
                    "children": [
                      {
                        "type": "text",
                        "value": "`Cypress.Commands.overwrite()`"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "/llm/markdown/app/references/recipes.md#Testing-the-DOM",
                    "children": [
                      {
                        "type": "text",
                        "value": "Recipe: Hover and Hidden Elements"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "blog post "
                  },
                  {
                    "type": "link",
                    "title": null,
                    "url": "https://filiphric.com/hover-in-cypress",
                    "children": [
                      {
                        "type": "text",
                        "value": "Hover in Cypress"
                      }
                    ]
                  },
                  {
                    "type": "text",
                    "value": " by Filip Hric"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "token_estimate": 475
}