Adding pages for new UI Coverage configuration properties

docs/ui-coverage/changelog.mdx

@@ -9,6 +9,13 @@ sidebar_position: 200
 
 # Changelog
 
+## Week of 6/23/25
+
+UI Coverage now supports defining custom commands that will count towards coverage scores, restricting which kinds of interactions are allowed for certain elements, and including assertions in the UI Coverage calculations. See the following new properties for more details:
+
+- [`additionalInteractionCommands`](/ui-coverage/configuration/additionalinteractioncommands)
+- [`allowedInteractionCommands`](/ui-coverage/configuration/allowedinteractioncommands)
+
 ## Week of 5/26/2025
 
 - Launched AI-powered Test Generation in Cypress Cloud, to help you quickly add tests for the untested elements detected in UI Coverage reports, in a way that follows your existing practices and conventions. For more details, read [our blog post](https://www.cypress.io/blog/add-your-missing-tests-faster-with-test-generation-in-ui-coverage).

docs/ui-coverage/configuration/additionalinteractioncommands.mdx

@@ -0,0 +1,91 @@
+---
+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 how elements are used in tests using a predefined set of [Cypress interaction commands](/ui-coverage/core-concepts/interactivity#Interaction-Commands) such as `click`, `type`, `dblclick`, and more.
+
+The `additionalInteractionCommands` configuration allows you to extend this default set. You can specify custom command types that should also be recognized as interactions, which can increase the range of actions that are counted towards UI Coverage
+
+## 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 (such as [`cypress-real-events`](#Adding-third-party-library-commands)) are properly recognized and tracked.
+- **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, the default commands are 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,176 @@
+---
+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 to reduce noise in reports.
+- **Component-specific rules**: Apply different interaction tracking rules based on element types or component categories. For example, you may require specific kinds of interactions on complex data-visualization components that are not required in regular interactive 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
+
+Note that because `allowedInteractionCommands` replaces the allowed interactions, if you add `assert` as an interaction, remember to also add any other acceptable interactions to the list.
+
+#### Config
+
+```json
+{
+  "uiCoverage": {
+    "additionalInteractionCommands": [
+      {
+        "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 globally defined as `additionalInteractionCommands` in order to be declared here.

docs/ui-coverage/configuration/overview.mdx

@@ -13,6 +13,17 @@ Configuration enables you to customize and fine-tune UI Coverage in Cypress to s
 
 **Note**: By default, setting configuration is limited to Admin users. At your request, this can be changed to allow setting config by all users. Reach out to your Cypress point-of-contact if you would like to change this.
 
+:::success
+
+## New configuration options
+
+UI Coverage now supports defining custom commands that will count towards coverage scores, restricting which kinds of interactions are allowed for certain elements, and including assertions in the UI Coverage calculations. See the following new properties for more details:
+
+- [`additionalInteractionCommands`](/ui-coverage/configuration/additionalinteractioncommands)
+- [`allowedInteractionCommands`](/ui-coverage/configuration/allowedinteractioncommands)
+
+:::
+
 ## Setting configuration
 
 To add or modify the configuration for your project:
@@ -27,6 +38,12 @@ To add or modify the configuration for your project:
 
 ## Configuration options
 
+:::info
+
+For a quick overview of the practical application of the most common UI Coverage confiuration properties, you can read [this blog post](https://www.cypress.io/blog/making-the-most-of-ui-coverage).
+
+:::
+
 A complete configuration with all available options looks as follows:
 
 ```json