Implementation:Getgauge Taiko DragAndDrop
| Knowledge Sources | |
|---|---|
| Domains | Browser_Automation, User_Interaction |
| Last Updated | 2026-02-12 03:00 GMT |
Overview
Concrete tool for performing drag-and-drop operations on web page elements provided by the Taiko browser automation library.
Description
The `dragAndDrop` function moves a source element to a destination target using one of two distinct drag strategies selected at runtime. When the source element has the HTML5 `draggable` attribute set, the function uses the HTML5 Drag and Drop API by synthesizing a sequence of custom DOM events: `dragstart` is dispatched on the source element, followed by `drop` and `dragover` on the target element, and finally `dragend` back on the source. A shared `DataTransfer` object is threaded through all four events to faithfully simulate browser-native drag behavior. This path also traverses shadow DOM boundaries by iterating through `shadowRoot.elementFromPoint` calls until the deepest element is resolved at both source and destination coordinates.
When the source element is not natively draggable, the function falls back to low-level Chrome DevTools Protocol (CDP) mouse input events. It dispatches `mouseMoved` at the source position, `mousePressed` to initiate the drag, calls `mouse_move` to interpolate movement from source to destination, and finishes with `mouseReleased` at the destination coordinates. This approach works with custom JavaScript drag implementations that listen for mouse events rather than HTML5 drag events.
Before either strategy executes, the function validates that both source and destination elements are visible (throwing an error for hidden elements), scrolls the source into view, and optionally highlights both elements in headful mode. The destination can be specified as a selector, an element reference, or a raw `{x, y}` coordinate offset object, with the offset being resolved relative to the source element's bounding box via `calculateNewCenter`.
Usage
Use `dragAndDrop` when automating any scenario that requires moving an element from one location to another on a web page. Common use cases include reordering items in a sortable list, moving cards between Kanban board columns, dragging files into upload drop zones, rearranging dashboard widgets, and any custom drag interaction built with either the HTML5 Drag and Drop API or mouse-event-based libraries.
Code Reference
Source Location
- Repository: Getgauge_Taiko
- File: lib/actions/dragAndDrop.js
- Lines: 1-180
Signature
const dragAndDrop = async (source, destination, options) => { ... }
Import
const { dragAndDrop } = require('taiko');
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| source | Selector / Element / string | Yes | The element to drag. Can be a Taiko selector, an Element wrapper, or a string CSS selector. Must reference a visible element. |
| destination | Selector / Element / string / {x, y} | Yes | The drop target. Accepts a selector, Element wrapper, or string to identify a target element. Alternatively accepts an `{x, y}` coordinate offset object interpreted relative to the source element's bounding box. |
| options | object | Yes | Configuration object. Supports `force` (boolean) to bypass actionability checks, plus all navigation-awaiting and click options inherited from `setClickOptions`. |
Outputs
| Name | Type | Description |
|---|---|---|
| result | Promise<string> | A human-readable description of the completed action, e.g. `"Dragged and dropped <source description> to <destination description>"` or `"Dragged and dropped <source description> at {x, y}"`. |
Usage Examples
Basic Usage
const { openBrowser, goto, dragAndDrop, $, closeBrowser } = require('taiko');
(async () => {
await openBrowser();
await goto('https://example.com/kanban');
// Drag a card element to another column using selectors
await dragAndDrop($('#card-1'), $('#column-done'));
// Drag an element by a relative pixel offset
await dragAndDrop($('#draggable-item'), { up: 0, down: 0, left: 0, right: 200 });
await closeBrowser();
})();