Add CSS and XPath selector guidance pages (#94)

* Initial plan

* Add CSS and XPath selector guidance pages

Co-authored-by: hawkeyexl <[email protected]>

* Content revisions

* Updated nav structure and added xrefs

* Typo fix

* Style fix

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: hawkeyexl <[email protected]>
Co-authored-by: hawkeyexl <[email protected]>

Author: Copilot

docs/get-started/actions/click.mdx

@@ -28,7 +28,7 @@ If you need to find an element before clicking it, consider using the [`find`](/
 When using the object format, you can specify:
 
 - `button`: (Optional) Kind of click to perform. Can be `"left"`, `"right"`, or `"middle"`. Default is `"left"`.
-- `selector`: (Optional) CSS or XPath selector of the element to click. If combined with `elementText`, the element must match both the text and the selector.
+- `selector`: (Optional) [CSS selector](/docs/get-started/selectors/css) or [XPath selector](/docs/get-started/selectors/xpath) of the element to click. If combined with `elementText`, the element must match both the text and the selector.
 - `elementText`: (Optional) Display text of the element to click. If combined with `selector`, the element must match both the text and the selector.
 
 > For comprehensive options, see the full [`click`](/docs/references/schemas/click) reference.

docs/get-started/actions/dragAndDrop.mdx

@@ -22,7 +22,7 @@ Drag-and-drop has many different implementations, and Doc Detective wants to sup
 
 :::
 
-## Use Cases
+## Use cases
 
 The `dragAndDrop` action is particularly useful for testing:
 
@@ -40,12 +40,12 @@ 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
+### 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.
+- `selector`: (Optional) [CSS selector](/docs/get-started/selectors/css) or [XPath selector](/docs/get-started/selectors/xpath) 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.
@@ -100,7 +100,7 @@ Here are several ways you might use the `dragAndDrop` action:
 }
 ```
 
-## Related Actions
+## 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

docs/get-started/actions/find.mdx

@@ -22,7 +22,7 @@ You can specify the target element directly using a string (for simple text or s
   - Example: `"find": "Login"` or `"find": "#username"`.
 - **Object Format:** Use an object with the following properties:
   - `elementText`: (Optional) The display text of the element to find. If combined with `selector`, the element must match both.
-  - `selector`: (Optional) The CSS or XPath selector of the element to find. If combined with `elementText`, the element must match both. *At least one of `elementText` or `selector` is required.*
+  - `selector`: (Optional) The [CSS selector](/docs/get-started/selectors/css) or [XPath selector](/docs/get-started/selectors/xpath) of the element to find. If combined with `elementText`, the element must match both. *At least one of `elementText` or `selector` is required.*
   - `timeout`: (Optional) Maximum duration in milliseconds to wait for the element to exist (default: 5000).
   - `moveTo`: (Optional) Move the cursor to the element. If the element isn't visible, it's scrolled into view (default: `true`).
   - `click`: (Optional) Click the element after finding it. Can be `true` (for a default left click), `"left"`, `"right"`, `"middle"`, or an object like `{ "button": "right" }`.

docs/get-started/actions/screenshot.mdx

@@ -27,7 +27,7 @@ You can specify the screenshot action in several ways:
     - `always`: Always overwrite the reference image with the new capture.
     - `aboveVariation`: Overwrite only if the visual difference exceeds `maxVariation`.
   - `crop`: (Optional) Crop the screenshot to a specific element. Provide a CSS/XPath selector string (e.g., `"#myElement"`) or an object:
-    - `selector`: (Required in object) The CSS or XPath selector of the element to crop to.
+    - `selector`: (Required in object) The [CSS selector](/docs/get-started/selectors/css) or [XPath selector](/docs/get-started/selectors/xpath) of the element to crop to.
     - `elementText`: (Optional) Display text to further specify the element if the selector isn't unique.
     - `padding`: (Optional) Add padding around the element before cropping. Can be a single number (all sides) or an object `{ top, right, bottom, left }`.