Adding pages for new UI Coverage configuration properties

docs/ui-coverage/configuration/additionalinteractioncommands.mdx

@@ -0,0 +1,90 @@
+---
+title: 'Additional Interaction Commands | Cypress UI Coverage'
+description: 'The `additionalInteractionCommands` configuration property allows users to extend the default set of interaction command types recognized by UI Coverage.'
+sidebar_label: additionalInteractionCommands
+sidebar_position: 90
+---
+
+<ProductHeading product="ui-coverage" />
+
+# additionalInteractionCommands
+
+UI Coverage automatically tracks interactions with elements during test execution using a predefined set of interaction commands. The `additionalInteractionCommands` configuration allows you to extend this default set by specifying custom command types that should also be recognized as interactions, ensuring comprehensive coverage tracking for applications using custom or third-party interaction patterns.
+
+## Why use additionalInteractionCommands?
+
+- **Custom Command Support**: Track interactions from custom Cypress commands that aren't included in the default set.
+- **Third-party Library Support**: Ensure interactions from third-party testing libraries are properly recognized and tracked.
+- **Comprehensive Coverage**: Get complete visibility into all user interactions, including domain-specific or application-specific commands.
+- **Enhanced Reporting**: Improve the accuracy of your UI Coverage reports by including all relevant interaction types.
+
+## Syntax
+
+```json
+{
+  "uiCoverage": {
+    "additionalInteractionCommands": [
+      string
+    ]
+  }
+}
+```
+
+### Options
+
+The `additionalInteractionCommands` property accepts an array of strings, where each string represents a command name that should be treated as an interaction command by UI Coverage.
+
+| Option                          | Required | Default | Description                                                                                                        |
+| ------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------ |
+| `additionalInteractionCommands` | Optional | `[]`    | An array of command names (strings) that should be recognized as interaction commands in addition to the defaults. |
+
+## Examples
+
+### Adding custom interaction commands
+
+#### Config
+
+```json
+{
+  "uiCoverage": {
+    "additionalInteractionCommands": ["customClick", "dragAndDrop", "swipeLeft"]
+  }
+}
+```
+
+#### Usage in tests
+
+```javascript
+// These custom commands will now be tracked as interactions
+cy.get('[data-testid="submit-button"]').customClick()
+cy.get('[data-testid="draggable"]').dragAndDrop()
+cy.get('[data-testid="carousel"]').swipeLeft()
+```
+
+### Adding third-party library commands
+
+#### Config
+
+```json
+{
+  "uiCoverage": {
+    "additionalInteractionCommands": ["realClick", "realType", "realHover"]
+  }
+}
+```
+
+#### Usage in tests
+
+```javascript
+// Commands from cypress-real-events plugin will be tracked
+cy.get('[data-cy="button"]').realClick()
+cy.get('[data-cy="input"]).realType('Hello World')
+cy.get('[data-cy="tooltip-trigger"]').realHover()
+```
+
+## Notes
+
+- Command names are case-sensitive and must match exactly as they appear in your test code.
+- The additional commands are merged with the default interaction commands, not replaced.
+- Only commands that actually interact with DOM elements should be included in this configuration.
+- Custom commands must log a snapshot that references the subject element. This ensures that the command renders element highlights in Cypress open mode/Test Replay, and also ensures that UI Coverage can properly attribute the interaction to the expected element. More information regarding Custom Commands can be found [here](/api/cypress-api/custom-commands).

docs/ui-coverage/configuration/allowedinteractioncommands.mdx

