自动化测试框架[Cypress框架拆解]

前言

阅读本篇博文前，请确保已经阅读过自动化测试框架[Cypress测试实例凸显其优势]
阅读本篇博文前，请确保已经阅读过自动化测试框架[Cypress环境搭建与配置详解]

Cypress默认框架

在Cypress安装完成后，用cypress open命令首次打开Cypress，会自动进行初始化配置并生成一个默认的文件夹结构，如下图所示

fixtures

fixture通常配合cy.fixture()命令来使用，主要用来存储测试用例的外部静态数据，通常目录是在cypress/fixtures中，但也可以配置到另一个目录；静态数据通常存储在.json后缀文件里，例如自动生成的example.json

这里的数据通常是某个网络请求的对应响应部分，包括HTTP状态码和返回值，如果测试中需要对某些外部接口进行访问并依赖其返回结果，则可以使用fixtures而无须真正的访问这个接口，使用fixtures消除了对外部功能模块的依赖，可以使用fixtures提供的固定的期望的返回值，同时也因为无需真正的发送网络请求然后依赖其返回结果使得测试执行更有效率

integration

测试代码文件，默认位于cypress/integration路径下，也可以配置到另一个目录中，且以如下后缀的文件均会被Cypress视为测试文件

• .js文件:普通的Javascript编写的文件


• .jsx文件:带有扩展的Javascript文件，其中可能包含处理XML的ECMAScript


• .coffee文件:是一套Javascript的转译语言，相对于Javascript它的语法更严格


• .cjsx文件:CoffeeScript中的jsx文件

创建测试文件很简单，只要创建上述格式的文件，便可以使用Test Runner去执行

plugins

Cypress独一无二的优点便是测试运行在浏览器之内，但也带来了问题，就是在浏览器之外的通信变得很困难，为了解决此类问题，Cypress提供了现成的插件，当然也可以自定义插件，默认情况下插件位于cypress/plugins/index.js中，也可以配置到另一个目录下，在每个测试文件运行之前，Cypress都会自动加载插件文件cypress/plugins/index.js

通常情况下，插件的应用包括“

• 动态更改来自cypress.json,cypress.env.json,CLI或系统环境变量等


• 修改特定浏览器的启动参数


• 将消息直接从测试代码传递到后端

support

该路径下通常放置可重用的配置，例如通用函数或全局默认配置等，默认位于cypress/support/index.js,也可以配置到另一个目录，每个测试文件运行之前，Cypress都会自动加载cypress/support/index.js
实际使用非常简单，只需要在cypress/support/index.js文件中使用beforeEach()函数即可，例如要实现每次测试运行前打印出所有的环境变量，如下代码所示

beforeEach(function(){
cy.log(&＃039;当前环境变量为${JSON.stringify(Cypress.env())}&＃039;)
})


自定义Cypress

Cypress不仅支持用户自定义文件结构，还支持用户自定义Cypress的各项配置，Cypress通过cypress.json文件来实现各项配置的自定义，当一个项目被添加到Cypress中后，该文件就会被创建在与Cypress同级目录下，它用来保存projectId和任何用户定义的配置信息

全局配置项

超时

文件夹&文件

Cypress支持用户自定义文件结构

可视视图

Cypress在Test Runner运行期间，会显示一个可视视图

更多的配置项可参考Cypress官方

Cypress.config()

除了直接在cypress.json文件里更改配置项之外，Cypress还允许使用Cypress.config()去获取或者覆盖某些配置项，语法如下

// 获取所有config信息
Cypress.config()
// 获取指定配置项的信息
Cypress.config(name)
// 更改指定配置项的默认值
Cypress.config(name, value)
// 使用对象字面值设置多个配置项
Cypress.config(object)


实战

在cypress/support/index.js写入如下代码

beforeEach(function(){
cy.log(`当前测试系统环境变量为${JSON.stringify(Cypress.config())}`)
})


在cypress/integration/新建文件testConfig.js，并写入如下代码

// testLogin.js
///
describe(&＃039;登陆&＃039;, function(){
// 此用户名密码为本地服务器默认
const username = &＃039;jane.lane&＃039;
const password = &＃039;password123&＃039;
context(&＃039;HTML表单登陆测试&＃039;, function(){
it(&＃039;登陆成功, 跳转到dashboard页&＃039;, function(){
cy.log(`pageLoadTimeout当前值为:${Cypress.config(&＃039;pageLoadTimeout&＃039;)}`)
Cypress.config(&＃039;pageLoadTimeout&＃039;, 10000)
cy.log(`pageLoadTimeout当前值为:${Cypress.config(&＃039;pageLoadTimeout&＃039;)}`)
cy.visit(&＃039;http://localhost:7077/login&＃039;)
cy.get(&＃039;input[name=username]&＃039;).type(username)
cy.get(&＃039;input[name=password]&＃039;).type(password)
cy.get(&＃039;form&＃039;).submit()
// 断言，验证登陆成功则跳转到dashboard页面
// 断言，验证用户名存在
cy.url().should(&＃039;include&＃039;, &＃039;/dashboard&＃039;)
cy.get(&＃039;h1&＃039;).should(&＃039;contain&＃039;, &＃039;jane.lane&＃039;)
})
})
})


执行测试，结果如下图所示

本文地址：https://blog.csdn.net/dawei_yang000000/article/details/110205072