用Cypress做接口测试------不止于UI的全能选手
提到Cypress，很多人觉得它只能做UI自动化，但其实它在接口测试方面同样强大。相比Postman这类工具，Cypress能无缝衔接UI操作和接口调用，特别适合端到端场景。这一章咱们就来解锁Cypress的接口测试技能。
一、发起接口请求：cy.request()的用法
Cypress用cy.request()命令发起HTTP请求，支持GET、POST、PUT、DELETE等所有常用方法，语法简单直接：
1. 基础用法：GET请求
比如调用用户信息接口，获取数据后做断言：
javascript
it('获取用户信息接口返回正确', () => {
// 发起GET请求
cy.request('https://api.example.com/user/1')
.then((response) => {
// 断言状态码是200
expect(response.status).to.equal(200)
// 断言返回数据中的用户名正确
expect(response.body.name).to.equal('jane.lane')
// 断言用户ID存在
expect(response.body).to.have.property('id', 1)
})
})2. 带参数的POST请求
登录接口通常用POST方法，需要传请求体（body）：
javascript
it('登录接口返回token', () => {
cy.request({
method: 'POST', // 请求方法
url: '/api/login', // 接口地址（会自动拼接baseUrl）
body: { // 请求体
username: 'jane.lane',
password: 'password123'
},
headers: { // 请求头（可选）
'Content-Type': 'application/json'
}
}).then((response) => {
// 断言登录成功，返回token
expect(response.status).to.equal(200)
expect(response.body).to.have.property('token')
// 保存token，供后续接口使用
Cypress.env('token', response.body.token)
})
})3. 带认证的请求
很多接口需要认证（比如JWT令牌），可以在请求头里带认证信息：
javascript
it('带token访问个人中心接口', () => {
cy.request({
method: 'GET',
url: '/api/profile',
headers: {
// 从环境变量取之前保存的token
'Authorization': `Bearer ${Cypress.env('token')}`
}
}).then((response) => {
expect(response.status).to.equal(200)
// 断言返回的是当前登录用户的信息
expect(response.body.username).to.equal('jane.lane')
})
})二、接口测试与UI测试结合：端到端场景
Cypress的优势在于能把接口调用和UI操作无缝结合，比如：
- 用接口快速创建测试数据（比UI操作快得多）；
- 再用UI操作验证数据展示是否正确。
举个例子：测试"用户下单后，订单列表显示正确"
javascript
it('下单后订单列表显示新订单', () => {
// 步骤1：用接口快速创建订单（代替UI操作的"加购→结算"）
cy.request({
method: 'POST',
url: '/api/orders',
headers: {
'Authorization': `Bearer ${Cypress.env('token')}`
},
body: {
productId: 1001,
quantity: 2
}
}).then((response) => {
expect(response.status).to.equal(201) // 201表示创建成功
// 保存订单ID，供后续验证
Cypress.env('orderId', response.body.id)
})
// 步骤2：用UI访问订单列表，验证新订单是否显示
cy.visit('/orders')
cy.get(`[data-cy=order-${Cypress.env('orderId')}]`)
.should('be.visible')
.and('contain', '商品ID:1001')
.and('contain', '数量:2')
})这种方式既快又稳定------用接口绕过长时间的UI操作，用UI验证用户实际看到的内容。
三、处理接口依赖：前置条件准备
复杂场景中，接口之间可能有依赖（比如"评论接口"依赖"登录"和"创建文章"）。可以用beforeEach提前准备前置条件：
javascript
describe('评论接口测试', () => {
let articleId // 文章ID（评论的前置条件）
// 测试前准备：登录→创建文章
beforeEach(() => {
// 1. 登录
cy.request({
method: 'POST',
url: '/api/login',
body: { username: 'jane', password: '123' }
}).then((res) => {
Cypress.env('token', res.body.token)
})
// 2. 创建一篇文章，供后续评论
cy.request({
method: 'POST',
url: '/api/articles',
headers: { 'Authorization': `Bearer ${Cypress.env('token')}` },
body: { title: '测试文章', content: '欢迎评论' }
}).then((res) => {
articleId = res.body.id
})
})
// 测试评论接口
it('发表评论成功', () => {
cy.request({
method: 'POST',
url: `/api/articles/${articleId}/comments`,
headers: { 'Authorization': `Bearer ${Cypress.env('token')}` },
body: { content: '这是一条测试评论' }
}).then((res) => {
expect(res.status).to.equal(201)
expect(res.body.content).to.equal('这是一条测试评论')
})
})
})四、接口测试的优势与适用场景
相比专门的接口测试工具（如Postman、JMeter），Cypress做接口测试的优势在于：
- 无缝衔接UI：接口和UI测试用例可以写在同一个文件，共享数据和环境配置；
- 复用认证信息：登录状态（如cookie、token）自动保存，不用手动处理；
- 灵活的断言：支持Chai断言库的所有语法，断言逻辑可以很复杂。
适合用Cypress做接口测试的场景：
- 端到端流程中的接口验证（如"下单→支付→发货"全链路）；
- 需要结合UI状态的接口测试（如"修改用户信息后，个人页展示正确"）；
- 临时接口调试（写几行代码就能跑，比Postman手动填参数快）。