dragAndDrop action docs (#89)

* First pass at dragAndDrop docs

* Update dragAndDrop docs

* Add timeout description

* Add to sidebar

* Fixed broken links

Author: hawkeyexl

docs/get-started/actions/dragAndDrop.mdx

@@ -0,0 +1,99 @@
+---
+title: dragAndDrop
+layout: default
+nav_order: 3
+parent: Actions
+grand_parent: Tests
+description: Drag an element from a source location to a target location.
+---
+
+# 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 target element, which can be specified using element text, CSS/XPath selectors, or detailed objects with additional configuration options.
+
+## 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.
+
+### 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 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.
+
+
+> For comprehensive options, see the full [`dragAndDrop`](/docs/references/schemas/draganddrop) reference.
+
+## Examples
+
+Here are several ways you might use the `dragAndDrop` action:
+
+### Drag and drop using selectors or element text
+
+```json
+{
+  "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
+
+```json
+{
+  "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`](/docs/get-started/actions/click): Click elements to interact with them
+- [`find`](/docs/get-started/actions/find): Locate elements before performing other actions
+- [`wait`](/docs/get-started/actions/wait): Add delays for animations to complete

docs/get-started/tests/index.mdx

@@ -19,6 +19,7 @@ Tests tell Doc Detective what actions to perform, how, and where. Tests are made
 
   - [**checkLink**](/docs/get-started/actions/checkLink): Check if a URL returns an acceptable status code from a GET request.
   - [**click**](/docs/get-started/actions/click): Click or tap an element.
+  - [**dragAndDrop**](/docs/get-started/actions/dragAndDrop): Drag an element and drop it on a target.
   - [**find**](/docs/get-started/actions/find): Check if an element exists with the specified selector.
   - [**goTo**](/docs/get-started/actions/goTo): Navigate to a specified URL.
   - [**httpRequest**](/docs/get-started/actions/httpRequest): Perform a generic HTTP request, for example to an API.
@@ -36,8 +37,8 @@ Tests tell Doc Detective what actions to perform, how, and where. Tests are made
 
 You can define test specs in multiple ways:
 
-- [Standalone JSON files](#standalone-json) make it easy to see the entirety of the spec and keep it in a separate, machine-readable format.
-- [Inline JSON](#inline-json) allows you to define tests directly in your documentation source files.
+- [Standalone JSON files](#standalone-json-or-yaml) make it easy to see the entirety of the spec and keep it in a separate, machine-readable format.
+- [Inline JSON](#inline-json-or-yaml) allows you to define tests directly in your documentation source files.
 - [Detected tests](#detected-tests) are automatically generated by Doc Detective based on your documentation source files and your configuration.
 
 ### Standalone JSON or YAML
@@ -218,7 +219,7 @@ Doc Detective can automatically generate tests based on your documentation sourc
 
 Detected tests are useful for keeping your tests in sync with your documentation. When you update your documentation, Doc Detective automatically updates the tests based on the new content. Detected tests are generated automatically. You can't edit detected tests directly, but you can update your config or documentation source files to change the tests.
 
-> You can mix detected tests with [inline tests](#inline-json) to declare steps that might not be covered in your content, such starting or stopping a recording.
+> You can mix detected tests with [inline tests](#inline-json-or-yaml) to declare steps that might not be covered in your content, such starting or stopping a recording.
 
 Doc Detective includes several default markup patterns for Markdown files. Here are all the built-in patterns:
 

docs/references/schemas/draganddrop.md

@@ -0,0 +1,24 @@
+
+# dragAndDrop
+
+
+
+## Referenced In
+
+- [Markup definition](/docs/references/schemas/markup-definition)
+- [test](/docs/references/schemas/test)
+- [Resolved context](/docs/references/schemas/resolved-context)
+
+## Fields
+
+Field | Type | Description | Default
+:-- | :-- | :-- | :--
+dragAndDrop | object([dragAndDrop](/docs/references/schemas/draganddrop)) | Required. Drag and drop an element from source to target. | 
+
+## Examples
+
+```json
+{
+  "dragAndDrop": {}
+}
+```

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "doc-detective-docs",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "scripts": {
     "docusaurus": "docusaurus",
     "prestart": "npm run build-schemas",
@@ -21,7 +21,7 @@
     "doc-detective": "npx doc-detective@latest runTests"
   },
   "dependencies": {
-    "@apidevtools/json-schema-ref-parser": "^14.1.1",
+    "@apidevtools/json-schema-ref-parser": "^14.2.0",
     "@docusaurus/core": "^3.8.1",
     "@docusaurus/preset-classic": "^3.8.1",
     "@docusaurus/theme-mermaid": "^3.8.1",
@@ -31,7 +31,7 @@
     "@mui/icons-material": "^7.3.1",
     "@mui/material": "^7.3.1",
     "clsx": "^2.1.1",
-    "doc-detective-common": "^3.2.0",
+    "doc-detective-common": "^3.3.0",
     "dotenv": "^17.2.1",
     "https-browserify": "^1.0.0",
     "os-browserify": "^0.3.0",

package.json

@@ -52,6 +52,7 @@ const sidebars: SidebarsConfig = {
           items: [
             "get-started/actions/checkLink",
             "get-started/actions/click",
+            "get-started/actions/dragAndDrop",
             "get-started/actions/find",
             "get-started/actions/goTo",
             "get-started/actions/httpRequest",

sidebars.ts

@@ -10,6 +10,8 @@ CLA
 CLEAR
 config
 CTRL
+dragAndDrop
+draggable
 defaultCommand
 detectSteps
 Dev