Skip to main content
Cypress无障碍测试高级解决方案

views

Cypress 会自动对某些 URL 模式进行分组以创建视图。但对于未被自动分组的 URL（例如 /users/alice 和 /users/bob 不会自动分组为 /users/*），views 属性允许您指定自定义 URL 模式来定义视图。此配置可增强覆盖率报告的清晰度和组织性。

groupBy 属性允许您通过指定 URL 中应创建不同分组的部分，从单个 URL 模式创建多个视图。

为什么使用视图？​

info

注意：设置 views 会影响无障碍性和 UI 覆盖率报告。 此配置不可嵌套。

  • 分组动态 URL：将带有动态路径参数（如 /users/alice 和 /users/bob）且非 ID 或 UUID 的 URL 分组到单个视图中。
  • 按查询参数组织：基于查询参数创建视图，以分组那些查询字符串对页面上下文很重要的 URL。
  • 创建不同的视图组：使用 groupBy 为有意义的 URL 参数维护单独的视图，同时仍对动态内容进行分组。

使用 groupBy​

groupBy 属性基于 URL 模式中的命名参数创建不同的视图。例如，如果您的模式是 /analytics/:type/:id，使用 groupBy: ["type"] 将为 type 的每个唯一值（如 /analytics/performance/:id 和 /analytics/usage/:id）创建单独的视图。

这在以下情况下特别有用：

  • 不同的参数值代表不同的功能区域
  • 您希望分别跟踪不同类别内容的覆盖率
  • URL 参数决定了重大的 UI 变化

具有相同指定参数值的 URL 将被分组在一起，而不同的值将创建不同的视图。

语法​

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

选项​

URL 匹配的第一个模式将用作其视图。如果 URL 不匹配任何模式，则尽可能按默认视图分组规则进行分组。

选项是否必填默认值描述
pattern必填用于将匹配的 URL 分组到单个视图中的 URL 模式。使用 URL Pattern API 语法。
groupBy可选从模式中指定应创建单独视图的命名参数数组。

示例​

分组动态路径参数​

配置​

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

访问的 URL​

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

UI 中显示的视图​

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

使用命名路径参数​

配置​

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

访问的 URL​

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

UI 中显示的视图​

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

按命名参数分组 URL​

配置​

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

访问的 URL​

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

UI 中显示的视图​

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

按命名查询参数分组 URL​

配置​

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

访问的 URL​

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

UI 中显示的视图​

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

跨子域分组 URL​

配置​

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

访问的 URL​

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

UI 中显示的视图​

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