背景：
前一段时间，在前端开发同学的推荐下，了解到一个前端自动化测试工具Cypress，趁着这个机会，将自己的调研记录以及在项目上的实践进行总结。如果想了解更多的小伙伴，可以去cypress官网：https://www.cypress.io/ 了解更多的内容。
环境准备：
1. 工具：vs code
下载地址：https://code.visualstudio.com/
配置中文插件：
ctrl shift p 后输入 Configure Display Language
点击Insatall additional languages...
在搜索框输入chinese后点击对应的istall后启用即可
2. 环境：node.js
下载地址：https://nodejs.org/en/
包管理工具yarn：https://yarn.bootcss.com/
3. 安装cypress以及配置
在vscode中打开你的项目，在终端中输入指令后，等待安装完成：
npm install cypress --save-dev
继续安装插件：
npm install eslint-plugin-cypress --save-dev npm install --save-dev eslint-plugin-chai-friendly
安装完插件之后进行配置：
1. 在项目根目录下创建2个文件：package.json和.eslintrc.json，配置以chrome浏览器运行用例.
这里需要注意版本为你上面安装插件后的版本:
4. 启动cypress服务
npm run cypress:open
启动之后会弹出一个弹窗，首次启动后，cypress会自动生成integration文件夹，里面是一些case，下面这个弹窗中的case就是该文件夹下examples下的case：
5. 运行case
点击弹窗内的任意一个自动生成的case，我们会看到再弹出一个弹窗，进行case的执行：
6. 编写测试用例
接下来我们自己编写一个很简单的用例，来看一下效果：
case：访问搜狗搜索网页并验证title是否正确
编写完成后，保存。然后在终端输入启动cypress服务命令，稍等就会开始运行case：
Cypress有个小优点就是当你改完case后保存，会自动执行case，不需要再次run，这样可以节省调试case的时间，同时，在运行结果的的左边是每一步的记录，鼠标移动到哪一步，就会展示当时的那个页面而不是截图也就是Cypress的特殊的snapshot 功能：
在运行完case后，我们可以去cypressscreenshots中查看截图。
下面是我在项目中的运用，在将Cypress引到前端项目中还是遇到不少问题，先在这里先让大家看下成果，下次分享再具体的将实施步骤以及遇到的问题总结出来：
case:
运行结果：
Cypress的各种方法的使用以及划分还需要感兴趣的小伙伴自己去实践，同时也预祝大家元旦快乐~~我们下期见~~~
