New action JSON schema references (#92)

hawkeyexl · web-flow · commit 53ee5afbeaad · 2025-10-06T08:30:52.000-07:00
* Add JSON schema plugin

* Added schema references to guide pages
diff --git a/docs/get-started/actions/checkLink.mdx b/docs/get-started/actions/checkLink.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests,
 description: Check if a URL returns an acceptable status code from a GET request.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # checkLink
 
 The `checkLink` action checks if a URL returns an acceptable status code from a GET request. This action is useful for verifying that a hyperlink or image URL is valid.
@@ -230,3 +233,7 @@ After applying these changes, the test should pass:
   "resultDescription": "Returned 200"
 }
 ```
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.checkLink_v3 } />
diff --git a/docs/get-started/actions/click.mdx b/docs/get-started/actions/click.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Click or tap an element on the page.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # click
 
 The `click` action allows you to click or tap an element on the page. You can specify which mouse button to use and target elements using text or selectors.
@@ -133,3 +136,7 @@ Here are a few ways you might use the `click` action:
 
 - [`find`](/docs/get-started/actions/find): Find an element and optionally interact with it
 - [`type`](/docs/get-started/actions/type): Type text or special keys
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.click_v3 } />
diff --git a/docs/get-started/actions/dragAndDrop.mdx b/docs/get-started/actions/dragAndDrop.mdx
@@ -7,14 +7,19 @@ grand_parent: Tests
 description: Drag an element to a target location.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # 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.
 
 :::info
+
 Drag-and-drop has many different implementations, and Doc Detective wants to support them all. If you find that your specific use case isn't working, don't give up! Please [open an issue](https://github.com/doc-detective/doc-detective/issues) or [start a thread on our Discord](https://discord.gg/2M7wXEThfF).
+
 :::
 
 ## Use Cases
@@ -43,7 +48,6 @@ When using detailed objects for `source` or `target`, you can specify:
 - `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
@@ -100,4 +104,8 @@ Here are several ways you might use the `dragAndDrop` action:
 
 - [`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
+- [`wait`](/docs/get-started/actions/wait): Add delays for animations to complete
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.dragAndDrop_v3 } />
diff --git a/docs/get-started/actions/find.mdx b/docs/get-started/actions/find.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Locate and interact with an element on the page.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # find
 
 The `find` action locates an element in the current interface based on its display text or a CSS/XPath selector. After finding the element, you can optionally interact with it, such as clicking it or typing into it.
@@ -168,3 +171,7 @@ Here are a few ways you might use the `find` action:
   ]
 }
 ```
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.find_v3 } />
diff --git a/docs/get-started/actions/goTo.mdx b/docs/get-started/actions/goTo.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Navigate to a specified URL.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # goTo
 
 The `goTo` action navigates the browser to a specified URL. This is typically used to start a test at a specific page or navigate between pages during a test.
@@ -98,3 +101,7 @@ Assumes the browser is currently at `https://example.com` or a global `origin` i
   ]
 }
 ```
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.goTo_v3 } />
diff --git a/docs/get-started/actions/httpRequest.mdx b/docs/get-started/actions/httpRequest.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Perform a generic HTTP request, for example to an API.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # httpRequest
 
 The `httpRequest` action makes arbitrary HTTP calls, allowing you to interact with and validate APIs or other web services directly within your tests.
@@ -277,3 +280,8 @@ Assumes an OpenAPI definition with operation ID `getUserById` is loaded.
     }
   ]
 }
+```
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.httpRequest_v3 } />
diff --git a/docs/get-started/actions/loadCookie.mdx b/docs/get-started/actions/loadCookie.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Load a cookie from a file or environment variable into the browser.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # loadCookie
 
 The `loadCookie` action loads a cookie from a file or environment variable into the browser. This action is useful for restoring authentication sessions, user preferences, or other stateful information that was previously saved using the [`saveCookie`](/docs/get-started/actions/saveCookie) action.
@@ -192,4 +195,8 @@ Load a cookie with detailed configuration:
 ## Related actions
 
 - [`saveCookie`](/docs/get-started/actions/saveCookie): Save a browser cookie to a file or environment variable
-- [`loadVariables`](/docs/get-started/actions/loadVariables): Load environment variables from .env files
+- [`loadVariables`](/docs/get-started/actions/loadVariables): Load environment variables from .env files
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.loadCookie_v3 } />
diff --git a/docs/get-started/actions/loadVariables.mdx b/docs/get-started/actions/loadVariables.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Load environment variables from a .env file.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # loadVariables
 
 The `loadVariables` action loads environment variables from a specified `.env` file. This action is useful for accessing sensitive information, such as API keys or other credentials, without hardcoding them into your tests. Variables loaded this way are available for use in subsequent steps within the same test.
@@ -52,3 +55,7 @@ You can load these variables using the `loadVariables` action:
   ]
 }
 ```
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.loadVariables_v3 } />
diff --git a/docs/get-started/actions/record.mdx b/docs/get-started/actions/record.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Start capturing a video of test execution.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # record
 
 The `record` action starts recording the browser viewport as a video file (MP4, WebM, or GIF). This is useful for debugging failed tests or creating multimedia documentation. Recording continues until a `stopRecord` step is encountered.
@@ -113,3 +116,8 @@ Records to `test_video.gif` in the `output/gifs` directory, overwriting if it ex
     }
   ]
 }
+```
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.record_v3 } />
diff --git a/docs/get-started/actions/runCode.mdx b/docs/get-started/actions/runCode.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Assemble and run code snippets in various languages.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # runCode
 
 The `runCode` action executes a code snippet in a specified language (like JavaScript, Python, Bash, etc.) on the local machine and evaluates the results. This allows embedding executable code directly within your tests.
