Skip to main content

​
Overview

The Drag and Drop step simulates dragging an element from one location and dropping it at another. It’s essential for testing sortable lists, kanban boards, file upload zones, and any interface where users can reorganize or move content by dragging.

​
When to Use Drag and Drop

Use Drag and Drop when you need to:
  • Test sortable lists: Reorder tasks, priorities, or items by dragging them to new positions
  • Verify kanban workflows: Move cards between columns (To Do, In Progress, Done)
  • Test file uploads: Drag files from one area to an upload drop zone
  • Check layout customization: Verify users can rearrange dashboard widgets or page components
  • Validate interactive features: Test drag-based interactions like moving items in inventory systems

​
How It Works

Drag and Drop finds a source element (what you want to drag) and a target element (where you want to drop it), then simulates the complete drag-and-drop gesture. This includes picking up the element, moving it to the target location, and releasing it. The step handles both HTML5 native drag-and-drop (using dragstart, dragover, and drop events) and custom JavaScript implementations (using mouse events). This makes it work with a wide variety of drag-and-drop interfaces.

​
Using the Drag and Drop Step

When you add a Drag and Drop step, you’ll configure:

​
Finding Your Source Element

Use the element picker to visually select the element you want to drag, or enter a CSS selector directly. This should be the actual draggable item - like a card, list item, or file representation.

​
Finding Your Target Element

Use the element picker to select where you want to drop the element, or enter a CSS selector. This could be a container, another list item (for reordering), or a drop zone.

​
Real-World Examples

​
Reordering a Task List

Step 1: Drag and Drop
  Source: .task-item[data-id='task-5']
  Target: .task-item[data-id='task-2']

Step 2: Check Text
  Locator: .task-list .task-item:nth-child(2)
  Expected Text: Task 5
  Assertion: Element has text
Why this works: Drag task 5 to the position of task 2, then verify the reordering worked.

​
Moving Kanban Cards Between Columns

Step 1: Drag and Drop
  Source: .kanban-card[data-title='Update documentation']
  Target: .column[data-status='in-progress']

Step 2: Check Visibility
  Locator: .column[data-status='in-progress'] .kanban-card[data-title='Update documentation']
  Assertion: Is visible
Why this works: Move a card to a new status column and verify it appears there.

​
File Upload via Drag and Drop

Step 1: Drag and Drop
  Source: .file-preview[data-name='report.pdf']
  Target: .upload-dropzone

Step 2: Check Visibility
  Locator: .upload-progress
  Assertion: Is visible

Step 3: Wait for Element
  Locator: .upload-success-message

Step 4: Check Text
  Locator: .uploaded-files
  Expected Text: report.pdf
  Assertion: Element has text
Why this works: Simulate dragging a file to an upload zone and verify the upload completes.

​
Rearranging Dashboard Widgets

Step 1: Drag and Drop
  Source: .widget[data-widget='analytics']
  Target: .grid-cell[data-position='1']

Step 2: Navigate
  URL: /dashboard

Step 3: Check Visibility
  Locator: .grid-cell[data-position='1'] .widget[data-widget='analytics']
  Assertion: Is visible
Why this works: Move a widget to a new position and verify the layout persists. 
Step 1: Drag and Drop
  Source: img[alt='Photo 3']
  Target: .gallery-slot[data-index='0']

Step 2: Extract Value
  Locator: .gallery-slot[data-index='0'] img
  Variable Name: firstImage

Step 3: Check Text
  Use variables: firstImage
  Expected Text: Photo 3
Why this works: Drag an image to a new position and verify it’s in the correct slot.

​
Best Practices

​
Write Specific Selectors

  • Target the exact draggable element: [data-testid='task-card-123']
  • For drop targets, be specific about the container: .column[data-status='done']
  • Use stable attributes like data-* that won’t change with UI updates

​
Understand Your Drag-and-Drop Type

Your application might use:
  • HTML5 Drag-and-Drop: Elements have draggable="true", uses native browser events
  • Custom JavaScript: Uses mouse events, often with libraries like Sortable.js
  • Touch-Based: Supports mobile devices with touch events
Most implementations work automatically, but knowing the type helps with troubleshooting.

​
Ensure Elements Are Visible

  • Both source and target elements must be visible in the viewport
  • Add Wait for Element steps if content loads dynamically
  • Account for scrolling - if elements aren’t visible, the drag might fail

​
Account for Animations

  • Some interfaces animate during drag operations
  • Wait for animations to complete before verifying results
  • Consider adding a brief Wait for Element after the drag

​
Verify the Result

Always add verification steps after drag and drop:

​
Troubleshooting

​
Drag Doesn’t Start

Symptom: Element doesn’t begin dragging Solution:
  • Verify the source element is draggable (check HTML for draggable="true" or drag handlers)
  • Ensure the element isn’t disabled or readonly
  • Check that the element is visible and has sufficient size
  • Use the element picker to confirm your selector targets the right element

​
Drop Doesn’t Complete

Symptom: Element drags but doesn’t drop at the target Solution:
  • Verify the target accepts drops (check for drop event handlers in your app)
  • Ensure the target area is large enough and visible
  • Check if your application requires the drop to happen on a specific part of the target
  • Look for JavaScript errors in the browser console

​
Elements Not in Viewport

Symptom: Test fails because elements aren’t visible Solution:
  • Add Wait for Element to ensure elements load
  • Check if you need to scroll to make elements visible
  • Verify both source and target are in the viewport when the drag starts

​
Reordering Doesn’t Work as Expected

Symptom: Items don’t reorder correctly Solution:
  • For list reordering, target the item position you want, not a container
  • Check if your app requires dropping above/below items vs. on top of them
  • Verify your selectors target the right items in the list
  • Test manually first to understand how your app’s drag-and-drop works

​
Browser Compatibility Issues

Symptom: Drag works in one browser but not another Solution:
  • HTML5 drag-and-drop can behave differently across browsers
  • Test your application’s drag functionality manually in different browsers
  • Check if your implementation uses browser-specific features
  • Consider if your app requires specific browser settings
  • Click - Sometimes needed to select items before dragging
  • Wait for Element - Wait for elements to load before dragging
  • Check Visibility - Verify elements moved to the right location
  • Check Text - Verify content in the new position
  • Upload File - For actual file uploads (use this instead of drag-and-drop for file inputs)