Part1: Cypress介绍

什么是Cypress

image.png

• Cypress是属于下一代前端测试工具，用来测试UI web application
• Cypress编程语言使用Java script
• Cypress解决了其它测试工具无法实现的痛点
• Cypress是在node.js上面部署并且引用npm的模块
• Cypress能够使用超过9成Node.js的语言模块，并且容易理解
• Cypress是一款易上手的框架
• 更快，更简单并且更加稳定的使用

Cypress的官网：

https://www.cypress.io/

Selenium VS Cypress的优缺点

• Selenium也是UI Automation工具，它的特点在于使用browser driver进行调度执行
• Cypress并不需要依赖browser driver,是直接在browser里面进行执行
• Cypress能够检查并且同时定位到browser中间DOM
• Cypress可以实时等待DOM加载，并不需要额外添加等待时间

image.png

Cyress的生态圈

• Cypress是一个open source工具
• Test Runner是用来添加测试用例，管理，执行测试用例

• Dashboard Service 可以提供执行报告功能

  
  
  image.png

Cypress与其他工具的区别

• Cypress不同于Selenium
• Cypres用于端对端的UI自动化测试
• Cypress是用于前端测试
• Cypress只能使用JavaScript
• Cypress可以用于开发，测试工作

• Cypress的特点是执行快，启动快

  
  
  image.png

Cypress工具有哪些功能

image.png

Cypress的缺陷

• 支持浏览器：Chrome，Canary，Electron
• Page Object Model 是不支持
• 文件读取方法少，读写文件格式有限
• 第三方的日志报告模板有限

Cypress安装-下载Node & NPM

• 进入node.js官网：https://nodejs.org/en/download/

• 根据使用系统进行下载就可以，本人使用win

  
  
  image.png

设置环境变量NODE_HOME

• 默认安装以后进入win的环境变量配置页面

• 创建NODE_HOME并且将安装路径填写正确

  
  
  image.png

创建Cypress工作目录

• 创建一个工作目录

  
  
  image.png

生成package.json文件

• npm init

  
  
  image.png

• 创建package文件内容

  
  
  image.png

image.png

安装Cypress

• 使用npm install cypress
  因为cpyress是需要访问国外网址，下载速度比较慢

image.png

image.png

• 使用yarn安装

  
  
  image.png

• 使用安装包
  下载地址：

  
  
  image.png

使用Cypress

• 本人下载zip文件，解压到工作目录中就可以找到Cypress.exe

  
  
  image.png

• 双击执行文件打开Cypress
  暂时只有英文版本，没有本地化

  
  
  image.png

• 打开example文件，并查看相关测试用例
  所有的demo文件都是js格式，当点击某一个文件后，Cypress就开始执行脚本

  
  
  image.png

• 查看需要执行的浏览器
  本人使用Chrome进行测试，Cypress支持的浏览器不多，但是常用浏览器都可以使用

image.png

• 执行单个，多个测试用例

1. 如果单个测试用例的执行，只需要单击指定的js文件就开始执行工作

2. 如果需要执行多条测试用例，需要点击“Run * integration specs”

   
   
   image.png
3. 如果执行多个测试用例，也可以放入commands.js文件中，后面介绍

总结

根据官方文档有很多API，Help信息可以查询，上手难度不大。
文档也配合响应的视频，图片使用。
使用范围有限，比如只支持浏览器测试，而且支持浏览器数量有限。
生成报告比较弱，没有很好的第三方支持，如果需要比较详细的报告，需要在官网付费购买。