Skip to content

Commit e19ad79

Browse files
promptless[bot]promptless[bot]
authored
Documentation updates from Promptless
1 parent ac996c2 commit e19ad79

File tree

8 files changed

+840
-0
lines changed

8 files changed

+840
-0
lines changed

‎docs/get-started/actions/dragAndDrop.md‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
---
2+
title: dragAndDrop
3+
layout: default
4+
nav_order: 3
5+
parent: Actions
6+
grand_parent: Tests
7+
description: Drag an element from a source location to a target location.
8+
---
9+
10+
# dragAndDrop
11+
12+
The `dragAndDrop` action allows you to drag an element from a source location 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.
13+
14+
The `dragAndDrop` action requires both a source and target element, which can be specified using element text, CSS/XPath selectors, or detailed objects with additional configuration options.
15+
16+
## Properties
17+
18+
The `dragAndDrop` action requires an object with the following properties:
19+
20+
- `source`: (Required) The element to drag from. Can be a string (element text or selector) or a detailed object.
21+
- `target`: (Required) The element to drop onto. Can be a string (element text or selector) or a detailed object.
22+
- `timeout`: (Optional) Maximum duration in milliseconds to wait for the drag-and-drop operation to complete.
23+
24+
### Source and Target Element Properties
25+
26+
When using detailed objects for `source` or `target`, you can specify:
27+
28+
- `elementText`: (Optional) Display text of the element. If combined with `selector`, the element must match both the text and the selector.
29+
- `selector`: (Optional) CSS or XPath selector of the element. If combined with `elementText`, the element must match both the text and the selector.
30+
- `timeout`: (Optional) Maximum duration in milliseconds to wait for this specific element to exist.
31+
32+
> For comprehensive options, see the full [`dragAndDrop`](/docs/references/schemas/dragAndDrop) reference.
33+
34+
## Examples
35+
36+
Here are several ways you might use the `dragAndDrop` action:
37+
38+
### Drag and drop using element text
39+
40+
```json
41+
{
42+
"tests": [
43+
{
44+
"steps": [
45+
{
46+
"description": "Drag 'Item 1' and drop it onto 'Drop Zone'",
47+
"dragAndDrop": {
48+
"source": "Item 1",
49+
"target": "Drop Zone"
50+
}
51+
}
52+
]
53+
}
54+
]
55+
}
56+
```
57+
58+
### Drag and drop using CSS selectors
59+
60+
```json
61+
{
62+
"tests": [
63+
{
64+
"steps": [
65+
{
66+
"description": "Drag an item from the source list to the target list",
67+
"dragAndDrop": {
68+
"source": "#source-list .draggable-item:first-child",
69+
"target": "#target-list"
70+
}
71+
}
72+
]
73+
}
74+
]
75+
}
76+
```
77+
78+
### Drag and drop with detailed element objects
79+
80+
```json
81+
{
82+
"tests": [
83+
{
84+
"steps": [
85+
{
86+
"description": "Drag a specific task to a different column",
87+
"dragAndDrop": {
88+
"source": {
89+
"selector": ".task-card",
90+
"elementText": "Complete documentation"
91+
},
92+
"target": {
93+
"selector": ".column",
94+
"elementText": "In Progress"
95+
}
96+
}
97+
}
98+
]
99+
}
100+
]
101+
}
102+
```
103+
104+
### Drag and drop with timeout configuration
105+
106+
```json
107+
{
108+
"tests": [
109+
{
110+
"steps": [
111+
{
112+
"description": "Drag and drop with extended timeout for slow animations",
113+
"dragAndDrop": {
114+
"source": "#draggable-element",
115+
"target": "#drop-target",
116+
"timeout": 10000
117+
}
118+
}
119+
]
120+
}
121+
]
122+
}
123+
```
124+
125+
### Drag and drop with per-element timeouts
126+
127+
```json
128+
{
129+
"tests": [
130+
{
131+
"steps": [
132+
{
133+
"description": "Drag and drop with different timeouts for source and target",
134+
"dragAndDrop": {
135+
"source": {
136+
"selector": ".dynamic-item",
137+
"timeout": 5000
138+
},
139+
"target": {
140+
"selector": ".drop-zone",
141+
"timeout": 3000
142+
}
143+
}
144+
}
145+
]
146+
}
147+
]
148+
}
149+
```
150+
151+
## Use Cases
152+
153+
The `dragAndDrop` action is particularly useful for testing:
154+
155+
- **Kanban boards**: Moving tasks between different status columns
156+
- **File uploads**: Dragging files from desktop to upload areas
157+
- **List reordering**: Changing the order of items in sortable lists
158+
- **Dashboard widgets**: Rearranging components on customizable dashboards
159+
- **Form builders**: Moving form elements between different sections
160+
- **Shopping carts**: Adding items by dragging them to the cart area
161+
162+
## Related Actions
163+
164+
- [`click`](/docs/get-started/actions/click): Click elements to interact with them
165+
- [`find`](/docs/get-started/actions/find): Locate elements before performing other actions
166+
- [`wait`](/docs/get-started/actions/wait): Add delays for animations to complete

‎docs/get-started/concepts.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ An action is the task performed in a step. Doc Detective supports a variety of a
2727
| [checkLink](/docs/get-started/actions/checkLink) | Check if a URL returns an acceptable status code from a GET request. |
2828
| [find](/docs/get-started/actions/find) | Locate and interact with an element on the page. |
2929
| [click](/docs/get-started/actions/click) | Click an element. |
30+
| [dragAndDrop](/docs/get-started/actions/dragAndDrop) | Drag an element from a source location to a target location. |
3031
| [goTo](/docs/get-started/actions/goTo) | Navigate to a specified URL. |
3132
| [httpRequest](/docs/get-started/actions/httpRequest) | Perform a generic HTTP request, for example to an API. |
3233
| [runShell](/docs/get-started/actions/runShell) | Perform a native shell command. |

0 commit comments

Comments
 (0)