dragAndDrop

The dragAndDrop action allows you to drag an element and drop it at a target location. This is useful for testing drag-and-drop interfaces, reordering lists, moving items between containers, and other interactive UI elements.

The dragAndDrop action requires both a source and a target element. Specify each with element text, a CSS or XPath selector, or a detailed object carrying more configuration options.

To move between points instead of elements, use swipe, the movement subset of this action. That covers carousels, sliders, and plain scrolling. dragAndDrop locates two elements and moves between them, while swipe moves between two coordinates or a direction shorthand.

Use cases

The dragAndDrop action is particularly useful for testing:

• Kanban boards: Moving tasks between different status columns
• File uploads: Dragging files from desktop to upload areas
• List reordering: Changing the order of items in sortable lists
• Dashboard widgets: Rearranging components on customizable dashboards
• Form builders: Moving form elements between different sections
• Shopping carts: Adding items by dragging them to the cart area

Properties

The dragAndDrop action requires an object with the following properties:

• source: (Required) The element to drag from. Can be a string (element text or selector) or a detailed object.
• target: (Required) The element to drop onto. Can be a string (element text or selector) or a detailed object.
• surface: (Optional) The browser (session, window, or tab) the source and target elements live in, for example { "browser": "chrome", "tab": "board" }. Omit to act on the active tab. See Test across multiple tabs, windows, and browsers.

Source and target element properties

When using detailed objects for source or target, you can specify:

• elementText: (Optional) Display text of the element. If combined with selector, the element must match both the text and the selector.
• selector: (Optional) CSS selector or XPath selector of the element. If combined with elementText, the element must match both the text and the selector.
• timeout: (Optional) Maximum duration in milliseconds to wait for this specific element to exist.

Outputs: the action exposes outputs.sourceFound and outputs.targetFound, booleans indicating whether the source and target elements were located. To capture them for later steps, use the step-level variables object with the expressions $$sourceFound and $$targetFound.

For comprehensive options, see the full dragAndDrop reference.

Examples

Here are several ways you might use the dragAndDrop action:

Drag and drop using selectors or element text

{
  "tests": [
    {
      "steps": [
        {
          "description": "Drag 'Item 1' and drop it onto 'Drop Zone'",
          "dragAndDrop": {
            "source": "#source-list .draggable-item:first-child",
            "target": "Drop Zone"
          }
        }
      ]
    }
  ]
}

Drag and drop with detailed element objects

{
  "tests": [
    {
      "steps": [
        {
          "description": "Drag a specific task to a different column",
          "dragAndDrop": {
            "source": {
              "selector": ".task-card",
              "elementText": "Complete documentation"
            },
            "target": {
              "selector": ".column",
              "elementText": "In Progress"
            }
          }
        }
      ]
    }
  ]
}

Related actions

• click: Click elements to interact with them
• find: Locate elements before performing other actions
• wait: Add delays for animations to complete