如何为Cypress v11.0.1配置cypress-grep v3.1.0插件？

环境信息 #

• Cypress版本：11.0.1
• Node版本：16.16.0
• 包管理器：Yarn 1.22.19
• 操作系统：Windows 10 Pro 21H2版本

我建了个cypress_grep_test_project项目练手@cypress/grep插件，用的是Cypress初始化自带的示例spec文件，只改了部分文件后缀从cy.js到cy.ts，目标是把这个插件用到CI测试里。

查文档的时候发现，Cypress官方文档说plugins文件夹已经取消了；而@cypress/grep的最新文档里，registerCypressGrep方法也不能用了。

目前已经完成的配置：

1. 在ts.config里添加了插件类型声明，避免标签相关的TS报错：

// ts.config file
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "types": [
      "cypress",
      "@cypress/grep" // 新增该行避免标签相关报错
    ],
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

2. 在todo.cy.ts的describe块里加了smoke标签：

// todo.cy.ts
describe('example to-do app', { tags: 'smoke' }, () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io/todo')
  })

现在卡在cypress.config.ts的setupNodeEvents部分，不知道怎么配置，当前代码如下：

// cypress.config.ts
import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    video: false,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    // What next?
    },
  }
})

解决方案 #

针对Cypress 11版本的@cypress/grep配置，按以下步骤完成：

1. 确保已经安装插件：

yarn add @cypress/grep --dev

2. 修改cypress.config.ts，导入并调用插件的configureGrep方法：

// cypress.config.ts
import { defineConfig } from 'cypress'
import configureGrep from '@cypress/grep/src/configure'

export default defineConfig({
  e2e: {
    video: false,
    setupNodeEvents(on, config) {
      // 配置@cypress/grep插件
      configureGrep(on, config)
      // 返回修改后的配置，确保插件生效
      return config
    },
  }
})

3. 在Cypress的support文件中导入插件支持（比如support/e2e.ts）：

// support/e2e.ts
import '@cypress/grep'

配置完成后，就可以通过命令行运行指定标签的测试了：

# 运行所有带有smoke标签的测试
yarn cypress run --env grepTags=smoke

也可以在Cypress GUI中，通过设置环境变量grepTags=smoke来过滤测试用例。

内容的提问来源于stack exchange，提问作者Zujaj Misbah Khan