Cypress系列（3）- Cypress 的初次体验

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

前言

这里的栗子项目时 Cypress 提供的，在 github 上，所以要 clone 到本地的话需要装 Git 哦！

下载被测应用

进入要安装该应用的目录，cmd 敲

git clone git@github.com:cypress-io/cypress-example-recipes.git

进入项目目录下，安装项目所需依赖包，敲

npm install

安装成功后，项目的文件结构如下图；所有被测应用栗子都在 examples 文件夹中

启动被测应用

启动测试应用时，可以进入不同子项目文件夹来启动不同的应用；

假如，我们要测试表单类型的登录，可以打开以下被测应用

cd examples\logging-in__html-web-forms>

启动本地server

npm start

启动成功后，cmd窗口将显示服务器的地址和端口

打开浏览器访问：http://localhost:7077/，即可看到登录页面

快速测试登录页面

首先，设计测试用例步骤

1. 访问http://localhost:7077
2. 输入用户名、密码，点击登录
3. 如果用户名和密码正确，则登录成功，否则登录失败

接下来，我们来看看实现测试用例的步骤

创建测试

在此目录下 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 操作，分成了三步走

1. form sub：提交表单
2. page load：页面加载
3. new url：访问新的页面

Console 输出每个命令的详细信息

浏览器F12即可见到熟悉的开发者工具页面了

以上图为栗子，一个 submitting form 表单提交的请求，在 Console 中打印了详细的信息，可以快速了解在运行时的详细状态信息

暂停测试并逐步运行、恢复执行

在调试测试代码时，Cypress 提供了两个命令来暂停测试运行

1. cy.pause()
2. 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 的各部分内容哦