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

更新时间:2023-04-07 15:58:03 阅读：评论：0

前言

阅读本篇博文前，请确保已经阅读过自动化测试框架[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和任何用户定义的配置信息

全局配置项

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

超时

配置项默认值描述defaultCommandTimeout4000命令默认超时时间，单位毫秒execTimeout60000在cy.exec()命令执行期间，等待系统命令完成执行的超时时间，单位毫秒taskTimeout60000在cy.task()命令执行期间，等待任务完成执行的超时时间，单位毫秒pageLoadTimeoutpage60000等待页面加载或cy.visit()，cy.go()，cy.reload()命令触发其页面加载事件的超时时间，单位毫秒requestTimeout5000等待cy.wait()命令中的XHR请求发出的超时时间，单位毫秒responTimeout30000cy.request(),cywait(),cy.fixture(),cy.getCookie(),cy.getCookies(),cy.tCookie(),cy.clearCookie(),cy.clearCookies()和cy.screenshot()命令的响应超时时间，单位毫秒

文件夹&文件

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

配置项默认值描述fileServerFolder项目根目录filerver目录fixturesFoldercypress/fixturesfixtures默认文件夹，可更改默认值为fal来禁用它integrationFoldercypress/integration测试用例默认文件夹pluginsFilecypress/plugins/index.js插件默认文件夹，可以更改默认值为fal来禁用它supportFilecypress/support/index.js同样可以更改默认值为fal来禁用它videosFoldercypress/videos运行期间保存视频的默认路径screenshotsFoldercypress/screenshots测试失败或者cy.screenshot()命令引发的截图默认存放路径

可视视图

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

配置项默认值描述viewportHeig物理过程ht660被测应用程序视图下应用程序的默认高度，单位像素(可以使用cy.viewport()命令覆盖)viewportWidth1000被测应用程序视图下应用程序的默认宽度，单位像素(可以使用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 urname = '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=urname]').type(urname)cy.get('input[name=password]').type(password)cy.get('form').submit()// 断言，验证登陆成功则跳转到dashboard页面// 断言，验证用户名存在cy.url().should('include', '/dashboard')cy.get('h1').should('contain', 'jane.lane')})})})