Cypress的安装和配置方法

作者：瞿丹丹  浏览 1994 发布时间： 更新时间：

一、安装 Cypress

1. 项目初始化（如果尚未初始化）

  1. bash 运行
  2. npm init -y

2. 安装 Cypress（推荐本地安装）

  1. bash 运行
  2. npm install cypress --save-dev

为什么选择本地安装？

确保团队成员使用相同版本的 Cypress，避免环境差异导致的问题。

3. 安装后结构

安装完成后，Cypress 会在项目根目录生成以下结构：

  1. plaintext 运行
  2. cypress/
  3. ├── e2e/ # 测试用例文件夹
  4. ├── support/ # 支持文件（如命令、配置）
  5. ├── fixtures/ # 测试数据
  6. └── plugins/ # 插件配置
  7. cypress.config.js # 主配置文件

二、配置 Cypress

1. 启动配置向导

  1. bash 运行
  2. npx cypress open

首次启动时，Cypress 会自动创建默认配置文件和示例测试。

2. 主配置文件（cypress.config.js）

可自定义以下核心配置：

  1. javascript 运行
  2. const { defineConfig } = require('cypress');
  3. module.exports = defineConfig({
  4.     e2e: {
  5.         baseUrl: 'http://localhost:3000', // 测试基地址
  6.         specPattern: 'cypress/e2e/\*\*/\*.cy.{js,jsx,ts,tsx}', // 测试文件匹配模式
  7.         supportFile: 'cypress/support/e2e.js', // 支持文件路径
  8.         viewportWidth: 1280, // 默认视口宽度
  9.         viewportHeight: 720, // 默认视口高度
  10.         defaultCommandTimeout: 10000, // 命令超时时间（毫秒）
  11.     },
  12. });

3. 环境变量配置

在 cypress.config.js 中添加 env 字段：

  1. javascript 运行
  2. module.exports = defineConfig({
  3.     e2e: {
  4.         env: {
  5.             API\_URL: 'https://api.example.com',
  6.             USERNAME: 'testuser',
  7.             PASSWORD: 'testpass',
  8.         },
  9.         // ...其他配置
  10.     },
  11. });

在测试中通过 Cypress.env() 访问：

  1. javascript 运行
  2. cy.request(\`${Cypress.env('API\_URL')}/users\`);

三、自定义测试环境

1. 多环境配置

创建 cypress.env.json 文件：

  1. json 运行
  2.     {
  3.     "development": {
  4.         "API\_URL": "http://dev-api.example.com"
  5.     },
  6.     "production": {
  7.         "API\_URL": "https://api.example.com"
  8.     }
  9. }

运行时指定环境：

  1. bash 运行
  2. npx cypress open --env environment=development

2. 浏览器配置

在 cypress.config.js 中设置默认浏览器：

  1. javascript 运行
  2. module.exports = defineConfig({
  3.     e2e: {
  4.         browser: 'chrome', // 可选: chrome, edge, firefox 等
  5.         // ...
  6.     },
  7. });

四、支持 TypeScript

1. 安装依赖

  1. bash 运行
  2. npm install typescript @types/cypress --save-dev

2. 创建 tsconfig.json

  1. json 运行
  2. {
  3.     "compilerOptions": {
  4.         "target": "ESNext",
  5.         "lib": \["ESNext", "DOM"\],
  6.         "types": \["cypress"\]
  7.     },
  8.     "include": \["cypress/\*\*/\*.ts"\]
  9. }

3. 使用 .ts 扩展名编写测试

  1. typescript 运行
  2. /// <reference types="cypress" />
  3. describe('TypeScript Test', () => {
  4.     it('should work with TS', () => {
  5.         cy.visit('/');
  6.         cy.get('button').should('be.visible');
  7.     });
  8. });

五、配置持续集成（CI）

1. GitHub Actions 示例

创建 .github/workflows/cypress.yml：

  1. yaml 运行
  2. name: Cypress Tests
  3. on: [push]
  4. jobs:
  5.     cypress-run:
  6.         runs-on: ubuntu-latest
  7.         steps:
  8.             - name: Checkout
  9.                 uses: actions/checkout@v4
  10.             - name: Install Node.js
  11.                 uses: actions/setup-node@v4
  12.                 with:
  13.                     node-version: 18
  14.             - name: Install dependencies
  15.                 run: npm ci
  16.             - name: Start server and run Cypress tests
  17.                 run: |
  18.                     npm start &
  19.                     npx cypress run

六、常见问题与解决方案

1. 安装缓慢或失败

  • 使用淘宝镜像：

    1. bash 运行
    2. npm install cypress --save-dev --registry=https://registry.npmmirror.com

测试超时

  • 增加 defaultCommandTimeout 配置：

    1. javascript 运行
    2. // cypress.config.js
    3. defaultCommandTimeout: 15000,

跨域请求问题

  • 使用 cy.intercept() 拦截并处理请求：

    1. javascript 运行
    2. cy.intercept('GET', '/api/data', { fixture: 'data.json' });

七、验证安装

  • 启动 Cypress：

    1. bash 运行
    2. npx cypress open

  • 在测试运行器中，点击 example.cy.js 示例测试。

  • 若测试成功运行，说明 Cypress 已正确安装和配置。