一，概览
Cypress是目前非常流行的一款测试工具，它免费，开源，可以在本地install&run。
针对用户：开发或者QA工程师
支持的测试类型：E2E，组件测试，单元测试，集成测试
特点 :
- 可以准确记录每一步发生了什么
- 可以直接用浏览器调试工具debug
- 自动等待：没有回调地狱
- 可以对服务器响应以及计时器等的行为进行校验以及控制
- 网络控制，对边缘测试非常有用
- video/screenshots
- 跨浏览器测试
二，前置工具准备
-
node js(用来运行cypress项目的工具)安装：
Node.js
-
打开命令行工具，输入以下命令，检验node&npm安装是否成功：
node --version
npm --version
- VSCode（代码编辑器，用来编写cypress测试脚本）安装：code.visualstudio.com/
三，实现一个E2E Test Demo
对cypress熟练后可以手动创建各种配置文件以及测试脚本文件，直接运行。此demo是利用cypress的视图窗口自动生成配置文件以及测试脚本例子文件。
1. 新建一个项目并进行配置
- 在你的个人项目文件夹下新建一个文件夹：cypress-demo
- 用代码编辑器vscode打开此项目：点击File → Open Folder，选择cypress-demo，如图（目前文件夹下什么都没有）：
- 项目配置初始化：
- 点击Terminal → New Terminal，打开运行终端
- 在终端输入以下命令，完成项目配置初始化
npm init
如图，输入npm init后一直按Enter键，会生成项目的配置信息—package.json文件，里面的参数具体都是什么含义之后会讲
- 安装cypress：在运行终端输入以下命令，来安装cypress到此项目下
npm install cypress --save-dev
安装成功后，我们的目录结构以及package.json文件会有所变化，如下图：
node_modules: 里面包含这个项目所有需要用到的第三方插件，此时，里面包含我们需要使用的cypress
package-lock.json: 此文件是自动生成，目的：当你这个项目是多人共同开发，为了保证所有人用到的第三方插件都是同一个版本
- 配置项目运行指令
配置项目运行指令之前，需要简单介绍一下package.json里各个字段的含义，见图
接下来，我们需要在运行指令里配置一个指令，如下图：
以上，我们的demo项目的基本配置都已经完成了
2. 用命令行打开cypress视图窗口
在终端输入以下命令
npm run open
如下图
运行时程序会自动打开 cypress 窗口，如下图：
点击continue。
3. 用cypress视图窗口自动生成cypress的配置文件
- 点击E2E Testing, 之后点击Continue:
在这一步，观察文件结构会发现cypress自动生成了一些cypress的配置文件，以及cypress文件夹
2. 指定浏览器打开:
会自动打开chrome浏览器
4. 自动生成测试脚本样例文件并运行样例文件
选择生成 new spec（只有一个非常小的片段，测试访问一个网站），Scaffold example specs会更全面，按需选择：
并且都点确定，就可以看到cypress在自动运行example的文件，以及运行结果。
测试脚本的样子：
运行结果：访问此网站失败，测试不通过
以上，我们就大概体验了cypress是怎么做自动化测试的，也可以看到运行结果，接下来我们还要更深入去研究cypress怎么定位元素，怎么断言，测试不通过时生成video/screenshots的记录，以及怎么去封装一些全局的功能（例如登录），可以让我们不用每次都去写登录。
