Implementation:Getgauge Taiko Hover
| Knowledge Sources | |
|---|---|
| Domains | Browser_Automation, User_Interaction |
| Last Updated | 2026-02-12 03:00 GMT |
Overview
Concrete tool for simulating a mouse hover over a web page element provided by the Taiko browser automation library.
Description
The `hover` function moves the virtual mouse pointer to the center of a target element, triggering the browser's native `mouseover`, `mouseenter`, and `mousemove` events. The algorithm proceeds through four steps:
1. **Element Resolution:** Calls `waitAndGetActionableElement(selector, options.force)` to locate the target element in the DOM and wait for it to become actionable (visible, enabled, and not obscured). The `force` option can bypass these checks when needed.
2. **Scroll Into View:** Calls `scrollToElement(e)` to ensure the target element is within the visible viewport. This uses the native `scrollIntoView` method on the element.
3. **Optional Highlighting:** When running in headful mode (`defaultConfig.headful` is true), the element is visually highlighted before the hover action, providing visual feedback during test observation.
4. **Mouse Event Dispatch:** Calculates the element's bounding box center coordinates via `domHandler.boundingBoxCenter(e.get())`, which returns `{x, y}` values representing the pixel center of the element. Then dispatches a single `mouseMoved` CDP input event at those coordinates through `inputHandler.dispatchMouseEvent`. This simulates the mouse pointer arriving at the element's center, which causes the browser to fire the standard sequence of mouse hover DOM events on the element.
The action is wrapped in `doActionAwaitingNavigation(options, ...)` so that any navigation triggered by hover-activated event handlers (such as a tooltip that loads content or a menu that triggers a redirect) is properly awaited.
Usage
Use `hover` when automating interactions that depend on mouse-over behavior. Common scenarios include revealing dropdown menus that appear on hover, triggering tooltip displays, activating CSS `:hover` styles for visual testing, exposing hidden action buttons, and testing hover-dependent UI behaviors like preview popups or mega-navigation menus.
Code Reference
Source Location
- Repository: Getgauge_Taiko
- File: lib/actions/hover.js
- Lines: 1-30
Signature
async function hover(selector, options) { ... }
Import
const { hover } = require('taiko');
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| selector | Selector / Element / string | Yes | The target element to hover over. Accepts a Taiko selector, an Element wrapper, or a plain string CSS selector. |
| options | object | Yes | Configuration object. Supports `force` (boolean) to bypass actionability checks, plus navigation-awaiting options passed through to `doActionAwaitingNavigation`. |
Outputs
| Name | Type | Description |
|---|---|---|
| result | Promise<string> | A human-readable confirmation string, e.g. `"Hovered over the <element description>"`. |
Usage Examples
Basic Usage
const { openBrowser, goto, hover, text, closeBrowser } = require('taiko');
(async () => {
await openBrowser();
await goto('https://example.com/navigation');
// Hover over a menu item to reveal a dropdown
await hover('Products');
// Verify that the dropdown submenu appeared
const submenuVisible = await text('Enterprise Solutions').exists();
console.log('Submenu visible:', submenuVisible);
// Hover over an element to trigger a tooltip
await hover('#info-icon');
await closeBrowser();
})();