Skip to main content

​
Overview

The Hover step simulates moving your mouse over an element without clicking. It’s essential for testing dropdown menus, tooltips, hover effects, and any UI that responds to mouse movement.

​
When to Use Hover

Use Hover when you need to:
  • Open dropdown menus: Hover over navigation items to reveal submenus
  • Show tooltips: Trigger help text or information popups on hover
  • Reveal hidden controls: Display action buttons or options that appear on hover
  • Test hover effects: Verify visual changes like color shifts, shadows, or overlays
  • Access nested navigation: Navigate through multi-level menus that require hovering

​
How It Works

Hover finds an element using a CSS selector and moves the mouse cursor over it, triggering all the same events a real hover would - mouseenter, mousemove, mouseover. This activates CSS :hover states and JavaScript hover event listeners. The element stays in a hovered state until another action moves the mouse away. This is perfect for testing dropdown menus and other UI that remains visible while you interact with the revealed content.

​
Using the Hover Step

When you add a Hover step, you’ll configure:

​
Finding Your Element

Use the element picker to visually select the element you want to hover over, or enter a CSS selector directly. Target the element that triggers the hover effect - like a menu item, button, or card - not the content that appears on hover.

​
Real-World Examples

​
Opening a Dropdown Menu

Step 1: Hover
  Locator: .main-nav li[data-menu='products']

Step 2: Check Visibility
  Locator: .submenu[data-parent='products']
  Assertion: Is visible

Step 3: Click
  Locator: .submenu a[href='/products/enterprise']

Step 4: Check URL
  Pattern: /products/enterprise
Why this works: Hover over a navigation item to reveal its submenu, then click a link in that submenu.

​
Showing a Tooltip

Step 1: Hover
  Locator: button[data-testid='help-icon']

Step 2: Wait for Element
  Locator: .tooltip

Step 3: Check Visibility
  Locator: .tooltip
  Assertion: Is visible

Step 4: Check Text
  Locator: .tooltip
  Expected Text: Click here to learn more about this feature
Why this works: Hover over a help icon and verify the tooltip appears with the correct text.

​
Revealing Card Actions

Step 1: Hover
  Locator: .product-card[data-id='123']

Step 2: Check Visibility
  Locator: .product-card[data-id='123'] .hover-actions
  Assertion: Is visible

Step 3: Click
  Locator: button[data-action='add-to-cart']

Step 4: Check Text
  Locator: .cart-count
  Expected Text: 1
Why this works: Hover over a product card to reveal action buttons, then click one of those buttons.

​
Testing Nested Mega Menu

Step 1: Hover
  Locator: nav .top-level-item[data-nav='solutions']

Step 2: Check Visibility
  Locator: .mega-menu
  Assertion: Is visible

Step 3: Hover
  Locator: .mega-menu .category[data-type='by-industry']

Step 4: Check Visibility
  Locator: .subcategory-list
  Assertion: Is visible

Step 5: Click
  Locator: a[href='/solutions/healthcare']
Why this works: Navigate through multi-level hover menus by hovering through each level.

​
Chart Data on Hover

Step 1: Hover
  Locator: .chart-bar[data-month='march']

Step 2: Check Visibility
  Locator: .chart-tooltip
  Assertion: Is visible

Step 3: Check Text
  Locator: .chart-tooltip .value
  Expected Text: $45,230
Why this works: Hover over a chart element to display detailed data in a tooltip.

​
Best Practices

​
Target the Trigger Element

  • Hover over the element that activates the effect, not the content that appears
  • For menus: hover over the menu item, not the dropdown itself
  • For tooltips: hover over the trigger button/icon, not the tooltip content

​
Account for Timing

  • Some hover effects have CSS delays or transitions
  • Add Wait for Element after hover if content takes time to appear
  • Consider transition durations when verifying hover effects

​
Chain Hovers for Nested Menus

  • Use multiple Hover steps to navigate through multi-level menus
  • Verify each level appears before hovering the next level
  • Remember that hovering a new element unhovers the previous one

​
Verify Hover Results

Always confirm the hover effect worked:
  • Use Check Visibility to verify revealed content appears
  • Use Check Text to verify tooltip or popup content
  • Check for CSS class changes if your app adds hover classes

​
Troubleshooting

​
Hover Effect Doesn’t Trigger

Symptom: Nothing happens when hovering the element Solution:
  • Verify the element exists and is visible when the hover happens
  • Check that CSS :hover styles or JavaScript hover listeners are properly attached
  • Ensure the element isn’t covered by another element
  • Use browser dev tools to manually hover and confirm the effect works
  • Some effects require specific timing - try adding a wait before the hover

​
Content Appears Then Disappears

Symptom: Dropdown or tooltip shows briefly then vanishes Solution:
  • The next step might be moving the mouse away (like clicking elsewhere)
  • Keep the mouse on the hovered element by ensuring your next action is within the revealed content
  • For nested menus, hover through the path without clicking away
  • Check for JavaScript that auto-hides content after a timeout

​
Element Not Hoverable

Symptom: Test fails saying it can’t hover the element Solution:
  • Verify the element is visible and in the viewport
  • Check that the element isn’t disabled or has pointer-events: none
  • Ensure the element has sufficient size to hover over
  • Add Wait for Element if the element loads dynamically

​
Wrong Element Receives Hover

Symptom: Hover triggers a different element than intended Solution:
  • Make your selector more specific to target the exact element
  • Use the element picker to generate a precise selector
  • Check if multiple elements match your selector
  • Verify you’re targeting the trigger element, not child elements

​
Hover Works Manually But Not in Tests

Symptom: Hover effects work when testing manually but fail in automation Solution:
  • Some hover effects depend on mouse speed or movement patterns
  • Check if your app requires specific hover duration
  • Look for JavaScript debouncing that might delay the effect
  • Verify CSS transitions complete before checking results

​
Mobile and Touch Devices

Important: Hover interactions don’t exist on touch devices. When testing mobile:
  • Hover effects typically trigger on tap instead
  • Some apps show hover content on long-press
  • Consider alternative test strategies for touch-only devices
  • Test that hover-dependent features remain accessible on mobile