什么是Cypress
image.png
- Cypress是属于下一代前端测试工具，用来测试UI web application
- Cypress编程语言使用Java script
- Cypress解决了其它测试工具无法实现的痛点
- Cypress是在node.js上面部署并且引用npm的模块
- Cypress能够使用超过9成Node.js的语言模块，并且容易理解
- Cypress是一款易上手的框架
- 更快，更简单并且更加稳定的使用
Cypress的官网：
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
- 执行单个，多个测试用例
- 如果单个测试用例的执行，只需要单击指定的js文件就开始执行工作
-
如果需要执行多条测试用例，需要点击“Run * integration specs”
image.png - 如果执行多个测试用例，也可以放入commands.js文件中，后面介绍
总结
根据官方文档有很多API，Help信息可以查询，上手难度不大。
文档也配合响应的视频，图片使用。
使用范围有限，比如只支持浏览器测试，而且支持浏览器数量有限。
生成报告比较弱，没有很好的第三方支持，如果需要比较详细的报告，需要在官网付费购买。