@@ -136,3 +139,7 @@ The first step runs Python code to print "setup", validates the output using a r
   ]
 }
 ```
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.runCode_v3 } />
diff --git a/docs/get-started/actions/runShell.mdx b/docs/get-started/actions/runShell.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Perform a native shell command.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # runShell
 
 The `runShell` action runs a shell command or script on the local machine and evaluates the results, extending Doc Detective's testing capabilities to anything you can script.
@@ -147,3 +150,7 @@ The first step echoes "setup", validates the output using a regex, and captures
   ]
 }
 ```
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.runShell_v3 } />
diff --git a/docs/get-started/actions/saveCookie.mdx b/docs/get-started/actions/saveCookie.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Save a browser cookie to a file or environment variable for later reuse.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # saveCookie
 
 The `saveCookie` action saves a browser cookie to a file or environment variable for later reuse. This action is useful for preserving authentication sessions, user preferences, or other stateful information between test runs or across different tests.
@@ -149,4 +152,9 @@ Save a cookie with detailed configuration:
 ## Related actions
 
 - [`loadCookie`](/docs/get-started/actions/loadCookie): Load a saved cookie back into the browser
-- [`loadVariables`](/docs/get-started/actions/loadVariables): Load environment variables from .env files
+- [`loadVariables`](/docs/get-started/actions/loadVariables): Load environment variables from .env files
+
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.saveCookie_v3 } />
diff --git a/docs/get-started/actions/screenshot.mdx b/docs/get-started/actions/screenshot.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Take a screenshot in PNG format and optionally perform visual regression testing.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # screenshot
 
 The `screenshot` action captures a PNG image of the current browser viewport or a specific element. It can also perform visual regression testing by comparing the captured image against a previously saved reference image.
@@ -146,3 +149,7 @@ Captures the element with text "Submit Button", adds 10px padding, and compares
   ]
 }
 ```
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.screenshot_v3 } />
diff --git a/docs/get-started/actions/stopRecord.mdx b/docs/get-started/actions/stopRecord.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Stop capturing a video of test execution.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # stopRecord
 
 The `stopRecord` action stops a video recording previously started by a [`record`](record) action and saves the video file.
@@ -45,3 +48,7 @@ This example starts recording, performs an action, and then stops the recording.
   ]
 }
 ```
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.stopRecord_v3 } />
diff --git a/docs/get-started/actions/type.mdx b/docs/get-started/actions/type.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Type keys, including special keys like Enter.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # type
 
 The `type` action simulates key presses, including special keys such as Enter. This action is useful for simulating user input, such as filling out a form, navigating a website, or using keyboard shortcuts. It typically requires a preceding `find` or `click` action to focus an input element.
@@ -191,3 +194,7 @@ Here's a list of special keys you can use:
   ]
 }
 ```
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.type_v3 } />
diff --git a/docs/get-started/actions/wait.mdx b/docs/get-started/actions/wait.mdx
@@ -7,6 +7,9 @@ grand_parent: Tests
 description: Pause before performing the next action.
 ---
 
+import { schemas } from "doc-detective-common";
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
+
 # wait
 
 The `wait` action pauses test execution for a specified duration before proceeding to the next step. This is useful for adding delays, for example, to allow time for animations to complete or to make recordings easier to follow.
@@ -69,3 +72,7 @@ The value assigned to the `wait` key is the duration to pause in milliseconds. Y
   ]
 }
 ```
+
+## Schema reference
+
+<JSONSchemaViewer schema={ schemas.wait_v3 } />
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -195,7 +195,7 @@ const config: Config = {
   markdown: {
     mermaid: true,
   },
-  themes: ["@docusaurus/theme-mermaid"],
+  themes: ["@docusaurus/theme-mermaid", "docusaurus-json-schema-plugin"],
 };
 
 export default config;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,9 @@ grand_parent: Tests`
`7`	`7`	`description: Perform a generic HTTP request, for example to an API.`
`8`	`8`	`---`
`9`	`9`
	`10`	`+import { schemas } from "doc-detective-common";`
	`11`	`+import JSONSchemaViewer from "@theme/JSONSchemaViewer";`
	`12`	`+`
`10`	`13`	`# httpRequest`
`11`	`14`
`12`	`15`	The `httpRequest` action makes arbitrary HTTP calls, allowing you to interact with and validate APIs or other web services directly within your tests.
@@ -277,3 +280,8 @@ Assumes an OpenAPI definition with operation ID `getUserById` is loaded.
`277`	`280`	`}`
`278`	`281`	`]`
`279`	`282`	`}`
	`283`	+```
	`284`	`+`
	`285`	`+## Schema reference`
	`286`	`+`
	`287`	`+<JSONSchemaViewer schema={ schemas.httpRequest_v3 } />`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,9 @@ grand_parent: Tests`
`7`	`7`	`description: Start capturing a video of test execution.`
`8`	`8`	`---`
`9`	`9`
	`10`	`+import { schemas } from "doc-detective-common";`
	`11`	`+import JSONSchemaViewer from "@theme/JSONSchemaViewer";`
	`12`	`+`
`10`	`13`	`# record`
`11`	`14`
`12`	`15`	The `record` action starts recording the browser viewport as a video file (MP4, WebM, or GIF). This is useful for debugging failed tests or creating multimedia documentation. Recording continues until a `stopRecord` step is encountered.
@@ -113,3 +116,8 @@ Records to `test_video.gif` in the `output/gifs` directory, overwriting if it ex
`113`	`116`	`}`
`114`	`117`	`]`
`115`	`118`	`}`
	`119`	+```
	`120`	`+`
	`121`	`+## Schema reference`
	`122`	`+`
	`123`	`+<JSONSchemaViewer schema={ schemas.record_v3 } />`