以前端向后端发送Ajax/XHR请求为例，Cypress允许你的测试直接访问XHR对象，从而能在整个软件生命周期里轻松测试Ajax/XHR请求并对它的属性进行断言，此外Cypress还允许对请求返回结果进行Stub和Mock

搭建Mock Server

以json-server为例，搭建一套REST API格式的Mock Server，首先执行​​npm install -g json-server​​​进行安装，然后执行​​mkdir mockServerSample​​创建一个新的项目，

准备Mock数据

在新项目的根目录下创建一个json文件并命名为db.json，将如下内容写入

{
  "user":[
    {"id":1,"title":"Test","name":"davieyang"}
  ],
  "books":[
    {"id":1,"name":"Selenium","year":"year"}
  ]
}

启动JSON Server

将命令行引导到新建的项目根目录下，​​cd mockServerSample​​​,然后执行命令​​json-server --watch db.json​​启动JSON Server

查看Mock资源

服务启动后，用浏览器便可以查看资源，例如​​http://localhost:3000/user​​​和​​http://localhost:3000/books​​​和​​http://localhost:3000​​,到此一个简单的Mock Server建完了

使用Mock Server进行测试

安装并配置

首先，在mockServerSample目录下安装Cypress，然后配置cypress.json，写入如下内容

{
  "baseUrl":"http://localhost:3000"
}

配置package.json，写入如下内容

"script":{
  "mock":"cypress open",
}

创建测试用例

在integration路径下，创建测试用例，例如如下典型例子

//testGet.js
describe('测试GET',()=>{
  it('测试GET', ()=>{
    cy.request('/user')
      .its('headers')
      .its('content-type')
      .should('include','application/json')
  })
})
//testGet.js
describe('测试GET',()=>{
  it('测试GET', ()=>{
    // "?id=1"获取id=1的user
    cy.request('/user?id=1')
      .its('headers')
      .its('content-type')
      .should('include','application/json')
  })
})
//testGet.js
describe('测试GET',()=>{
  it('测试GET', ()=>{
    //“?q=davieyang”, 模糊查询，获取所有包含davieyang的列表项
    cy.request('/user?q=davieyang')
      .its('headers')
      .its('content-type')
      .should('include','application/json')
  })
})
//integration文件夹下创建testPost.js
describe('测试POST APAI', ()=>{
  const item={"id":2, "title":"tony", "name":"tony"}
  it('POST会新增一个用户', ()=>{
    cy.request({
      method:'POST',
      //添加user信息
      url:'/user',
      headers:{'Content-Type':'application/json'},
      body:item
      })
    cy.request('/user/').then((res)=>{
      expect(res.status).to.be.equal(200)
      expect(res.body.length).to.be.equal(5))
      })
    })
})
//integration文件夹下创建testPut.js
describe('测试PUT API', ()=>{
  const item={'title':'tony', 'name':'tony'}
  it('PUT会更新一个用户', ()=>{
    cy.request({
      method:'PUT',
      //制定更新id为1的用户
      url:'/user/1',
      headers:{'Content-Type':'application/json'},
      body:item
      })
    cy.request('/user/1').then((res)=>{
      expect(res.status).to.be.equal(200)
      expect(res.body.name).to.be.equal('tony')
      expect(res.body.title).to.be.equal('tony')
      })
    })
})
//integration文件夹下创建testDelet.js
describe('测试DELETE API', ()=>{
  const id=2
  it('DELETE删除一个用户', ()=>{
    cy.request({
      method:'DELETE',
      //删除user信息
      url:'http://localhost:3000/user/${id}',
      headers:{'Content-Type':'application/json'},
      })
    cy.request('http://localhost:3000/user').then((res)=>{
      expect(res.status).to.be.equal(200)
      expcet(res.body.length).to.be.equal(1)
      })
    })
})

运行测试

在Cypress以交互模式运行测试文件，可在命令日志中查看到详细的请求及返回结果