Cypress-自动化测试-代码设计思路

自动化测试分为三部分，测试数据、执行代码、测试结果。将三者完全剥离开，而不要将测试数据与测试执行步骤混在一起，这样的测试用例才能增加可执行性和灵活性。

测试代码又分为两种，一种是功能的增删查改类代码，一种是流程代码。我们编写ui自动化代码的原则是：所有的UI执行步骤只做一遍，剩下的都通过调用接口方式来实现。

使用cypress实现一个项目的自动化测试:

一、在cypress.json配置全局信息

{
"baseUrl":"http:// IP:port",
"viewportHeight":1024,
"viewportWidth":1280
}

在integration中新建spec.js文件，编写具体的脚本。

describe('测试用例1'，()=>{

　　it('01 服务中心',()=>{

　　cy.visit('/')   //跳转到配置好的路径

　　})

})

二、创建前置用例

我们每一次执行用例时，都需要先登录到系统，再进入到需要测试的模块。测试完成后，清理掉测试数据，防止测试数据污染第二次的测试用例运行。

所以，登录到系统就是每一个测试用例的前置条件。那么我们将他提取出来，放在测试用例之前，在每次执行时使用。cypress有一个beforeEach、afterEach来放置这些公共用例。

describe('测试用例1'，()=>{

　　beforeEach('01 登录',()=>{

　　cy.visit('/')   //跳转到配置好的路径

　　})

　　it('测试中心'，()=>{

　　测试主体1

　　})

　　it('测试中心'，()=>{

　　　　测试主体2

　　})

})

 三、封装接口来代替需要重复执行的内容

在执行测试时，用户信息是执行很多功能模块的前置条件，那么添加用户信息的方法将在很多个功能模块中使用。这时，可以将添加用户信息封装为方法，

在其他模块使用时，只需要调用自定义的方法即可。在cypress的support文件中，新建js 文件，封装函数方法，support文件下的indext.js文件引入封装好的自定义方法。

support/informatin.js中

Cypress.Commands.add('add_information',()=>{

　　cypress.request({

　　url:

　　method:

　　body:{

　　name:'xingn'

　　age:23

　　}

　　})

})

support/indext.js中：

import ‘./informatin’