且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-09-04 15:14:19

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

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

Cypress 的 before 和 beforeEach 钩子函数的使用方式请记住,cypress 会在两次测试之间清除浏览器的状态。 所以如果你例如 在测试 1 中登录,您将在测试 2 中注销。


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


Nested before() and beforeEach() hooks

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

Cypress 的 before 和 beforeEach 钩子函数的使用方式运行时执行顺序如下:Cypress 的 before 和 beforeEach 钩子函数的使用方式比较我们在测试中编写这些的顺序和执行这些测试的顺序。 我喜欢在执行测试或 describe() 块之前将所有钩子视为“压扁”在一起。


Using beforeEach block in support/index.js

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

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