Cypress 视觉回归测试插件使用教程

Cypress 视觉回归测试插件使用教程

cypress-plugin-visual-regression-diff Perform visual regression test with a nice GUI as help. 💅 Only for Cypress! 项目地址: https://gitcode.com/gh_mirrors/cy/cypress-plugin-visual-regression-diff

1. 项目目录结构及介绍

cypress-plugin-visual-regression-diff/
├── assets/
├── examples/
├── packages/
│   └── cypress-plugin-visual-regression-diff/
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── release-please-config.json
├── renovate.json
└── ...

目录结构介绍

• assets/: 存放项目相关的静态资源文件。
• examples/: 包含示例代码，展示如何在项目中使用该插件。
• packages/cypress-plugin-visual-regression-diff/: 插件的核心代码目录。
• .editorconfig: 编辑器配置文件，用于统一代码风格。
• .eslintignore: ESLint 忽略文件配置。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .prettierignore: Prettier 忽略文件配置。
• CHANGELOG.md: 项目变更日志。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• pnpm-lock.yaml: pnpm 锁定文件。
• pnpm-workspace.yaml: pnpm 工作区配置文件。
• release-please-config.json: 发布配置文件。
• renovate.json: Renovate 配置文件。

2. 项目的启动文件介绍

启动文件

• packages/cypress-plugin-visual-regression-diff/index.js: 插件的入口文件，负责初始化和配置插件。

启动流程

1. 导入插件: 在 Cypress 的 support/index.js 文件中导入插件。

   import "@frsource/cypress-plugin-visual-regression-diff";
   

2. 初始化插件: 在 Cypress 的配置文件中初始化插件。

   • Cypress 10.0+: 在 cypress.config.js 或 cypress.config.ts 中初始化。

     import { defineConfig } from "cypress";
     import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
     
     export default defineConfig({
       e2e: {
         setupNodeEvents(on, config) {
           initPlugin(on, config);
         },
       },
       component: {
         setupNodeEvents(on, config) {
           initPlugin(on, config);
         },
       },
     });
     

   • Cypress <10.0: 在 cypress/plugins/index.js 中初始化。

     const { initPlugin } = require("@frsource/cypress-plugin-visual-regression-diff/plugins");
     
     module.exports = function (on, config) {
       initPlugin(on, config);
       return config;
     };
     

3. 项目的配置文件介绍

配置文件

• cypress.config.js 或 cypress.config.ts: Cypress 的主要配置文件，用于配置插件和其他 Cypress 设置。
• .eslintrc.js: ESLint 配置文件，用于代码风格检查。
• package.json: 项目依赖和脚本配置，包含插件的安装和启动命令。

配置示例

Cypress 配置

import { defineConfig } from "cypress";
import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      initPlugin(on, config);
    },
  },
  component: {
    setupNodeEvents(on, config) {
      initPlugin(on, config);
    },
  },
  env: {
    pluginVisualRegressionUpdateImages: true,
    pluginVisualRegressionDiffConfig: {
      threshold: 0.01,
    },
  },
});

ESLint 配置

module.exports = {
  extends: "eslint:recommended",
  rules: {
    // 自定义规则
  },
};

package.json

{
  "name": "cypress-plugin-visual-regression-diff",
  "version": "3.3.10",
  "scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },
  "devDependencies": {
    "@frsource/cypress-plugin-visual-regression-diff": "^3.3.10"
  }
}

通过以上配置，您可以顺利启动和配置 Cypress 视觉回归测试插件，并根据项目需求进行自定义设置。

cypress-plugin-visual-regression-diff Perform visual regression test with a nice GUI as help. 💅 Only for Cypress! 项目地址: https://gitcode.com/gh_mirrors/cy/cypress-plugin-visual-regression-diff