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

不念不忘少年蓝@ 2022-10-29 07:54 185阅读 0赞

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