Cypress自动化测试应适配本地还是预发布环境？GitHub CI/CD配置方法

一、优先选择预发布（Staging）环境编写测试 #

别选本地localhost环境，原因很直接：

• CI环境里启动本地服务需要额外配置安装依赖、启动前后端服务、等待服务就绪，容易出环境依赖问题，拖慢测试流程。
• 预发布环境是和生产环境最接近的镜像，能覆盖真实用户的访问场景，测试结果更可靠，提前发现生产可能出现的问题。
• 如果项目还没搭建预发布环境，才考虑在CI里启动本地服务跑测试，但这只是过渡方案，建议尽快搭建预发布环境。

二、Cypress测试编写方式 #

1. 基础测试结构 #

用Cypress的describe（测试套件）和it（测试用例）组织代码，比如一个登录流程测试：

describe('登录功能测试', () => {
  beforeEach(() => {
    // 每个用例前访问测试环境登录页
    cy.visit(Cypress.env('TEST_URL') + '/login');
  });

  it('输入正确账号密码能成功登录', () => {
    cy.get('#username').type(Cypress.env('TEST_USERNAME'));
    cy.get('#password').type(Cypress.env('TEST_PASSWORD'));
    cy.get('button[type="submit"]').click();
    // 断言登录后跳转到首页
    cy.url().should('include', '/dashboard');
    // 断言首页显示用户昵称
    cy.get('.user-nickname').should('be.visible').and('contain', '测试用户');
  });

  it('输入错误密码会显示错误提示', () => {
    cy.get('#username').type(Cypress.env('TEST_USERNAME'));
    cy.get('#password').type('wrong-password');
    cy.get('button[type="submit"]').click();
    cy.get('.error-message').should('be.visible').and('contain', '账号或密码错误');
  });
});

2. 环境配置 #

在cypress.config.js里配置基础环境变量，或者通过CI传递：

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    baseUrl: Cypress.env('TEST_URL') || 'https://staging.your-project.com',
    // 其他配置项
  },
});

3. 避免硬编码 #

• 用Cypress的fixtures存储测试数据，比如创建cypress/fixtures/users.json：

{
  "validUser": {
    "username": "test-user",
    "password": "test-pass123"
  },
  "invalidUser": {
    "username": "test-user",
    "password": "wrong-pass"
  }
}

然后在测试里引用：

cy.fixture('users').then((users) => {
  cy.get('#username').type(users.validUser.username);
  cy.get('#password').type(users.validUser.password);
});

4. 核心操作与断言 #

常用操作：cy.get()定位元素、cy.click()点击、cy.type()输入、cy.wait()等待（尽量少用，优先用断言等待）；
常用断言：should('be.visible')（元素可见）、should('contain', text)（包含文本）、should('have.value', value)（输入框值正确）。

三、GitHub CI/CD集成步骤 #

1. 创建Workflow配置文件 #

在项目根目录创建.github/workflows/cypress-test.yml，内容示例：

name: Cypress E2E Tests
on:
  # 触发条件：推送到main分支，或者提交PR到main分支
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取代码
        uses: actions/checkout@v4

      - name: 设置Node.js环境
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: 安装依赖
        run: npm ci

      - name: 安装Cypress二进制文件
        run: npx cypress install

      - name: 运行Cypress测试
        env:
          # 从GitHub Secrets读取环境变量
          TEST_URL: ${{ secrets.STAGING_URL }}
          TEST_USERNAME: ${{ secrets.TEST_USERNAME }}
          TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}
        run: npx cypress run

      - name: 上传测试结果（失败截图、视频）
        uses: actions/upload-artifact@v4
        with:
          name: cypress-results
          path: |
            cypress/screenshots
            cypress/videos
        # 不管测试成功还是失败都上传
        if: always()

2. 配置GitHub Secrets #

• 打开GitHub仓库的Settings -> Secrets and variables -> Actions -> Secrets
• 添加以下密钥：
  • STAGING_URL：预发布环境的URL（比如https://staging.your-project.com）
  • TEST_USERNAME：测试用账号
  • TEST_PASSWORD：测试用密码

3. 优化测试速度 #

• 用actions/cache缓存node_modules和Cypress二进制文件，减少重复安装时间：

- name: 缓存依赖和Cypress二进制文件
  uses: actions/cache@v3
  with:
    path: |
      node_modules
      ~/.cache/Cypress
    key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-npm-

4. 测试结果查看 #

• 每次Workflow运行后，在Actions页面可以看到测试日志；
• 如果测试失败，下载cypress-results artifact，查看截图和视频，定位问题。

内容的提问来源于stack exchange，提问作者Ravi