{
  "doc": {
    "id": "accessibility/configuration/views",
    "title": "Views of URLs and mounted components | Cypress Accessibility",
    "description": "Cypress Accessibility automatically groups certain URL patterns to create views. For URLs that are not automatically grouped, the views property allows you to specify your own URL patterns that represent views.",
    "section": "accessibility",
    "source_path": "/llm/markdown/accessibility/configuration/views.md",
    "version": "ce02913654e2655ee63448bdc92bb92c7b46a619",
    "updated_at": "2026-04-22T19:37:51.587Z",
    "headings": [
      {
        "id": "accessibility/configuration/views#views",
        "text": "views",
        "level": 1
      },
      {
        "id": "accessibility/configuration/views#why-use-views",
        "text": "Why use views?",
        "level": 2
      },
      {
        "id": "accessibility/configuration/views#using-groupby",
        "text": "Using groupBy",
        "level": 2
      },
      {
        "id": "accessibility/configuration/views#syntax",
        "text": "Syntax",
        "level": 2
      },
      {
        "id": "accessibility/configuration/views#options",
        "text": "Options",
        "level": 3
      },
      {
        "id": "accessibility/configuration/views#examples",
        "text": "Examples",
        "level": 2
      },
      {
        "id": "accessibility/configuration/views#grouping-dynamic-path-parameters",
        "text": "Grouping dynamic path parameters",
        "level": 3
      },
      {
        "id": "accessibility/configuration/views#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#visited-urls",
        "text": "Visited URLs",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#views-shown-in-ui",
        "text": "Views shown in UI",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#using-named-path-parameters",
        "text": "Using named path parameters",
        "level": 3
      },
      {
        "id": "accessibility/configuration/views#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#visited-urls",
        "text": "Visited URLs",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#views-shown-in-ui",
        "text": "Views shown in UI",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#group-urls-by-named-parameters",
        "text": "Group URLs by named parameters",
        "level": 3
      },
      {
        "id": "accessibility/configuration/views#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#visited-urls",
        "text": "Visited URLs",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#views-shown-in-ui",
        "text": "Views shown in UI",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#group-urls-by-named-query-parameters",
        "text": "Group URLs by named query parameters",
        "level": 3
      },
      {
        "id": "accessibility/configuration/views#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#visited-urls",
        "text": "Visited URLs",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#views-shown-in-ui",
        "text": "Views shown in UI",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#grouping-urls-across-subdomains",
        "text": "Grouping URLs across subdomains",
        "level": 3
      },
      {
        "id": "accessibility/configuration/views#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#visited-urls",
        "text": "Visited URLs",
        "level": 4
      },
      {
        "id": "accessibility/configuration/views#views-shown-in-ui",
        "text": "Views shown in UI",
        "level": 4
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "views"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress automatically groups certain URL patterns to create views. However, for URLs that are not automatically grouped (e.g., `/users/alice` and `/users/bob` are not automatically grouped into `/users/*`), the `views` property allows you to specify custom URL patterns to define views. This configuration enhances the clarity and organization of your coverage reports."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The `groupBy` property allows you to create multiple views from a single URL pattern by specifying which parts of the URL should create distinct groupings."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Why use views?"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Group Dynamic URLs: Group URLs with dynamic path parameters (e.g., `/users/alice` and `/users/bob`) that are not ids or uuids into a single view."
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Organize by Query Parameters: Create views based on query parameters to group URLs where query strings are important to the context of the page."
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Create Distinct View Groups: Use `groupBy` to maintain separate views for meaningful URL parameters while still grouping dynamic content."
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Using groupBy"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The `groupBy` property creates distinct views based on named parameters in your URL pattern. For example, if your pattern is `/analytics/:type/:id`, using `groupBy: [\"type\"]` would create separate views for each unique value of `type` (like `/analytics/performance/:id` and `/analytics/usage/:id`)."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "This is particularly useful when:"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Different parameter values represent distinct functional areas"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "You want to track coverage separately for different categories of content"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "URL parameters determine significant UI changes"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "URLs with the same values for the specified parameters will be grouped together, while different values create distinct views."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Syntax"
          }
        ]
      },
      {
        "type": "code",
        "lang": "json",
        "meta": null,
        "value": "{\n  \"views\": [\n    {\n      \"pattern\": string,\n      \"groupBy\": [\n        string\n      ],\n      \"comment\": string\n    }\n  ]\n}"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Options"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The first pattern that a given URL matches is used as its view. If a URL doesn't match any of the patterns, it is grouped by the default view grouping rules, if possible."
          }
        ]
      },
      {
        "type": "table",
        "align": [
          null,
          null,
          null,
          null
        ],
        "children": [
          {
            "type": "tableRow",
            "children": [
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Option"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Required"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Default"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Description"
                  }
                ]
              }
            ]
          },
          {
            "type": "tableRow",
            "children": [
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "`pattern`"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Required"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": []
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "A URL pattern to group matching URLs into a single view. Uses "
                  },
                  {
                    "type": "link",
                    "title": null,
                    "url": "https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API",
                    "children": [
                      {
                        "type": "text",
                        "value": "URL Pattern API"
                      }
                    ]
                  },
                  {
                    "type": "text",
                    "value": " syntax."
                  }
                ]
              }
            ]
          },
          {
            "type": "tableRow",
            "children": [
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "`groupBy`"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Optional"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": []
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "An array of named parameters from your pattern that should create separate views."
                  }
                ]
              }
            ]
          },
          {
            "type": "tableRow",
            "children": [
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "`comment`"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Optional"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": []
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "A comment describing the purpose of this view configuration."
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Examples"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Grouping dynamic path parameters"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": "typescript",
        "meta": null,
        "value": "{\n  \"views\": [\n    {\n      \"pattern\": \"https://www.my-app.com/users/*\"\n    }\n  ]\n}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Visited URLs"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "https://www.my-app.com/users/alice\nhttps://www.my-app.com/users/bob\nhttps://www.my-app.com/users/bob#settings\nhttps://www.my-app.com/users?assigned=true"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Views shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "www.my-app.com/users\nwww.my-app.com/users/*"
      },
      {
        "type": "thematicBreak"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Using named path parameters"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": "json",
        "meta": null,
        "value": "{\n  \"views\": [\n    {\n      \"pattern\": \"https://www.my-app.com/users/:name\"\n    }\n  ]\n}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Visited URLs"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "https://www.my-app.com/users/alice\nhttps://www.my-app.com/users/bob\nhttps://www.my-app.com/users/bob#settings\nhttps://www.my-app.com/users?assigned=true"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Views shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "www.my-app.com/users\nwww.my-app.com/users/:name"
      },
      {
        "type": "thematicBreak"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Group URLs by named parameters"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": "json",
        "meta": null,
        "value": "{\n  \"views\": [\n    {\n      \"pattern\": \"https://www.my-app.com/analytics/:type/:id\",\n      \"groupBy\": [\"type\"]\n    }\n  ]\n}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Visited URLs"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "https://www.my-app.com/analytics/performance/amara\nhttps://www.my-app.com/analytics/performance/harper\nhttps://www.my-app.com/analytics/usage/amara\nhttps://www.my-app.com/analytics/usage/harper"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Views shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "www.my-app.com/analytics/performance/:id\nwww.my-app.com/analytics/usage/:id"
      },
      {
        "type": "thematicBreak"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Group URLs by named query parameters"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": "json",
        "meta": null,
        "value": "{\n  \"views\": [\n    {\n      \"pattern\": \"https://www.my-app.com/home?*status=:status{&*}?#*\",\n      \"groupBy\": [\"status\"]\n    }\n  ]\n}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Visited URLs"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "https://www.my-app.com/home?page=1&status=done\nhttps://www.my-app.com/home?status=done&group=2\nhttps://www.my-app.com/home?tag=trip&status=new&group=4\nhttps://www.my-app.com/home?tag=trip&status=new#statusView"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Views shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "www.my-app.com/home?status=done\nwww.my-app.com/home?status=new"
      },
      {
        "type": "thematicBreak"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Grouping URLs across subdomains"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": "json",
        "meta": null,
        "value": "{\n  \"views\": [\n    {\n      \"pattern\": \"https://*.my-app.com/:path*\",\n      \"groupBy\": [\"path\"]\n    }\n  ]\n}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Visited URLs"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "https://staging1.my-app.com/home\nhttps://staging2.my-app.com/home\nhttps://www.my-app.com/home\nhttps://staging1.my-app.com/profile\nhttps://www.my-app.com/profile/edit"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Views shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "https://*.my-app.com/home\nhttps://*.my-app.com/profile\nhttps://*.my-app.com/profile/edit"
      }
    ]
  },
  "token_estimate": 761
}