在Cypress自动化测试开发中，减少重复代码、提升测试资源复用率是优化测试项目结构的核心目标之一，合理的复用策略能大幅降低后续测试维护的成本。
Cypress测试复用的核心场景
测试复用主要覆盖两类场景，一类是多个测试用例中重复出现的操作步骤，比如用户登录、表单填充等通用流程；另一类是多个测试套件中需要共用的前置准备或后置清理逻辑，比如测试数据的初始化、环境的重置等。针对不同的场景，Cypress提供了对应的复用方案。
通过自定义命令复用通用操作
Cypress的自定义命令是最常用的复用方式，我们可以将高频重复的操作封装成全局可调用的命令，在所有测试文件中直接使用。自定义命令需要写在cypress/support/commands.js文件中，示例如下：
// 封装用户登录的自定义命令
Cypress.Commands.add('login', (username, password) => {
// 访问登录页
cy.visit('/login')
// 输入用户名
cy.get('[data-testid="username-input"]').type(username)
// 输入密码
cy.get('[data-testid="password-input"]').type(password)
// 点击登录按钮
cy.get('[data-testid="login-btn"]').click()
// 断言登录成功
cy.url().should('include', '/dashboard')
})
// 封装表单提交的通用命令
Cypress.Commands.add('submitForm', (formData) => {
Object.keys(formData).forEach(key => {
cy.get(`[data-testid="${key}-input"]`).type(formData[key])
})
cy.get('[data-testid="submit-btn"]').click()
})
封装完成后，在任意测试文件中都可以直接调用这些命令：
describe('用户相关功能测试', () => {
it('测试用户登录后访问个人中心', () => {
// 直接调用自定义登录命令
cy.login('test_user', 'test_password')
cy.visit('/profile')
cy.get('[data-testid="user-name"]').should('contain', 'test_user')
})
it('测试提交用户反馈表单', () => {
cy.login('test_user', 'test_password')
// 调用表单提交命令
cy.submitForm({
content: '测试反馈内容',
contact: 'test@ippipp.com'
})
cy.get('[data-testid="success-tip"]').should('be.visible')
})
})
通过公共函数复用测试逻辑
如果复用的逻辑不需要依赖Cypress的链式调用特性，也可以提取为普通的JavaScript函数，放在cypress/support/utils.js等公共文件中，测试文件中引入后使用。这种方式适合处理数据生成、参数校验等非DOM操作的逻辑。
// 公共工具函数：生成随机测试用户数据
export const generateTestUser = () => {
const randomSuffix = Math.random().toString(36).substring(2, 8)
return {
username: `test_user_${randomSuffix}`,
email: `test_${randomSuffix}@ipipp.com`,
password: 'Test123456'
}
}
// 公共工具函数：校验响应数据结构
export const validateResponseSchema = (response, expectedKeys) => {
expectedKeys.forEach(key => {
expect(response).to.have.property(key)
})
}
测试文件中引入使用的示例：
import { generateTestUser, validateResponseSchema } from '../../support/utils'
describe('用户注册接口测试', () => {
it('测试正常用户注册流程', () => {
const testUser = generateTestUser()
cy.request({
method: 'POST',
url: '/api/register',
body: testUser
}).then(res => {
expect(res.status).to.equal(200)
validateResponseSchema(res.body, ['code', 'message', 'userId'])
})
})
})
通过测试钩子复用套件级逻辑
对于同一个测试套件内多个用例共用的前置和后置逻辑，可以使用before、beforeEach、after、afterEach钩子实现复用，避免在每个测试用例中重复编写相同的准备和清理代码。
describe('购物车功能测试套件', () => {
// 整个套件执行前只执行一次的前置逻辑
before(() => {
// 初始化测试商品数据
cy.request('POST', '/api/init-test-goods', { goodsCount: 3 })
})
// 每个测试用例执行前都执行的前置逻辑
beforeEach(() => {
// 每个用例前都登录用户
cy.login('test_user', 'test_password')
// 清空购物车历史数据
cy.request('DELETE', '/api/clear-cart')
})
// 每个测试用例执行后都执行的后置逻辑
afterEach(() => {
// 重置页面状态
cy.visit('/')
})
// 整个套件执行后只执行一次的后置逻辑
after(() => {
// 清理测试产生的商品数据
cy.request('DELETE', '/api/clean-test-goods')
})
it('测试添加商品到购物车', () => {
cy.visit('/goods/1')
cy.get('[data-testid="add-cart-btn"]').click()
cy.get('[data-testid="cart-count"]').should('equal', 1)
})
it('测试购物车商品数量修改', () => {
// 先添加一个商品到购物车
cy.visit('/goods/1')
cy.get('[data-testid="add-cart-btn"]').click()
// 修改商品数量为2
cy.get('[data-testid="goods-count-input"]').clear().type('2')
cy.get('[data-testid="cart-count"]').should('equal', 2)
})
})
跨套件复用测试逻辑的方案
如果需要多个测试套件共用同一套前置逻辑，可以把共用的钩子逻辑提取到单独的文件中，再在需要的测试套件中引入。比如创建cypress/support/hooks.js文件：
// 导出共用的测试前置钩子
export const commonBeforeEach = () => {
cy.login('test_user', 'test_password')
cy.visit('/dashboard')
}
在多个测试套件中引入使用：
import { commonBeforeEach } from '../../support/hooks'
describe('订单功能测试套件', () => {
beforeEach(() => {
commonBeforeEach()
})
it('测试创建订单流程', () => {
// 测试逻辑
})
})
describe('优惠券功能测试套件', () => {
beforeEach(() => {
commonBeforeEach()
})
it('测试领取优惠券', () => {
// 测试逻辑
})
})
复用策略的选择建议
不同的复用策略适用场景不同，开发者可以根据实际需求选择：
- 如果是DOM操作类的通用步骤，优先选择自定义命令封装，方便在链式调用中直接使用
- 如果是数据处理、校验类的纯逻辑，优先选择公共函数提取，结构更清晰
- 如果是单个套件内的共用前置后置，优先使用测试钩子
- 如果是多个套件共用的前置后置，优先提取为公共钩子文件再引入
合理的组合使用这些策略，可以让Cypress测试项目的代码结构更清晰，后续维护和功能扩展的成本更低。