cypress初介绍

522 阅读7分钟

前端自动化测试

维基百科关于自动化测试的定义:

在软件测试中,测试自动化(英语:Test automation)是一种测试方法,使用特定的软件,去控制测试流程,并比较实际的结果与预期结果之间的差异。通过将测试自动化,可以让正式的测试过程中的必要测试,可以反复进行;通过这种方法,也可以将难以手动进行的测试,交由软件来做。测试自动化的最大优势就是可以快速而且反复的进行测试。

在自动化测试中存在一个金字塔模型,从下往上依次是单元测试、服务测试、UI测试;从图中也可看出,越下层效率越高,成本越低,但越下层实现专业性要求越高,并且投入应当越多,这是金字塔结构主要提出的观点,认为单元测试的稳定性和投入保证了产品质量。

image.png

这也侧面反映出在实际情况中,我们经常听到的是针对后端的单元测试,而前端的测试用例少之又少,总结下来的原因主要是前端不同于后端,前端属于GUI软件,是有界面的,前端项目通常UI变化频繁,用户界面是脆弱的,测试和修改的经济成本和时间成本较高。

但这并不意味着前端就不需要自动化测试。假设一下,如果没有自动化测试,那开发人员以及测试人员要对前端进行测试或者定位问题时,通常就要采用console.log()或者debugger或者手动在界面上点点点,如果代码发生改动,那么这些操作必将重新操作一遍,繁琐且费时费力,如果能采用自动化测试,那么第一次写的测试用例就可重复使用,尤其是对于组件的开发,会在后续不断的迭代,如果没有自动化测试,每次迭代都需要手动把所有功能重新测试一下,引入自动化测试后能在一定程度上解放我们的双手,减少手动测试的时间和次数。其次,目前市面上前端自动化测试的方案已经比较成熟了,成本和效率问题也得到了很大的改善,所以我们不妨试一下前端的自动化测试。

cypress具体介绍

cypress是一种自集成的E2E测试框架,它提供了一套完整的端到端测试,无须借助其他外部工具,安装后即可快速地创建、编写、运行测试用例,且对每一步操作都支持回看。

E2E测试:假设我们编写的每个功能程序都是一个黑匣子,最终用户也只会看到这个黑匣子,那么站在用户的角度来看并不需要知道这个黑匣子内部是什么东西也不需要知道怎么实现的,我只管知道最终效果是不是我们想要的。  那么映射到前端这边的话就是:我不管你逻辑使用什么框架什么逻辑写的,我只想知道浏览器上我要的交互效果,ui展示效果是不是正确的,功能使用上是不是正确的,那么这就叫E2E测试。

不同于其他只能测试UI层的前端测试工具,cypress允许编写所有类型的测试,覆盖了测试金字塔模型的所有测试类型:界面测试、集成测试、单元测试。cypress底层协议不采用web driver

WebDriver:是一种用于Web应用程序的自动化工具,它提供了一套很好的API,不依赖于任何测试框架,除了必要的浏览器框架

cypress的优势

  1. 安装简单(除了node和npm之外不需要额外安装其他任何软件)
  2. 运行速度快,不需要web driver来驱动浏览器
  3. 脚本实时调试,只要保存脚本就会自动运行
  4. 兼容性测试: 支持Chrome、Firefox浏览器
  5. 失败用例自动保存截图(路径:../cypress/screenshots)
  6. 运行过程自动录制视频(路径:../cypress/videos)
  7. 人人可用: 测试人员和开发人员都能很好的上手

cypress的简单上手

  1. 新建并打开文件夹
mkdir cypress-demo
cd cypress-demo
  1. 安装cypress
npm i cypress --save-dev
  1. 配置package.json
{
    "scripts": {
        "cypress:open": "cypress open"
    }
}

  1. 启动
npm run cypress:open

运行后出现如图所示,图中的内容是cypress官网提供的example,此处只是先了解一下cypress的运行,下文将介绍如何编写具体的测试用例

图1.png 点击图中红框的actions.spec.js,cypress将自动启动浏览器(默认是chrome浏览器)进行自动化测试。

图2.gif 可以看到,cypress会自动运行测试案例,从视觉上看就像程序模拟人在手动点点点。

cypress 文件结构

打开cypress-demo文件夹,可以看到根目录下有一个cypress文件夹和cypress.json文件,结构如图所示 image.png

cypress-demo
├─ cypress
│  ├─ fixtures   // 测试用例的外部静态数据,通常存储在.json文件中,默认在此文件夹中,但也可配置到其他文件夹
│  │  └─ example.json
│  ├─ integration // 测试用例,.js/.jsx/.coffee/.cjsx文件都将被识别成测试文件,默认放置在此文件夹中,但也可配置到其他文件夹
│  ├─ plugins   // 插件配置,通过插件可以修改或者扩展cypress的内部行为,在每个测试文件运行之前,cypress都会自动加载插件文件(默认是plugins/index.js),但也可配置到其他文件夹
│  │  └─ index.js
│  └─ support  // 自定义方法,通常是底层通用函数或全局默认配置,在每个测试文件运行之前,cypress都会自动加载支持配置文件(默认是support/index.js),但也可配置到其他文件夹
│     ├─ commands.js
│     └─ index.js
├─ cypress.json // 全局配置化文件,用于配置cypress的通用项,如文件配置路径,全局url,截屏视频配置等
├─ package-lock.json
└─ package.json

cypress 界面元素介绍

image.png

  1. 当前测试文件下运行成功的案例和失败的案例
  2. 总案例数运行时长
  3. 重新执行
  4. 案例执行区,在测试执行过程中,能看到案例是逐个逐条进行的,点击单个案例,能看到此案例的执行步骤,点击一个步骤,能在区域⑧中看到每个步骤的执行结果
  5. 元素选择器,作用类似于浏览器控制台中的”元素“选项,点击⑤后,在区域⑧中选择一个dom元素,可以看到此元素对应的类名,帮助我们在书写测试案例时更好的选中dom
  6. 测试案例所访问的url
  7. 视口的分辨率
  8. 界面展示区,当区域④中测试案例执行时,区域⑧中将自动执行该测试案例的执行结果

cypress的语法规则可直接在官网查看

cypress在vue项目中使用

新建vue项目时引入cypress

  1. 安装vue-cli(如果已安装,可直接从步骤2开始)
npm install @vue/cli -g
  1. 新建vue项目
vue create vue-cypress-demo
  1. 选择Manually select features

image.png 4. 选中E2E Testing,其他选项按需选择

image.png 5. 选中Cypress (Chrome only)

步骤4和步骤5之间跳过的内容可根据需要自行选择,此处仅介绍与cypress相关的配置

image.png 6. 启动

npm run test:e2e

至此,一个简单的包含cypress的vue工程就建好了。通过此方式生成的项目与单独的vue项目相比,在根目录下自动生成了一个test/e2e的文件夹和cypress.json文件,其内部结构与上述cypress-demo/cypress结构一致。

已有vue项目中引入cypress

  1. 安装vue-cli(如果已安装,可直接从步骤2开始)
npm install @vue/cli -g
  1. 安装插件
vue add @vue/e2e-cypress
  1. 启动
npm run test:e2e