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: 排除的文件或目录。