对于想了解Cypress系列的读者，本文将是一篇不可错过的文章，我们将详细介绍8-Cypress编写和组织测试用例篇之钩子函数Hook，并且为您提供关于Cypress系列（0）-如何学习Cypress

对于想了解Cypress系列的读者，本文将是一篇不可错过的文章，我们将详细介绍8- Cypress 编写和组织测试用例篇 之 钩子函数Hook，并且为您提供关于Cypress系列（0）- 如何学习 Cypress、Cypress系列（10）- Cypress 编写和组织测试用例篇 之 动态跳过测试用例、Cypress系列（11）- Cypress 编写和组织测试用例篇 之 动态生成测试用例、Cypress系列（12）- Cypress 编写和组织测试用例篇 之 断言的有价值信息。

• Cypress系列（8）- Cypress 编写和组织测试用例篇 之 钩子函数Hook（activated钩子函数）
• Cypress系列（0）- 如何学习 Cypress
• Cypress系列（10）- Cypress 编写和组织测试用例篇 之 动态跳过测试用例
• Cypress系列（11）- Cypress 编写和组织测试用例篇 之 动态生成测试用例
• Cypress系列（12）- Cypress 编写和组织测试用例篇 之 断言

Cypress系列（8）- Cypress 编写和组织测试用例篇 之 钩子函数Hook（activated钩子函数）

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

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

Hook

就是常说的钩子函数，在 pytest 框架里面也有 hook 这个概念；接下来就让我们来看看 Mocha 提供的 Hook 函数叭！

Mocha 提供的 Hook 函数

•  before()
•  beforeEach()
•  afterEach()
•  after()

hook 的作用

利用钩子函数可以在所有测试用例执行前做一些预置操作（如：准被测试数据、测试环境）

或者在测试结束后做一些后置操作（如：清理测试数据）

hook 具体写法的栗子（比较长，耐心敲，耐心看）

运行结果

知识点

若包含多级测试套件，那么父级套件、祖父级套件声明的 hook 函数会作用于所有子级套件的测试用例，孙子级套件的测试用例...以此类推（如：栗子中的二级套件、孙子级套件）

before()

• 该测试套件下，所有测试用例的统一前置操作
• 它在一个 describe() 或 context() 内只会执行一次，在所有 it() 之前执行
• 在运行结果可以看到是叫 BEFORE ALL 

after()

• 该测试套件下，所有测试用例的统一后置操作
• 它在一个  describe()  或 context() 内只会执行一次，在所有 it() 之后执行
• 在运行结果可以看到是叫  AFTER ALL ，而且是在最后一行

beforeEach()

• 该测试套件下，每个测试用例的前置操作
• 一个  describe()  或 context() 内有多少个测试用例 it() ，就会执行几次 beforeEach() 
• 在运行结果可以看到是叫 BEFORE EACH 

afterEach()

• 该测试套件下，每个测试用例的后置操作
• 一个 describe()  或 context() 内有多少个测试用例 it() ，就会执行几次  afterEach()  
• 在运行结果可以看到是叫 AFTER EACH 

Cypress系列（0）- 如何学习 Cypress

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

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

前言

• Cypress 未来很有可能会火的一塌糊涂，那么我们又应该如何进行学习呢？
• 目前国内 Cypress 可以学习的资源并不多，你百度只搜 Cypress 还可能出现硬件的东西哈哈哈
• 虽然目前官网提供了中文版的官方文档，但感觉翻译的还是一般般

隆重推荐

• 目前国内可以说是第一本关于 Cypress 的书，博主整个系列的文章都是基于这本书的，阅读->敲代码->写博客->巩固知识
• 它就是蔡超老师写的《Cypress 从入门到精通》，博主认为这本书可以很好的帮助你入门 Cypress，并且能帮助你学习进阶的内容
• 所以也帮蔡老师打打广告，希望更多的童鞋跟我们一起学习 Cypress啦！
• 下面附上了当当旗舰店的二维码啦！现在超便宜的。。我买的时候还要50呢。。