@@ -0,0 +1,174 @@
+---
+title: 'Allowed Interaction Commands | Cypress UI Coverage'
+description: 'The `allowedInteractionCommands` configuration property allows users to limit the interaction commands that are tracked for specific elements in UI Coverage.'
+sidebar_label: allowedInteractionCommands
+sidebar_position: 100
+---
+
+<ProductHeading product="ui-coverage" />
+
+# allowedInteractionCommands
+
+UI Coverage tracks all interaction commands by default for comprehensive coverage reporting. The `allowedInteractionCommands` configuration allows you to limit which interaction commands are tracked for specific elements by defining rules based on CSS selectors. This is particularly useful for filtering out irrelevant interactions or focusing coverage tracking on specific interaction patterns for different types of elements.
+
+## Why use allowedInteractionCommands?
+
+- **Focused Tracking**: Limit coverage tracking to relevant interaction types for specific elements or components.
+- **Noise Reduction**: Filter out unimportant interactions that may clutter coverage reports.
+- **Component-Specific Rules**: Apply different interaction tracking rules based on element types or component categories.
+- **Performance Optimization**: Reduce tracking overhead by excluding unnecessary interactions for certain elements.
+
+## Syntax
+
+```json
+{
+  "uiCoverage": {
+    "allowedInteractionCommands": [
+      {
+        "selector": string,
+        "commands": [string]
+      }
+    ]
+  }
+}
+```
+
+### Options
+
+The `allowedInteractionCommands` property accepts an array of objects, where each object defines a rule for limiting interaction commands for elements matching a specific selector.
+
+| Option     | Required | Default | Description                                                                                                                                                                       |
+| ---------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `selector` | Required |         | A CSS selector to identify elements. Supports standard CSS selector syntax, including IDs, classes, attributes, and combinators.                                                  |
+| `commands` | Required |         | An array of command names (strings) that should be tracked as interactions for elements matching the selector. All other interaction commands will be ignored for these elements. |
+
+## Examples
+
+### Limiting button interactions to clicks only
+
+#### Config
+
+```json
+{
+  "uiCoverage": {
+    "allowedInteractionCommands": [
+      {
+        "selector": "button, [role='button']",
+        "commands": ["click", "realClick"]
+      }
+    ]
+  }
+}
+```
+
+#### Usage in tests
+
+```javascript
+// Only click and realClick will be tracked for buttons
+cy.get('[data-cy="submit-button"]').click() // ✓ Tracked
+cy.get('[data-cy="submit-button"]').realClick() // ✓ Tracked
+cy.get('[data-cy="submit-button"]').hover() // ✗ Not tracked
+cy.get('[data-cy="submit-button"]').focus() // ✗ Not tracked
+```
+
+### Different rules for form elements
+
+#### Config
+
+```json
+{
+  "uiCoverage": {
+    "allowedInteractionCommands": [
+      {
+        "selector": "input[type='text'], textarea",
+        "commands": ["type", "clear", "realType"]
+      },
+      {
+        "selector": "select",
+        "commands": ["select", "click"]
+      },
+      {
+        "selector": "input[type='checkbox'], input[type='radio']",
+        "commands": ["check", "uncheck", "click"]
+      }
+    ]
+  }
+}
+```
+
+#### Usage in tests
+
+```javascript
+// Text inputs: only type, clear, and realType are tracked
+cy.get('[data-cy="username"]').type('john_doe') // ✓ Tracked
+cy.get('[data-cy="username"]').clear() // ✓ Tracked
+cy.get('[data-cy="username"]').focus() // ✗ Not tracked
+
+// Select elements: only select and click are tracked
+cy.get('[data-cy="country"]').select('US') // ✓ Tracked
+cy.get('[data-cy="country"]').click() // ✓ Tracked
+cy.get('[data-cy="country"]').hover() // ✗ Not tracked
+
+// Checkboxes/Radio buttons: check, uncheck, and click are tracked
+cy.get('[data-cy="agree-terms"]').check() // ✓ Tracked
+cy.get('[data-cy="agree-terms"]').click() // ✓ Tracked
+```
+
+### Excluding hover interactions for mobile components
+
+#### Config
+
+```json
+{
+  "uiCoverage": {
+    "allowedInteractionCommands": [
+      {
+        "selector": "[data-mobile='true']",
+        "commands": ["click", "tap", "swipe", "type"]
+      }
+    ]
+  }
+}
+```
+
+#### Usage in tests
+
+```javascript
+// Mobile components: hover interactions are excluded
+cy.get('[data-mobile="true"][data-cy="menu-item"]').click() // ✓ Tracked
+cy.get('[data-mobile="true"][data-cy="menu-item"]').tap() // ✓ Tracked
+cy.get('[data-mobile="true"][data-cy="menu-item"]').hover() // ✗ Not tracked
+```
+
+### Allowing assertions as interactions
+
+#### Config
+
+```json
+{
+  "uiCoverage": {
+    "allowedInteractionCommands": [
+      {
+        "selector": "button[data-no-explicit-interaction='true']",
+        "commands": ["assert"]
+      }
+    ]
+  }
+}
+```
+
+#### Usage in tests
+
+```javascript
+// Any assertions on matching elements are tracked
+cy.get('button[data-no-explicit-interaction="true"]').should('exist) // ✓ Tracked
+cy.get('button[data-no-explicit-interaction="true"]').should('be.visible) // ✓ Tracked
+cy.get('button[data-no-explicit-interaction="true"]').click() // ✗ Not tracked
+```
+
+## Notes
+
+- Elements that don't match any selector will have all interaction commands tracked (default behavior).
+- If an element matches multiple selectors, commands from all matching rules will be allowed. A high degree of specificity for these selectors is recommended.
+- Command names are case-sensitive and must match exactly as they appear in your test code.
+- This configuration works separately from `additionalInteractionCommands`. Custom commands do not need to be defined as `additionalInteractionCommands` in order to be declared here.