1. Overview

The Hover task registers as a distinct state in the browser, separate from a click, whenever the pointer rests on an element during test execution. The web application may respond to that state by displaying or updating content, such as a status icon revealing guidance, a submenu expanding from a navigation item, or extra details surfacing on a product thumbnail.

Note: Since the Hover task doesn't perform a click action, follow it with an appropriate <assertion>, such as Assert Visible or Assert Text, to verify that the expected UI change occurred.

2. Syntax

hover(<locator>);

Parameter	Data Type	Description
locator	STRING	Identifies the element to hover over. Note: Locators can be fetched in one of two ways, either by manually inspecting the webpage to identify the element, or by using a recorded element saved during a recording session. Learn more about Elements

3. Examples

When a user hovers over the shipping info icon on the product page, a tooltip appears explaining the delivery timelines.

// Open the Diver Chronomat product page on the ZWatch Commerce website using the Open URL task
openURL("https://zwatch.zohocommerce.com/products/diver-chronomat/3531661000000075722", "same window");
// Hover over the shipping info icon using the Hover task
hover(".theme-shipping-info-icon");
// Confirm the shipping tooltip becomes visible using the Assert Visible task
assertVisible(".theme-shipping-tooltip", errorhandling.STOP_ON_ERROR);

where:

Preview the Blue Bay GMT product by hovering over its product card to reveal the Quick View button, then wait for it to become clickable.

// Open the ZWatch Commerce home page using the Open URL task
openURL("https://zwatch.zohocommerce.com/", "same window");
// Click the link to the shop page using the Click task
click("a[href*='all-products']");
// Hover over the Blue Bay GMT product link using the Hover task
hover("a[href='/products/blue-bay-gmt/3531661000000075668']");
// Wait until the quick-view button becomes clickable
wait(5, "[data-zs-product-url='/products/blue-bay-gmt/3531661000000075668']", event.CLICKABLE);
// Confirm the quick-view button is visible using the Assert Visible task
assertVisible("[data-zs-product-url='/products/blue-bay-gmt/3531661000000075668']", errorhandling.STOP_ON_ERROR);

where:

On a Sales Insights application's Product Overview page, hovering over a product card reveals its current stock level without opening the full record.

// Open the Product Overview page in a Zoho Creator Sales Insights application using the Open URL task
openURL("https://creatorapp.zoho.com/<orgname>/sales-insights#Page:Product_Overview", "same window");
// Hover over the product card using the Hover task
hover(ui.salesinsights.product-card);
// Confirm the stock level is visible using the Assert Visible task
assertVisible(ui.salesinsights.stock-level-detail, errorhandling.STOP_ON_ERROR);

where:

4. Use cases

Shoppers browsing the shop page often hover over a product to preview it, and the quick-view overlay should let them add the item to the cart directly, without opening the full product page.

A tester uses Zoho QEngine to confirm that hovering over a product reveals its quick-view button so shoppers can add the product to the cart directly from the quick-view overlay.

1. Open the shop page in the same window.
2. Hover over the Diver Chronomat product link.
3. Click the quick-view button that appears.
4. Add the product to the cart from within the quick-view overlay.
5. Confirm the cart success message appears.

Implementation

// Step 1: Open the ZWatch Commerce home page in the same window using the Open URL task
openURL("https://zwatch.zohocommerce.com/", "same window");
// Step 2: Click the link to the shop page using the Click task
click("a[href*='all-products']");
// Step 3: Hover over the Diver Chronomat product link using the Hover task
hover("a[href='/products/diver-chronomat/3531661000000075722']");
// Step 4: Click the quick-view button that appears using the Click task
click("[data-zs-product-url='/products/diver-chronomat/3531661000000075722']");
// Step 5: Add the product to the cart from within the quick-view overlay using the Click task
click(".theme-quick-view-container .theme-product-qty-and-add-cart");
// Step 6: Confirm the cart success message appears using the Assert Visible task
assertVisible(".theme-cart-add-success-message", errorhandling.STOP_ON_ERROR);

Shoppers browsing the site expect hovering over a top-level navigation item, such as Watches, to reveal a submenu listing its categories, without needing a click to expand it.

A tester uses Zoho QEngine to confirm that hovering over the Watches navigation item reveals a submenu containing the Diver, Chronograph, and Dress category links.

1. Open the ZWatch home page in the same window.
2. Hover over the Watches navigation item.
3. Confirm the submenu becomes visible.
4. Confirm the submenu contains the Diver category link.

Implementation

// Step 1: Open the ZWatch Commerce home page in the same window using the Open URL task
openURL("https://zwatch.zohocommerce.com/", "same window");
// Step 2: Hover over the Watches navigation item using the Hover task
hover("a[href*='watches-menu']");
// Step 3: Confirm the submenu is visible using the Assert Visible task
assertVisible(".theme-nav-submenu", errorhandling.STOP_ON_ERROR);
// Step 4: Confirm the submenu contains the Diver category link using the Assert Visible task
assertVisible("a[href*='diver-category']", errorhandling.STOP_ON_ERROR);

Consider an Expense Tracker application that finance staff use to review submitted expenses. The Expense Summary report includes a chart view that plots total expenses by category. Staff hover over a chart segment to check the exact total for a category before deciding whether to investigate further.

A tester uses Zoho QEngine to confirm that hovering over a chart segment reveals the correct category total in the data popup, so staff can trust the figure shown before deciding whether a category needs a closer look.

1. Open the Expense Summary report in the Expense Tracker application.
2. Wait for the chart segment to be present.
3. Hover over the chart segment for the target expense category.
4. Confirm the data popup displays the correct total for that category.

Implementation

// Step 1: Open the Expense Summary report in a Zoho Creator Expense Tracker application using the Open URL task
openURL("https://creatorapp.zoho.com/<orgname>/expense-tracker#Report:Expense_Summary", "same window");
// Step 2: Wait until the Travel category's chart segment is present
wait(10, ui.expensetracker.travel-chart-segment, event.PRESENT);
// Step 3: Hover over the Travel category's chart segment using the Hover task
hover(ui.expensetracker.travel-chart-segment);
// Step 4: Confirm the data popup displays the correct total for the Travel category using the Assert Text task
assertText(ui.expensetracker.chart-data-popup, "$4,250", errorhandling.STOP_ON_ERROR);

5. Points to note

1. Hover positions the pointer over an element without clicking it. Use Click, Double Click, Right Click, or Hover and Click when the interaction needs a mouse button action rather than just a hover state.
2. Follow the Hover task with an appropriate assertion, such as Assert Visible or Assert Text, to verify the expected UI response.
3. A hover-revealed element may take a moment to render. Pair Hover with a Wait task before asserting on the revealed content, rather than checking for it immediately.
4. For the Hover task, target the trigger, such as a menu item, icon, card, or link, not the content it reveals. Triggers are often small and dynamically rendered, so a CSS attribute selector or recorded element holds up better than a full XPath string.

6. Related topics

1. Click
2. Hover and Click
3. Double Click

7. What's next