买不了吃亏买不了上当啦啦啦~快来跟我一起学习吧！！

Cypress系列（10）- Cypress 编写和组织测试用例篇 之 动态跳过测试用例

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

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

前言

• 上一节只讲了如何跳过执行 or 只执行某些测试用例集 or 测试用例
• 在实际项目中，可能存在需要在运行中动态地去决定某个测试是否需要执行

如何动跳过执行某些测试用例

测试代码

运行以下命令

进入 Cypress 安装目录，cmd敲

yarn cypress:open --env flag=1

打开 Cypress Test Runner 之后运行上面的代码文件

测试结果

当 flag != 1 时的测试结果

知识点

• 我们可以通过指定环境变量来动态判断是否执行指定的测试用例
• 设置环境变量有很多种方法，这里用的是命令行方式，格式： --env key=val1,key2=val2 ，若需要指定多个环境变量则需要逗号来隔开，而不是空格
•  this.skip() ，当测试用例内调用该方法时，方法后面的代码都不会执行，方法前面若是调用 Cypress 的方法则也不会执行（如： cy.visit() 、 cy.log() ），只有非 Cypress 方法才会执行（如： console.log("1234") ）

备注：后面再讲环境变量不同的配置方式

Cypress系列（11）- Cypress 编写和组织测试用例篇 之 动态生成测试用例

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

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

前言

• 自动化测试中，数据驱动是很重要的一个点
• 实际项目中，肯定会出现这种情况：多条测试用例的执行步骤，断言步骤完全一致，只有输入和输出数据不一样
• 这个时候依靠数据驱动（数据参数化）来解决这个问题可以提升我们的测试效率
• 在 Cypress，可以通过数据来动态生成测试用例，以达到数据驱动的效果

动态生成测试用例的步骤

前提

这边用的还是 Cypress 提供的被测应用哦

# 进入被测应用的目录
cd C:\Users\user\Desktop\py\cypress-example-recipes\examples\logging-in__html-web-forms

# 启动本地服务
npm start

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

创建一个数据文件

在 Cypress安装目录/cypress/integration 文件夹下，创建一个子目录 datas ，在该目录下创建一个 testLogin.data.js 文件，代码如下

export const testLoginUser = [

    {
        summary: "登录成功",username:"jane.lane"
    },{
        summary: "登录失败"文件
在 integration 文件夹下创建一个 testLogin.js 文件，代码如下

 
运行测试文件
进入 Cypress 安装文件夹，cmd执行命令

yarn cypress:open

 
单击 testLogin.js，Cypress 会启动 Test  Runner 运行测试，运行成功后，将看到运行结果页面
测试结果

可以看到第一条用例是测试通过，第二条用例是执行失败了（因为账号密码是错的，失败理所当然）
 
总结

根据测试数据动态生成测试用例，是一种数据驱动的做法
可以提升我们的测试效率，当我们测试数据本身改变时，无须更改测试代码，只要改测试数据文件

 

// 重试，直至找到3个匹配的<li.selected>
cy.get('li.selected').should('have.length',3)

 重试，直至这个input不再有disabled的class
cy.get('form').find('input').should('not.hava.class','disabled')

 重试，直至这个textarea的值为 poloyy
cy.get('textarea').should('have.value','poloyy')

 重试，直至这个span不再包含'click me'
cy.get('a').parent('span.help').should('not.contain','click me')

 重试，直至button可见
cy.get('button').should('be.visible')

 重试，直至 id=loading 元素不再存在
cy.get('#loading').should('not.exist')

 重试，直至radio状态是checked
cy.get(':radio').should('be.checked')

 重试，直至complete这个类有匹配的css为止
cy.get('.completed').should('have.css','text-decoration','line-through')

<div class="main-abc123 heading-xyz987">Introduction</div>