自动化测试框架[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('当前环境变量为${JSON.stringify(Cypress.env())}')
})

自定义Cypress

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

全局配置项

配置项	默认值	描述
baseUrl	null	通常就设置为系统主域名
env	{ }	任何想用作环境变量的变量就都可以设置在env里
ignoreTestFiles	*.hot-update.js	忽略某些测试用例，被此选项规则匹配的测试用例不会被执行
numTestsKeptInMemory	50	保留在内存中的测试用例(主要是快照和命令数据)条数，默认50，过大将消耗大量内存
port	null	Cypress占用的端口号，默认随机生成
reporter	spec	在Cypress运行期间使用哪个reporter，例如Mocha内置的reporter，teamcity和junit等
reporterOptions	null	reporter支持的选项配置
testFiles	**/*.*	要加载的测试文件，可以指定具体文件，也可以模糊匹配
watchForFIleChanges	true	Cypress在运行中自动检测文件变化，当文件有变化时，则自动重新运行受影响的测试用例

超时

配置项	默认值	描述
defaultCommandTimeout	4000	命令默认超时时间，单位毫秒
execTimeout	60000	在cy.exec()命令执行期间，等待系统命令完成执行的超时时间，单位毫秒
taskTimeout	60000	在cy.task()命令执行期间，等待任务完成执行的超时时间，单位毫秒
pageLoadTimeoutpage	60000	等待页面加载或cy.visit()，cy.go()，cy.reload()命令触发其页面加载事件的超时时间，单位毫秒
requestTimeout	5000	等待cy.wait()命令中的XHR请求发出的超时时间，单位毫秒
responseTimeout	30000	cy.request(),cywait(),cy.fixture(),cy.getCookie(),cy.getCookies(),cy.setCookie(),cy.clearCookie(),cy.clearCookies()和cy.screenshot()命令的响应超时时间，单位毫秒

文件夹&文件

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

配置项	默认值	描述
fileServerFolder	项目根目录	fileserver目录
fixturesFolder	cypress/fixtures	fixtures默认文件夹，可更改默认值为false来禁用它
integrationFolder	cypress/integration	测试用例默认文件夹
pluginsFile	cypress/plugins/index.js	插件默认文件夹，可以更改默认值为false来禁用它
supportFile	cypress/support/index.js	同样可以更改默认值为false来禁用它
videosFolder	cypress/videos	运行期间保存视频的默认路径
screenshotsFolder	cypress/screenshots	测试失败或者cy.screenshot()命令引发的截图默认存放路径

可视视图

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

配置项	默认值	描述
viewportHeight	660	被测应用程序视图下应用程序的默认高度，单位像素(可以使用cy.viewport()命令覆盖)
viewportWidth	1000	被测应用程序视图下应用程序的默认宽度，单位像素(可以使用cy.viewport()命令覆盖)

更多的配置项可参考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
///<reference types="cypress"/>
describe('登陆', function(){
	// 此用户名密码为本地服务器默认
	const username = 'jane.lane'
	const password = 'password123'
	context('HTML表单登陆测试', function(){
		it('登陆成功, 跳转到dashboard页', function(){
		cy.log(`pageLoadTimeout当前值为:${Cypress.config('pageLoadTimeout')}`)
		Cypress.config('pageLoadTimeout', 10000)
		cy.log(`pageLoadTimeout当前值为:${Cypress.config('pageLoadTimeout')}`)
			cy.visit('http://localhost:7077/login')
			cy.get('input[name=username]').type(username)
			cy.get('input[name=password]').type(password)
			cy.get('form').submit()
			// 断言，验证登陆成功则跳转到dashboard页面
			// 断言，验证用户名存在
			cy.url().should('include', '/dashboard')
			cy.get('h1').should('contain', 'jane.lane')
			})
		})
	})

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

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