Cypress实践记录

背景：

前一段时间，在前端开发同学的推荐下，了解到一个前端自动化测试工具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后，我们可以去cypress\screenshots中查看截图。

下面是我在项目中的运用，在将Cypress引到前端项目中还是遇到不少问题，先在这里先让大家看下成果，下次分享再具体的将实施步骤以及遇到的问题总结出来：

case:

运行结果：

Cypress的各种方法的使用以及划分还需要感兴趣的小伙伴自己去实践，同时也预祝大家元旦快乐~~我们下期见~~~