1. Overview

The Hover and Click task hovers the mouse pointer over an element, then performs a click, either on that same element or on a different one, in a single task call. It's commonly used to confirm scenarios such as a hover-revealed button, menu item, or link that needs to be clicked as part of the same interaction.

The Hover and Click task can be used in two ways:

1. Same-element : Hovers over an element and then clicks that same element, which is useful when the element's hover state changes how it behaves or reveals the click target.
2. Different-element : Hovers over one element and then clicks another element that becomes visible or enabled as a result of the hover, such as a menu item, quick-view button, or submenu link.

Follow the Hover and Click task with an appropriate assertion task, such as Assert Visible or Assert Text, to verify the expected result.

2. Syntax

To hover over an element and click that same element:

hoverAndClick(<locator>);

Parameter	Data Type	Description
locator	STRING	Identifies the element to hover over and then click. Note: Locators can be found by manually inspecting the webpage for the element, or by using an element already saved through a recording session. Learn more about Elements

hoverAndClick(<hover_locator>, <click_locator>);

3. Examples

Verify that hovering over and clicking the Add to Cart button adds the product to the cart.

// 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 and click the Add to Cart button using the Hover and Click task
hoverAndClick(".theme-product-qty-and-add-cart");
// Confirm the cart success message appears using the Assert Visible task
assertVisible(".theme-cart-add-success-message", errorhandling.STOP_ON_ERROR);

where:

Hovering over a product card reveals a Quick View button that can be clicked without opening the product page.

// 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 Diver Chronomat product link, then click its quick-view button, using the Hover and Click task
hoverAndClick("a[href='/products/diver-chronomat/3531661000000075722']", "[data-zs-product-url='/products/diver-chronomat/3531661000000075722']");
// Confirm the quick-view overlay is visible using the Assert Visible task
assertVisible(".theme-quick-view-container", errorhandling.STOP_ON_ERROR);

where:

On a Facility Booking application's Rooms page, hovering over a room card reveals an Edit button that can be clicked in the same action.

// Open the Rooms page in a Zoho Creator Facility Booking application using the Open URL task
openURL("https://creatorapp.zoho.com/<orgname>/facility-booking#Page:Rooms", "same window");
// Hover over the room card, then click its Edit button, using the Hover and Click task
hoverAndClick(ui.facilitybooking.room-card, ui.facilitybooking.room-edit-button);
// Confirm the room edit form is visible using the Assert Visible task
assertVisible(ui.facilitybooking.room-edit-form, errorhandling.STOP_ON_ERROR);

where:

4. Use cases

Shoppers browsing the shop page often preview a product and add it to the cart without opening the full product page, and the hover-to-reveal quick-view button needs to lead into that flow correctly.

A tester uses Zoho QEngine to confirm that hovering over a product and clicking its quick-view button opens the overlay. The test then verifies that adding the item to the cart from within the overlay works correctly.

1. Open the shop page in the same window.
2. Hover over the Diver Chronomat product link and click its quick-view button in one action.
3. Add the product to the cart from within the quick-view overlay.
4. 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, then click its quick-view button, using the Hover and Click task
hoverAndClick("a[href='/products/diver-chronomat/3531661000000075722']", "[data-zs-product-url='/products/diver-chronomat/3531661000000075722']");
// Step 4: 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 5: Confirm the cart success message appears using the Assert Visible task
assertVisible(".theme-cart-add-success-message", errorhandling.STOP_ON_ERROR);

Shoppers hovering over different products expect the quick-view overlay to open for the one they hovered over, not a different product left over from an earlier preview.

A tester uses Zoho QEngine to confirm that hovering over the Navitimer product and clicking its quick-view button in one action opens an overlay showing the Navitimer product.

1. Open the shop page in the same window.
2. Hover over the Navitimer product link and click its quick-view button in one action.
3. Confirm the quick-view overlay displays the Navitimer name.

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 Navitimer product link, then click its quick-view button, using the Hover and Click task
hoverAndClick("a[href='/products/navitimer/3531661000000075776']", "[data-zs-product-url='/products/navitimer/3531661000000075776']");
// Step 4: Confirm the quick-view overlay displays the Navitimer name using the Assert Text task
assertText(".theme-quick-view-container .theme-product-name-area", "Navitimer", errorhandling.STOP_ON_ERROR);

Consider a Zoho Creator Facility Booking application that facility staff use to manage meeting room reservations. The Facility Overview page displays a room status widget built in Page Builder. Staff hover over the widget to reveal a View Booking History link, then click it to open the room's booking history, rather than navigating there through a separate menu.

A tester uses Zoho QEngine to confirm that hovering over the room status widget and clicking the revealed link navigates to the correct booking history.

1. Open the Facility Overview page in the Facility Booking application.
2. Wait for the room status widget to be present.
3. Hover over the room status widget and click the View Booking History link.
4. Confirm the booking history report is visible.

Implementation

// Step 1: Open the Facility Overview page in a Zoho Creator Facility Booking application using the Open URL task
openURL("https://creatorapp.zoho.com/<orgname>/facility-booking#Page:Facility_Overview", "same window");
// Step 2: Wait until the room status widget is present
wait(10, ui.facilitybooking.room-status-widget, event.PRESENT);
// Step 3: Hover over the room status widget, then click the View Booking History link, using the Hover and Click task
hoverAndClick(ui.facilitybooking.room-status-widget, ui.facilitybooking.view-booking-history-link);
// Step 4: Confirm the booking history report is visible using the Assert Visible task
assertVisible(ui.facilitybooking.booking-history-report, errorhandling.STOP_ON_ERROR);

5. Points to note

1. Use the single-locator syntax when the hover and the click target the same element. Use the two-locator form when hovering one element reveals a different element to click, such as a button that only appears once its container is hovered.
2. Pair the Hover and Click task with an event-based Wait task if the target element takes a moment to become ready before the hover.
3. Follow Hover and Click with an appropriate assertion, such as Assert Visible or Assert Text, to verify the expected UI response.
4. Prefer stable locators, such as an id, name, CSS attribute selector, or recorded element, for both the hover trigger and the click target. Target the exact element that receives the hover or click, not a surrounding container.

6. Related topics

1. Hover
2. Click
3. Wait

7. What's next