Skip to main content

​
Overview

The Hover step simulates mouse hover interactions with elements on your web page. It’s useful for triggering hover effects, revealing dropdown menus, tooltips, and other hover-dependent UI behavior.

​
Form Fields

Field NameTypeRequiredDescription
LocatorstringYesCSS selector for the element to hover

​
Form Configuration

​
Locator Field

  • Text input field for entering CSS selectors
  • Supports element picker for visual selection
  • Should target the specific element you want to hover over

​
Examples

​
Hover Over Navigation Menu

  • Locator: .main-nav .dropdown-trigger

​
Hover to Show Tooltip

  • Locator: [data-testid='help-icon']

​
Hover Over Product Card

  • Locator: .product-card[data-id='123']

​
Hover to Reveal Actions

  • Locator: .file-item .actions-trigger

​
Hover Over Chart Element

  • Locator: .chart-bar[data-value='Q2']

​
Best Practices

​
Locator Selection

  • Use specific, stable CSS selectors for the target element
  • Prefer data-testid attributes for better test reliability
  • Ensure the locator uniquely identifies the hoverable element

​
Hover Timing

  • Consider elements that have hover delays or transitions
  • Account for CSS transition timing when testing hover effects
  • Some hover effects may require brief delays to fully activate

​
Testing Strategy

  • Use hover steps before actions that depend on hover states
  • Test hover effects on important interactive elements
  • Verify hover states don’t interfere with subsequent interactions

​
Common Issues

​
Element Not Hoverable

  • Verify the element exists and is visible on the page
  • Check that the element is not covered by other elements
  • Ensure the element is within the viewport

​
Hover Effects Not Triggering

  • Some elements may have hover delays built into CSS
  • Verify the correct element is being targeted for hover
  • Check if JavaScript event listeners are properly attached

​
Timing Problems

  • Hover effects may take time to appear due to CSS transitions
  • Consider adding wait conditions after hover if needed for subsequent steps
  • Some applications may have hover debouncing that requires longer hover duration

​
Mobile Considerations

  • Hover interactions don’t exist on touch devices
  • Consider alternative test strategies for mobile testing
  • Some applications simulate hover with touch interactions

​
Use Cases

  • Hover over main navigation items to reveal submenus
  • Test mega menu functionality and layout
  • Verify menu positioning and visibility

​
Interactive Elements

  • Hover over buttons to see state changes
  • Test card hover effects and overlays
  • Verify tooltip content and positioning

​
Data Visualization

  • Hover over chart elements to see data details
  • Test interactive graphs and diagrams
  • Verify hover highlighting and information display

​
Form Elements

  • Hover over form fields to see help text
  • Test input validation hover states
  • Verify interactive form element feedback
⌘I