前言

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

单元测试

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

集成测试

测试过程跨多个单元，比如组件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的优势

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

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

与其他框架的差别

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

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

一些思考

为什么要做端到端的测试？

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

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

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

关于测试覆盖率：

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

UI自动化测试框架Cypress初探

前言