Percy Cypress 项目教程

Percy Cypress 项目教程

percy-cypressVisual testing with Cypress and Percy项目地址:https://gitcode.com/gh_mirrors/pe/percy-cypress

1. 项目目录结构及介绍

percy-cypress/
├── .github/
│   └── workflows/
├── .percy/
├── cypress/
│   ├── fixtures/
│   ├── integration/
│   ├── plugins/
│   ├── support/
│   └── tsconfig.json
├── node_modules/
├── .gitignore
├── .npmrc
├── .prettierrc
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
└── yarn.lock

目录结构介绍

• .github/workflows/: 存放GitHub Actions的工作流配置文件。
• .percy/: 存放Percy相关的配置文件。
• cypress/: Cypress测试框架的核心目录。
  • fixtures/: 存放测试数据文件。
  • integration/: 存放测试用例文件。
  • plugins/: 存放自定义插件文件。
  • support/: 存放支持文件，如自定义命令等。
  • tsconfig.json: TypeScript配置文件。
• node_modules/: 存放项目依赖的Node模块。
• .gitignore: Git忽略文件配置。
• .npmrc: npm配置文件。
• .prettierrc: Prettier代码格式化配置文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript配置文件。
• yarn.lock: Yarn包管理器生成的锁定文件。

2. 项目启动文件介绍

项目启动文件主要是package.json中的scripts部分。以下是一些常用的启动命令：

{
  "scripts": {
    "start": "cypress open",
    "test": "cypress run",
    "lint": "eslint ."
  }
}

启动命令介绍

• start: 启动Cypress测试运行器。
• test: 运行所有Cypress测试用例。
• lint: 运行ESLint代码检查。

3. 项目配置文件介绍

3.1 cypress.json

Cypress的主要配置文件，通常位于项目根目录下。以下是一个示例配置：

{
  "baseUrl": "http://localhost:3000",
  "viewportWidth": 1280,
  "viewportHeight": 720,
  "defaultCommandTimeout": 5000,
  "video": false
}

配置项介绍

• baseUrl: 测试用例中使用的默认URL。
• viewportWidth: 测试运行器的默认宽度。
• viewportHeight: 测试运行器的默认高度。
• defaultCommandTimeout: 默认命令超时时间（毫秒）。
• video: 是否录制测试视频。

3.2 tsconfig.json

TypeScript配置文件，用于配置TypeScript编译选项。以下是一个示例配置：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": ["cypress/**/*.ts"],
  "exclude": ["node_modules"]
}

配置项介绍

• compilerOptions: TypeScript编译器选项。
  • target: 编译目标版本。
  • lib: 包含的库文件。
  • allowJs: 允许包含JavaScript文件。
  • skipLibCheck: 跳过库文件的类型检查。
  • esModuleInterop: 启用ES模块互操作性。
  • strict: 启用所有严格类型检查选项。
  • module: 模块系统。
  • moduleResolution: 模块解析策略。
  • resolveJsonModule: 允许解析JSON模块。
  • isolatedModules: 确保每个文件可以独立编译。
  • noEmit: 不输出编译后的文件。
  • jsx: JSX处理方式。
• include: 包含的文件或目录。
• exclude: 排除的文件或目录。

percy-cypressVisual testing with Cypress and Percy项目地址:https://gitcode.com/gh_mirrors/pe/percy-cypress