UI Coverage+ Add-on

views

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.

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.

Why use views?

info

Note: setting views impacts both Accessibility and UI Coverage reports. This cannot be nested.

• 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.
• Organize by Query Parameters: Create views based on query parameters to group URLs where query strings are important to the context of the page.
• Create Distinct View Groups: Use groupBy to maintain separate views for meaningful URL parameters while still grouping dynamic content.

Using groupBy

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).

This is particularly useful when:

• Different parameter values represent distinct functional areas
• You want to track coverage separately for different categories of content
• URL parameters determine significant UI changes

URLs with the same values for the specified parameters will be grouped together, while different values create distinct views.

Syntax

{
  "views": [
    {
      "pattern": string,
      "groupBy": [
        string
      ]
    }
  ]
}

Options

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.

Option	Required	Default	Description
pattern	Required		A URL pattern to group matching URLs into a single view. Uses URL Pattern API syntax.
groupBy	Optional		An array of named parameters from your pattern that should create separate views.

Examples

Grouping dynamic path parameters

Config

{
  "views": [
    {
      "pattern": "https://www.my-app.com/users/*"
    }
  ]
}

Visited URLs

https://www.my-app.com/users/alice
https://www.my-app.com/users/bob
https://www.my-app.com/users/bob#settings
https://www.my-app.com/users?assigned=true

Views shown in UI

www.my-app.com/users
www.my-app.com/users/*

---

Using named path parameters

Config

{
  "views": [
    {
      "pattern": "https://www.my-app.com/users/:name"
    }
  ]
}

Visited URLs

https://www.my-app.com/users/alice
https://www.my-app.com/users/bob
https://www.my-app.com/users/bob#settings
https://www.my-app.com/users?assigned=true

Views shown in UI

www.my-app.com/users
www.my-app.com/users/:name

---

Group URLs by named parameters

Config

{
  "views": [
    {
      "pattern": "https://www.my-app.com/analytics/:type/:id",
      "groupBy": ["type"]
    }
  ]
}

Visited URLs

https://www.my-app.com/analytics/performance/amara
https://www.my-app.com/analytics/performance/harper
https://www.my-app.com/analytics/usage/amara
https://www.my-app.com/analytics/usage/harper

Views shown in UI

www.my-app.com/analytics/performance/:id
www.my-app.com/analytics/usage/:id

---

Group URLs by named query parameters

Config

{
  "views": [
    {
      "pattern": "https://www.my-app.com/home?*status=:status{&*}?#*",
      "groupBy": ["status"]
    }
  ]
}

Visited URLs

https://www.my-app.com/home?page=1&status=done
https://www.my-app.com/home?status=done&group=2
https://www.my-app.com/home?tag=trip&status=new&group=4
https://www.my-app.com/home?tag=trip&status=new#statusView

Views shown in UI

www.my-app.com/home?status=done
www.my-app.com/home?status=new

---

Grouping URLs across subdomains

Config

{
  "views": [
    {
      "pattern": "https://*.my-app.com/:path*",
      "groupBy": ["path"]
    }
  ]
}

Visited URLs

https://staging1.my-app.com/home
https://staging2.my-app.com/home
https://www.my-app.com/home
https://staging1.my-app.com/profile
https://www.my-app.com/profile/edit

Views shown in UI

https://*.my-app.com/home
https://*.my-app.com/profile
https://*.my-app.com/profile/edit