{
  "doc": {
    "id": "ui-coverage/core-concepts/interactivity",
    "title": "Testing interactive elements | Cypress UI Coverage",
    "description": "UI Coverage uses a set of rules, based on HTML semantics, WHATWG standards, as well as some additional rules defined by Cypress, to determine which elements are interactive.",
    "section": "ui-coverage",
    "source_path": "/llm/markdown/ui-coverage/core-concepts/interactivity.md",
    "version": "3cf5b86b3403f604bdf7f3e35025c3bc3865e02c",
    "updated_at": "2026-05-07T17:44:31.931Z",
    "headings": [
      {
        "id": "ui-coverage/core-concepts/interactivity#interactivity",
        "text": "Interactivity",
        "level": 1
      },
      {
        "id": "ui-coverage/core-concepts/interactivity#interactive-elements",
        "text": "Interactive Elements",
        "level": 2
      },
      {
        "id": "ui-coverage/core-concepts/interactivity#customizing-interactive-elements",
        "text": "Customizing interactive elements",
        "level": 3
      },
      {
        "id": "ui-coverage/core-concepts/interactivity#interaction-commands",
        "text": "Interaction Commands",
        "level": 2
      },
      {
        "id": "ui-coverage/core-concepts/interactivity#customizing-interaction-commands",
        "text": "Customizing interaction commands",
        "level": 3
      },
      {
        "id": "ui-coverage/core-concepts/interactivity#untested-links",
        "text": "Untested Links",
        "level": 2
      },
      {
        "id": "ui-coverage/core-concepts/interactivity#referrers",
        "text": "Referrers",
        "level": 3
      },
      {
        "id": "ui-coverage/core-concepts/interactivity#urls",
        "text": "URLs",
        "level": 3
      }
    ]
  },
  "chunks": [
    {
      "id": "ui-coverage/core-concepts/interactivity#interactive-elements",
      "doc_id": "ui-coverage/core-concepts/interactivity",
      "heading": "Interactive Elements",
      "heading_level": 2,
      "content_markdown": "## Interactive Elements\n\nUI Coverage determines interactivity based on a combination of HTML semantics, [WHATWG standards](https://html.spec.whatwg.org/dev/dom.html#interactive-content), and Cypress-specific rules. Interactive elements included in UI Coverage are:\n\n*   **Implicit interactive roles**: Elements with a tag of `a`, `button`, `input`, `select`, `textarea`, etc.\n*   **Explicit interactive roles**: Elements with a `role` attribute set to values like `button`, `checkbox`, `radio`, `tab`, `textbox`, etc.\n*   **Tab-navigable elements**: Elements with a `tabindex` attribute set to `>= 0`.\n\nThese elements are tracked for interaction to provide actionable insights into test coverage.\n\n### Customizing interactive elements\n\nCustom interactive elements that do not meet the criteria above can also be declared with a `data-cy-ui-interactive=\"include\"` attribute, used as follows:\n\n```\n<div data-cy-ui-interactive=\"include\">Custom interactive widget</div>\n```\n\nIt most cases we recommend **not** using this override, and instead updating the HTML to be something the browser would already consider to be interactive. This will likely produce better overall behavior, including for accessibility purposes. `data-cy-ui-interactive` is a fallback for situations where that may not be possible.\n",
      "section": "ui-coverage",
      "anchors": [
        "interactive-elements"
      ],
      "path": "/llm/json/chunked/ui-coverage/core-concepts/interactivity.json",
      "token_estimate": 219
    },
    {
      "id": "ui-coverage/core-concepts/interactivity#customizing-interactive-elements",
      "doc_id": "ui-coverage/core-concepts/interactivity",
      "heading": "Customizing interactive elements",
      "heading_level": 3,
      "content_markdown": "### Customizing interactive elements\n\nCustom interactive elements that do not meet the criteria above can also be declared with a `data-cy-ui-interactive=\"include\"` attribute, used as follows:\n\n```\n<div data-cy-ui-interactive=\"include\">Custom interactive widget</div>\n```\n\nIt most cases we recommend **not** using this override, and instead updating the HTML to be something the browser would already consider to be interactive. This will likely produce better overall behavior, including for accessibility purposes. `data-cy-ui-interactive` is a fallback for situations where that may not be possible.\n",
      "section": "ui-coverage",
      "anchors": [
        "customizing-interactive-elements"
      ],
      "path": "/llm/json/chunked/ui-coverage/core-concepts/interactivity.json",
      "token_estimate": 105
    },
    {
      "id": "ui-coverage/core-concepts/interactivity#interaction-commands",
      "doc_id": "ui-coverage/core-concepts/interactivity",
      "heading": "Interaction Commands",
      "heading_level": 2,
      "content_markdown": "## Interaction Commands\n\nInteractive elements are marked as \"tested\" when they are interacted with using specific Cypress commands. These include:\n\n*   `blur`\n*   `check`\n*   `clear`\n*   `click`\n*   `dblclick`\n*   `focus`\n*   `rightclick`\n*   `scrollIntoView`\n*   `scrollTo`\n*   `select`\n*   `selectFile`\n*   `submit`\n*   `trigger`\n*   `type`\n*   `uncheck`\n\nBy ensuring that at least one of these commands is used on every interactive element, UI Coverage accurately reflects your test coverage.\n\n### Customizing interaction commands\n\nConfiguration is available to support adding [additional interaction commands](/llm/markdown/ui-coverage/configuration/additionalinteractioncommands.md), such as custom commands or ones from third-party libraries, to count towards UI Coverage scores.\n\nIt is also possible to adjust the [allowed commands](/llm/markdown/ui-coverage/configuration/allowedinteractioncommands.md) for specific elements, to restrict or expand the commands that are accepted as coverage for specific elements.\n",
      "section": "ui-coverage",
      "anchors": [
        "interaction-commands"
      ],
      "path": "/llm/json/chunked/ui-coverage/core-concepts/interactivity.json",
      "token_estimate": 168
    },
    {
      "id": "ui-coverage/core-concepts/interactivity#customizing-interaction-commands",
      "doc_id": "ui-coverage/core-concepts/interactivity",
      "heading": "Customizing interaction commands",
      "heading_level": 3,
      "content_markdown": "### Customizing interaction commands\n\nConfiguration is available to support adding [additional interaction commands](/llm/markdown/ui-coverage/configuration/additionalinteractioncommands.md), such as custom commands or ones from third-party libraries, to count towards UI Coverage scores.\n\nIt is also possible to adjust the [allowed commands](/llm/markdown/ui-coverage/configuration/allowedinteractioncommands.md) for specific elements, to restrict or expand the commands that are accepted as coverage for specific elements.\n",
      "section": "ui-coverage",
      "anchors": [
        "customizing-interaction-commands"
      ],
      "path": "/llm/json/chunked/ui-coverage/core-concepts/interactivity.json",
      "token_estimate": 72
    },
    {
      "id": "ui-coverage/core-concepts/interactivity#untested-links",
      "doc_id": "ui-coverage/core-concepts/interactivity",
      "heading": "Untested Links",
      "heading_level": 2,
      "content_markdown": "## Untested Links\n\nUI Coverage tracks `<a>` elements (links) that are not visited during testing. For each untested link, detailed information is available:\n\n### Referrers\n\nThe **Referrers** section identifies views that contain links to the untested destination, helping you:\n\n*   Pinpoint untested areas referenced from these links.\n*   Understand navigation paths leading to untested sections.\n*   Gain context on where these links appear within your application.\n\n### URLs\n\nThe **URLs** section groups similar patterns for dynamic routing. For instance, links to `/users/1`, `/users/2`, and `/users/3` are grouped as /users/\\*. This grouping aids in:\n\n*   Understanding the scope of dynamic routes in your application\n*   Viewing the count and variations of a URL pattern.\n*   Writing configuration rules to handle these patterns effectively.\n",
      "section": "ui-coverage",
      "anchors": [
        "untested-links"
      ],
      "path": "/llm/json/chunked/ui-coverage/core-concepts/interactivity.json",
      "token_estimate": 163
    },
    {
      "id": "ui-coverage/core-concepts/interactivity#referrers",
      "doc_id": "ui-coverage/core-concepts/interactivity",
      "heading": "Referrers",
      "heading_level": 3,
      "content_markdown": "### Referrers\n\nThe **Referrers** section identifies views that contain links to the untested destination, helping you:\n\n*   Pinpoint untested areas referenced from these links.\n*   Understand navigation paths leading to untested sections.\n*   Gain context on where these links appear within your application.\n",
      "section": "ui-coverage",
      "anchors": [
        "referrers"
      ],
      "path": "/llm/json/chunked/ui-coverage/core-concepts/interactivity.json",
      "token_estimate": 57
    },
    {
      "id": "ui-coverage/core-concepts/interactivity#urls",
      "doc_id": "ui-coverage/core-concepts/interactivity",
      "heading": "URLs",
      "heading_level": 3,
      "content_markdown": "### URLs\n\nThe **URLs** section groups similar patterns for dynamic routing. For instance, links to `/users/1`, `/users/2`, and `/users/3` are grouped as /users/\\*. This grouping aids in:\n\n*   Understanding the scope of dynamic routes in your application\n*   Viewing the count and variations of a URL pattern.\n*   Writing configuration rules to handle these patterns effectively.\n",
      "section": "ui-coverage",
      "anchors": [
        "urls"
      ],
      "path": "/llm/json/chunked/ui-coverage/core-concepts/interactivity.json",
      "token_estimate": 75
    }
  ]
}