UI自动化测试框架Cypress初探

前言

开发中经常使用的三种测试方式：

• 单元测试

经过提供输入并确保输出符合预期，对诸如函数或类等级别的单个单元进行测试。

• 集成测试

测试过程跨多个单元，好比组件API、UI等，确保单元间协同工做符合预期。

• 功能测试

也叫e2e测试，经过编写测试用例，自动化模拟用户操做，确保组件间通讯正常。

CyPress简介：

CyPress是在mocha式API基础上构建的一套开箱可用的测试框架，对比其余测试框架，它提供一套本身的最佳实践方案，无需其余测试工具库，配置方便简单但功能异常强大，可使用webpack项目配置，还提供了一个强大的GUI图形工具。因此做为常用JavaScript开发语言的人，会很是容易入门这个自动化测试框架。

在vue-cli3中也对自动化测试作了集成，在vue-cli中有两种自动化测试框架，其中的一种就是cypress，这也是为何我选择这一款自动化测试框架，针对咱们目前项目大部分使用的vue技术栈，也能更好的应用于实际业务当中。

安装

CyPress能够经过yarn add cypress 或 npm install cypress安装，也能够在vue-cli中选择集成，而工程目录里也会出现一个cypress的文件夹，用来存放测试用例。下面简要介绍下cypress下的各个子文件夹的做用：

cypress //cypress目录
    ---- fixtures //测试数据配置文件，可使用fixture方法读取
    ---- integration //测试脚本文件
    ---- plugin //插件支持
    ---- support //支持文件
    -cypress.json //cypress全局配置文件复制代码

运行

按照如上所示安装好以后，下面就来运行一下来了解这个框架的测试流程。在vue-cli中集成的cypress有已经配置好的命令可运行npm run test:e2e，而在老的项目中咱们可使用node_modules/.bin/cypress open的命令运行。

输入运行命令以后，咱们会看到出现以下的界面。

在这个页面中咱们会看到咱们所编写的测试用例的js文件，而后能够选择一个或者选择Run all specs来执行用例文件。运行以后会打开一个新的chrome页面，这里咱们能够看到用例文件中的每一条测试语句的执行状态，而且能够看到他的执行过程和执行结果（绿色表示成功、红色表示失败）。

在chrome页面的右半部会显示每一个节点的快照信息，而且可以对比以前和以后的变化差异，能够容易的让开发者感觉到执行某个测试语句先后页面发生的变化。

语法

在这里会对CyPress的语法作一个简要介绍，具体可查看官方文档。

• 查询元素

查询的语法很是近似于jQuery的元素选择器，例如：JQ->$('.my-selector')、CY->cy.get('.my-selector')

• 文本内容查询

匹配内容是否符合预期使用 cy.get('XX').contains('inner')，inner为预期的内容值

• 文本输入

当须要在输入框输入值时使用type关键字

• 断言语句

须要判断元素的内容、value、类名等信息可以使用should('have.attributs',value)

• 命令能够是promise的形式

cy.get('button').then(($btn)=>{})

• 元素交互

多种动做命令：blur、focus、clear、check、select等

• 超时机制

可根据不一样的需求修改超时时长（大多数命令超时默认为4秒）

• 条件测试

可使用if else进行条件判断

• 钩子函数

CyPress提供了一些钩子函数before、beforeEach、after、afterEach

对于钩子函数的功能介绍：

• before(()=>{//在所有案例执行以前执行一次})
• after(()=>{//在所有案例执行以后执行一次})
• beforeEach(()=>{//在每一条案例以前执行})
• afterEach(()=>{//在每一条案例以后执行})

自动化测试流程图

CyPress的优点

1. 上手快、文档详细，官网带有视频教程（很是适合新手）
2. 使用js语法对前端开发者友好
3. 执行速度，优点在于编辑保存脚本后执行速度会优于selenium，可以保证快速验证界面功能
4. 强大的快照功能，能够显示在某一条测试语句先后的页面比对
5. 工具提供控件定位：1.点击选择器->2.点击定位元素->3.复制生成代码

1. 提供多种元素交互api，例如：blur、focus、clear、select、dbclick
2. 自带GUI工具，能够看到整个测试过程，也可录屏

与其余框架的差异

大多数测试工具（如Selenium）经过在浏览器外部运行并在网络上执行远程命令来运行。Cypress偏偏相反，Cypress在与你的应用程序相同的生命周期里执行。

Cypress背后是Node服务进程。Cypress和Node进程不断进行通讯，同步和执行任务。访问这两个部分（前端和后端）使咱们可以实时响应你的web应用程序的事件，与此同时也能完成须要更高权限的任务。

一些思考

• 为何要作端到端的测试？

在负责的系统中会有一些比较稳定的模块（不常常改动），在有些时候改了其余模块的一小块可能会影响到稳定的模块，而这时就须要对这个模块作回归测试以保不受影响能够稳定使用，若是每一次都须要开发人员对其进行回归是耗时耗力的，而这时就须要了咱们为这个模块编写的e2e测试用例，只须要执行一下这个测试用例就能够看到模块的各项功能是否可以完整运行。

• 对于编写的测试用例要加以注释或有文档：

测试用例是一个能够上传到仓库的文件，因此为了方便别人维护测试用例或者是了解你的测试流程，请务必要写上测试流程的注释，或者创建一个专门用于统计测试用例的文档来记录有哪些测试用例和用例的内容，这样可以很好的保证用例的完整性、可读性和可维护性。

• 关于测试覆盖率：

目前cypress没有内置测试覆盖率的统计功能，目前可使用Chrome自带的来查看。在GUI打开的测试浏览器中打开devtools，切换到Sources，按下cmd+shift+p（或ctrl+shift+p），输入coverage，选择从新刷新并统计代码执行覆盖率。

参考资料

• www.cypress.io/
• docs.cypress.io/zh-cn/guide…
• docs.cypress.io/zh-cn/guide…