1. Overview

The Double Click task performs two rapid clicks on a web element during test execution, which the browser interprets as a single double-click event. It is used to automate interactions that are designed to respond to a double-click rather than a single click, such as opening a file or folder, or opening a detail view.

Since the task only performs the interaction, follow it with an appropriate assertion, such as Assert Visible or Assert Text, to verify that the expected UI change occurred.

2. Syntax

doubleClick(<locator>);

Parameter	Data Type	Description
locator	STRING	Identifies the element to double-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.

3. Examples

Example 1: Double-clicking a product image to open a larger preview

Wait for the Diver Chronomat product image to become clickable, then double-click it to open a closer preview.

// 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");
// Wait until the product image becomes clickable
wait(10, "img[alt='Diver Chronomat']", event.CLICKABLE);
// Double-click the product image using the Double Click task
doubleClick("img[alt='Diver Chronomat']");
// Step 4: Confirm the larger preview appears using the Assert Visible task
assertVisible(ui.zwatch.image-preview-overlay, errorhandling.STOP_ON_ERROR);

where:

Double-click a file thumbnail in a web-based file manager to open it.

// Open the file manager page using the Open URL task
openURL("https://www.<website_name>.com/<file_manager_page>", "same window");
// Double-click the file thumbnail using the Double Click task
doubleClick(ui.<file_manager_page>.<file_thumbnail>);
// Confirm the file opens using the Assert Visible task
assertVisible(ui.<file_manager_page>.<file_preview>, errorhandling.STOP_ON_ERROR);

where:

Example 3: Editing a cell inline in a Zoho Creator Spreadsheet report

This script waits for a cell in a Zoho Creator Spreadsheet report to load, then double-clicks it to activate inline editing and updates the value.

// Open the Inventory Spreadsheet report in the Inventory Manager application using the Open URL task
openURL("https://creatorapp.zoho.com/<orgname>/inventory-manager#Report:Inventory_Spreadsheet", "same window");
// Wait until the cell is present on the page
wait(10, ui.inventorymanager.quantity-cell, event.PRESENT);
// Double-click the cell to activate inline editing using the Double Click task
doubleClick(ui.inventorymanager.quantity-cell);
// Update the cell's value using the Set Value task
setValue(ui.inventorymanager.quantity-cell, "50");
// Step 5: Confirm the cell reflects the updated value using the Assert Value task
assertValue(ui.inventorymanager.quantity-cell, "50", errorhandling.STOP_ON_ERROR);

where:

4. Use cases

Scenario 1: Confirming the zoomed image preview doesn't interrupt the add-to-cart flow

Customers often want to inspect a watch's finish or dial detail closely before adding it to their cart, and the zoom preview needs to work correctly without blocking the rest of the purchase flow.

A tester uses Zoho QEngine to confirm that customers can open the zoomed product image, close it, and still successfully add the item to the cart, so the preview never gets in the way of completing a purchase.

1. Open the Diver Chronomat product page in the same window.
2. Wait for the product image to become clickable.
3. Double-click the product image to open the zoomed preview.
4. Close the preview.
5. Add the product to the cart.
6. Confirm the cart success message appears.

Implementation

// Step 1: Open the Diver Chronomat product page on the ZWatch Commerce website in the same window using the Open URL task
openURL("https://zwatch.zohocommerce.com/products/diver-chronomat/3531661000000075722", "same window");
// Step 2: Wait until the product image becomes clickable
wait(10, "img[alt='Diver Chronomat']", event.CLICKABLE);
// Step 3: Double-click the product image to open the zoomed preview using the Double Click task
doubleClick("img[alt='Diver Chronomat']");
// Step 4: Close the zoomed preview using the Click task
click(ui.zwatch.image-preview-close-button);
// Step 5: Add the product to the cart using the Click task
click(".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);

Scenario 2: Confirming a double-click expands an order's details in an order history table

Customers reviewing past orders want to see the line items purchased without navigating to a separate page, and the application supports this by letting them double-click an order row to expand it inline.

A tester uses Zoho QEngine to confirm that double-clicking an order row expands its details inline, showing the line items directly within the order history table.

1. Open the order history page in the same window.
2. Double-click the order row to expand its details.
3. Confirm the line items are visible.

Implementation

// Step 1: Open the order history page using the Open URL task
openURL("https://www.<website_name>.com/<order_history_page>", "same window");
// Step 2: Double-click the order row to expand its details using the Double Click task
doubleClick(ui.<order_history_page>.<order_row>);
// Step 3: Confirm the line items are visible using the Assert Visible task
assertVisible(ui.<order_history_page>.<line_items_panel>, errorhandling.STOP_ON_ERROR);

Scenario 3: Editing a stock quantity inline in a Spreadsheet report

Consider a retail organization that uses a Zoho Creator Inventory Manager application to track stock. Warehouse staff double-click a stock quantity cell in the Inventory Spreadsheet report to edit it inline and update the count directly, without opening the full record.

A tester uses Zoho QEngine to confirm that double-clicking a stock quantity cell activates inline editing and that the updated value is saved correctly.

1. Open the Inventory report in the Inventory Manager application.
2. Wait for the stock quantity cell to be present.
3. Double-click the stock quantity cell to activate inline editing.
4. Enter the updated stock value.
5. Confirm the cell reflects the updated value.

Implementation

// Step 1: Open the Inventory Spreadsheet report in the Inventory Manager application using the Open URL task
openURL("https://creatorapp.zoho.com/<orgname>/inventory-manager#Report:Inventory_Spreadsheet", "same window");
// Step 2: Wait until the stock quantity cell is present on the page
wait(10, ui.inventorymanager.quantity-cell, event.PRESENT);
// Step 3: Double-click the stock quantity cell to activate inline editing using the Double Click task
doubleClick(ui.inventorymanager.quantity-cell);
// Step 4: Enter the updated stock value using the Set Value task
setValue(ui.inventorymanager.quantity-cell, "50");
// Step 5: Confirm the cell reflects the updated value using the Assert Value task
assertValue(ui.inventorymanager.quantity-cell, "50", errorhandling.STOP_ON_ERROR);

5. Points to note

1. Use Double Click only when a page reserves an interaction specifically for a double-click. For a standard single-click interaction, use the Click task instead.
2. Double Click only performs the click gesture. Pair it with an assertion, such as Assert Visible or Assert Text, to confirm the expected UI change actually occurred.
3. Use an ID or CSS selector to locate the target element for the double-click when a unique identifier is available. Use XPath only if no reliable ID or CSS selector can uniquely identify the element.

6. Related topics

1. Click
2. Right Click
3. Hover and Click

7. What's next