Skip to main content

​
Overview

The Drag and Drop step allows you to simulate dragging an element from one location and dropping it at another location. This is useful for testing drag-and-drop interfaces, sortable lists, file uploads, and other interactive elements that support drag-and-drop functionality.

​
Form Fields

Field NameTypeRequiredDescription
Source LocatorstringYesCSS selector for the element to drag
Target LocatorstringYesCSS selector for the drop destination

​
Form Configuration

​
Source Locator Field

  • Text input field for entering CSS selectors
  • Supports element picker for visual selection
  • Should target the specific element you want to drag
  • Element must be draggable (either natively or through JavaScript)

​
Target Locator Field

  • Text input field for entering CSS selectors
  • Supports element picker for visual selection
  • Should target the area or element where you want to drop
  • Target must be able to accept drops

​
Examples

​
Drag File to Upload Area

  • Source Locator: .file-item[data-filename='document.pdf']
  • Target Locator: .upload-dropzone

​
Reorder List Items

  • Source Locator: .task-item[data-id='task-1']
  • Target Locator: .task-item[data-id='task-3']

​
Move Card Between Columns

  • Source Locator: .kanban-card[data-card='feature-123']
  • Target Locator: .column[data-status='in-progress']
  • Source Locator: img[alt='Product Photo 1']
  • Target Locator: .gallery-container

​
Sort Table Rows

  • Source Locator: tr[data-row-id='item-5']
  • Target Locator: tr[data-row-id='item-2']

​
Best Practices

​
Element Selection

  • Use specific, stable CSS selectors for both source and target
  • Prefer data-testid or data-* attributes for better reliability
  • Ensure both elements are visible and interactive
  • Verify elements actually support drag-and-drop functionality

​
Drag-and-Drop Mechanics

  • Test the actual drag-and-drop behavior in your application first
  • Some elements may require mouse-down, move, and mouse-up events
  • Consider HTML5 drag-and-drop vs. custom JavaScript implementations
  • Account for visual feedback during drag operations

​
Timing Considerations

  • Allow time for drag-and-drop animations to complete
  • Some applications may have delays for confirming drop actions
  • Consider scroll behavior if elements are not initially visible

​
Common Issues

​
Elements Not Draggable

  • Verify the source element has draggable="true" attribute or JavaScript drag handlers
  • Check that the element is not disabled or readonly
  • Ensure the element is visible and has sufficient size for dragging

​
Drop Target Issues

  • Verify the target element accepts drops (has drop event handlers)
  • Check for CSS properties that might prevent dropping
  • Ensure the target area is large enough and properly configured

​
Browser Compatibility

  • HTML5 drag-and-drop behavior may vary between browsers
  • Some custom implementations may require specific browser settings
  • Test drag-and-drop functionality across different browsers

​
Scroll and Viewport Issues

  • Ensure both source and target elements are visible in the viewport
  • Account for scrolling that might occur during drag operations
  • Consider fixed or sticky elements that might interfere

​
Use Cases

​
File Management

  • Drag files from one folder to another
  • Upload files by dragging to upload areas
  • Organize media in galleries or file managers

​
List and Data Organization

  • Reorder items in sortable lists
  • Move tasks between different status columns
  • Prioritize items by dragging to different positions

​
UI Layout and Design

  • Drag components in page builders or design tools
  • Rearrange dashboard widgets or panels
  • Customize layouts by moving elements

​
Gaming and Interactive Elements

  • Move pieces in board games or puzzles
  • Drag items in inventory systems
  • Interactive learning interfaces with drag-and-drop

​
Drag-and-Drop Types

​
HTML5 Native Drag-and-Drop

  • Uses HTML5 drag-and-drop API
  • Elements have draggable="true" attribute
  • Involves dragstart, dragover, and drop events

​
Custom JavaScript Implementation

  • Uses mouse events (mousedown, mousemove, mouseup)
  • Often provides more control over visual feedback
  • May have custom validation and behavior

​
Touch-Based Drag-and-Drop

  • Supports touch devices with touch events
  • May require different handling for mobile testing
  • Consider touch and hold gestures
⌘I