若是想从头学起Cypress，能够看下面的系列文章哦html
https://www.cnblogs.com/poloyy/category/1768839.htmlnode
前言
这里的栗子项目时 Cypress 提供的，在 github 上，因此要 clone 到本地的话须要装 Git 哦！git
下载被测应用
进入要安装该应用的目录，cmd 敲github
git clone git@github.com:cypress-io/cypress-example-recipes.git
进入项目目录下，安装项目所需依赖包，敲web
npm install
安装成功后，项目的文件结构以下图；全部被测应用栗子都在 examples 文件夹中npm
启动被测应用
启动测试应用时，能够进入不一样子项目文件夹来启动不一样的应用；浏览器
假如，咱们要测试表单类型的登陆，能够打开如下被测应用服务器
cd examples\logging-in__html-web-forms>
启动本地server网络
npm start
启动成功后，cmd窗口将显示服务器的地址和端口函数
打开浏览器访问：http://localhost:7077/，便可看到登陆页面
快速测试登陆页面
首先，设计测试用例步骤
- 访问http://localhost:7077
- 输入用户名、密码，点击登陆
- 若是用户名和密码正确，则登陆成功，不然登陆失败
接下来，咱们来看看实现测试用例的步骤
建立测试
在此目录下 cypress安装路径\node_modules\.bin\cypress\integration ，建立一个 js 文件，好比：testLogin.js
integration文件夹
- Cypress 安装完毕后自动生成的文件夹
- 也是 Cypress 默认存放测试用例的根目录，任何建立在此目录下的文件都将被看成测试用例
编写测试用例
首先，要在网页上定位到用户名、密码输入框，此案例中使用标签+属性名来定位；最终测试代码以下
我们在后面再讲解代码的意思哦
运行测试
进入 Cypress 安装文件夹，cmd执行命令
yarn cypress:open
单击 testLogin.js，Cypress 会启动 Test Runner 运行测试，运行成功后，将看到运行结果页面；运行时长是真的快....
调试测试用例
前言
- 测试用例运行时，不免会发生各类状况致使运行失败；快速定位发生错误的位置，了解错误信息，一直是自动化测试的痛点
- 而 Cypress 提供了多种 debug 能力，能够在测试运行错误时直达错误位置，并支持回放错误发生时的上下文信息，可直接看到测试失败的缘由
Cypress Debug 能力介绍
每一个命令均有快照且支持回放
像下图，左侧就是测试步骤，右侧是测试页面
- 鼠标 hover 测试步骤，在右侧能够看到执行该命令时的页面效果
- 鼠标点击测试步骤，能够锁定该步骤，而后查看上下文信息
支持查看测试运行时发生的特殊页面事件
包括：
- 网络 XHR 请求
- URL 哈希更改
- 页面加载
- 表单提交
例如，上面测试用例中，点击【submit】后产生的就是提交表单的请求，看下图
能够看到一个 submit 操做，分红了三步走
- form sub：提交表单
- page load：页面加载
- new url：访问新的页面
Console 输出每一个命令的详细信息
浏览器F12便可见到熟悉的开发者工具页面了
以上图为栗子，一个 submitting form 表单提交的请求，在 Console 中打印了详细的信息，能够快速了解在运行时的详细状态信息
暂停测试并逐步运行、恢复执行
在调试测试代码时，Cypress 提供了两个命令来暂停测试运行
- cy.pause()
- cy.debug()
cy.pause() 的栗子
在表单提交以前暂停测试，咱们来看看运行结果
左上角有两个按钮，从左往右分别是
- Resume：继续执行测试用例并运行到结束
- Next:get：测试会变成逐步运行，点一下执行下一个命令
cy.debug() 的栗子
运行测试看看下图结果
测试运行在找到表单的时候，暂停运行并等待用户操做
顶部的Paused in debugger，右边两个按钮分别是
- Resume Script Execution（F8）：继续执行测试用例并运行到结束
- Step Over next function call（F10）：跳转到下一个调用debug()函数的地方
当找到隐藏或多个元素时，可视化结果
更改 username 输入框的定位器，使他匹配到不止一个元素
运行测试看看下面结果
由于定位表达式匹配到不止一个元素，因此执行 type() 方法时以失败了结
总结
这一节我们以测试一个登陆界面为需求，写了一个简单的测试用例来作栗子，后面将详细讲解 Cypress 的各部份内容哦