Set up testing for Doc Detective install page

Author: hawkeyexl

.doc-detective.json

@@ -1,29 +1,6 @@
 {
-  "input": ".",
-  "defaultCommand": "runTests",
-  "relativePathBase": "file",
-  "runTests": {
-    "input": ["./docs", "./blog"],
-    "recursive": true,
-    "detectSteps": true
-  },
-  "fileTypes": [
-    {
-      "name": "Markdown/MDX",
-      "extensions": [".md", ".mdx"],
-      "testStartStatementOpen": "<!-- test-start",
-      "testStartStatementClose": "-->",
-      "testIgnoreStatement": "<!-- test-ignore -->",
-      "testEndStatement": "<!-- test-end -->",
-      "stepStatementOpen": "<!-- step-start",
-      "stepStatementClose": "-->",
-      "markup": [
-        {
-          "name": "External hyperlink/image",
-          "regex": ["\\[.*?]\\(([^/].*?)\\)"],
-          "actions": ["checkLink"]
-        }
-      ]
-    }
-  ]
+  "$schema": "https://raw.githubusercontent.com/doc-detective/common/refs/heads/main/dist/schemas/config_v3.schema.json",
+  "input": ["docs/get-started/installation/index.mdx"],
+  "allowUnsafeSteps": true,
+  "fileTypes": ["markdown"]
 }

docs/get-started/installation.md

@@ -0,0 +1,53 @@
+---
+sidebar_label: Installation
+---
+
+import spec from "./sample.spec.json";
+import CodeBlock from '@theme/CodeBlock';
+
+# Installation
+
+Downloading and running Doc Detective is straightforward. Follow these steps to install Doc Detective and run your first test:
+
+1. Install prerequisites:
+
+    - [Node.js](https://nodejs.org/) v18 or later
+
+2. In a terminal, install Doc Detective globally:
+
+    <CodeBlock language="bash" title="Install Doc Detective">
+      npm i -g doc-detective
+    </CodeBlock>
+    {/* step runShell: "npm i -g doc-detective" */}
+
+    :::note
+
+    If you're working in a local copy of the `doc-detective` repository, you need to run `npm i` to install local dependencies.
+
+    :::
+
+3.  Save this file to your current directory as _sample.spec.json_:
+
+    <CodeBlock language="json" title="sample.spec.json">
+      {JSON.stringify(spec, null, 2)}
+    </CodeBlock>
+
+4. Run a test, pointing to the file you just created:
+
+    <CodeBlock language="bash" title="Run test">
+      npx doc-detective --input sample.spec.json
+    </CodeBlock>
+    {/* step runShell:
+    command: "npx doc-detective --input sample.spec.json"
+    workingDirectory: "." */}
+
+
+Congratulations! You've run your first test with Doc Detective. :tada:
+
+You should see output in the terminal indicating the progress and results of the test. Results are also saved in a `testResults-<timestamp>.json` file in the current directory (configurable with the `--output` option), and this test saves a screenshot to example.png:
+
+[![Sample test screenshot](./example.png)](./example.png)
+
+## Next steps
+
+Next up, take a look at some of the [concepts](/docs/get-started/concepts) native to Doc Detective, check out some of the guided [tutorials](/docs/category/tutorials), or explore how to write [tests](/docs/get-started/tests) and [actions](/docs/category/actions) to automate your documentation testing.

docs/get-started/installation/example.png

@@ -0,0 +1,24 @@
+{
+  "tests": [
+    {
+      "steps": [
+        {
+          "description": "Go to the specified URL",
+          "goTo": "https://example.com"
+        },
+        {
+          "description": "Verify the presence of the main heading",
+          "find": "Example Domain"
+        },
+        {
+          "description": "Verify that the 'Learn more' link is present and working",
+          "click": "Learn more"
+        },
+        {
+          "description": "Capture a screenshot of the resulting page",
+          "screenshot": "example.png"
+        }
+      ]
+    }
+  ]
+}

docs/get-started/installation/index.mdx

@@ -13,7 +13,7 @@ npx doc-detective
 
 Want to use the Docker image? [Check it out](https://github.com/doc-detective/docker-image).
 
-See the [Installation](/docs/get-started/installation.md) guide to get started. Come chat on [Discord](https://discord.gg/uAfSjVH7yr)!
+See the [Installation](/docs/get-started/installation) guide to get started. Come chat on [Discord](https://discord.gg/uAfSjVH7yr)!
 
 ## What's Doc Detective?
 
@@ -62,4 +62,4 @@ As an open source and accessible project, Doc Detective is for anyone who's inte
 
 ## Next steps
 
-Want to take Doc Detective for a spin? [Get started](/docs/get-started/installation.md).
+Want to take Doc Detective for a spin? [Get started](/docs/get-started/installation).

docs/get-started/installation/sample.spec.json

@@ -18,7 +18,7 @@ const sidebars: SidebarsConfig = {
       label: "Get started",
       items: [
         "get-started/intro",
-        "get-started/installation",
+        "get-started/installation/index",
         "get-started/concepts",
         "get-started/create-your-first-test",
         "get-started/sample-tests",