自动化测试框架[Cypress 自定义Mock Server]

以前端向后端发送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以交互模式运行测试文件，可在命令日志中查看到详细的请求及返回结果