Cypress 的 before 和 beforeEach 钩子函数的使用方式

简介: Cypress 的 before 和 beforeEach 钩子函数的使用方式

假设您有一个 spec,其中包含几个测试。 在这些测试中,您将打开一个页面并测试一些功能。 每次您想使用 .visit() 命令打开该页面时:

image.png通过几次测试,事情可能会以某种方式重复。 对于这种情况,您可以改为使用 before() 钩子,它会在所有测试之前打开您的页面:

image.png请记住,cypress 会在两次测试之间清除浏览器的状态。 所以如果你例如 在测试 1 中登录,您将在测试 2 中注销。


这里需要注意一件事 - 测试 2 可能取决于测试 1 的结果。 如果第一个测试失败,第二个测试可能会在我们的应用程序中的不同位置开始,并为该规范中的所有测试创建多米诺骨牌效应。 以测试不会相互影响的方式隔离您的测试是一种很好的做法。 为此,您可能会发现 beforeEach() 钩子更有用。 这可能需要您以某种方式构建测试,但会帮助您获得整体测试稳定性。


Nested before() and beforeEach() hooks

现在假设您有多个钩子和不同的 describe() 和 it() 块。 这可能是一开始有点混乱的地方,但是当你知道它是如何工作的时候就会变得非常清楚。 考虑以下代码:

image.png运行时执行顺序如下:image.png比较我们在测试中编写这些的顺序和执行这些测试的顺序。 我喜欢在执行测试或 describe() 块之前将所有钩子视为“压扁”在一起。


Using beforeEach block in support/index.js

有时我喜欢使用这些块来运行我想在所有测试之前运行的“全局”beforeEach() 块。 我在关于处理来自 API 的数据的博客中描述了一个这样的案例。 我为自己创建了一个存储空间,并在每次测试之前将其擦除。 我像这样使用我的 support/index.js 文件:

image.png

相关文章
|
17天前
|
JavaScript API
Vue自定义hook函数
Vue自定义hook函数
Vue3使用hook封装常见的几种异步请求函数场景,让开发更加丝滑🚀🚀🚀
Vue3使用hook封装常见的几种异步请求函数场景,让开发更加丝滑🚀🚀🚀
|
2月前
|
JavaScript
vue的setup中能调用哪些生命周期
vue的setup中能调用哪些生命周期
20 3
|
3月前
|
测试技术
Cypress的钩子函数
Cypress的钩子函数
Cypress的钩子函数
|
8月前
React+Hook+ts+antDesign实现伪定时调用接口功能
React+Hook+ts+antDesign实现伪定时调用接口功能
40 0
|
9月前
|
JavaScript
v-if 和 v-show在切换时vue生命周期钩子的执行
v-if 和 v-show在切换时vue生命周期钩子的执行
|
9月前
|
前端开发 API
react中hook的作用和用处
react中hook的作用和用处
|
10月前
|
缓存 JavaScript 前端开发
【Vue3 第十章】生命周期钩子
【Vue3 第十章】生命周期钩子
114 2
|
10月前
|
缓存 前端开发 JavaScript
React 中的状态管理和副作用处理解决方案 :Hook
在现代 Web 前端开发中,构建复杂的用户界面已成为一项重要任务。随着应用程序规模和复杂性的增加,状态管理和副作用处理变得愈发关键。为了应对这些挑战,React 引入了 Hooks Pattern(钩子模式),这是一种用于管理组件状态和处理副作用的技术。本文将详细介绍 Hooks Pattern 的概念、优点和缺点,适用场景,开源实现方案,以及在知名项目中的应用
88 0
|
JavaScript
vue不是内部或外部命令解决方法
vue不是内部或外部命令解决方法
vue不是内部或外部命令解决方法