Cypress是一种流行的前端自动化测试框架，可用于快速执行 UI 测试、端到端测试和集成测试。在用 Cypress 进行测试时，断言失败是一件很常见的事情。本文将介绍如何获取 Cypress 断言失败的具体信息，使您的测试更加准确和强大。
为什么需要获取断言失败的具体信息
断言是测试的关键部分，它们被用于验证测试是否通过。当断言失败时，测试会停在那里，这使得你难以确定问题所在。可能只有一个小问题是导致了断言失败，但您却花费了大量的时间和精力去找到原因。这是一个令人疲劳的过程，并使您的测试变得慢和不准确。因此，获取断言失败的具体信息是非常重要的，因为它可以让您更快地找到问题所在。
如何获取断言失败的具体信息
Cypress提供了一种叫做 cy.its() 的方法来获取 DOM 元素中属性的值。通过使用该方法，您可以获取元素的属性并在测试失败时输出该值。为了实现这个目标，您需要做以下三件事。
步骤 1：用cy.its()获取值
首先，我们需要在测试中使用cy.its()方法获取元素属性的值。下面的示例代码使用了cy.its()方法获取一个div元素的class属性的值：
------------------------------------------------ ----------
步骤 2：使用console.log()函数输出值
接下来，我们需要使用console.log()函数来输出cy.its()方法获取的值。下面的示例代码将获取到的class属性值输出到控制台中：
-----------------
-------------
------------------ ---------
----------------- -- -
----------------------
---步骤 3：在测试失败时输出值
最后，在测试失败时需要输出该值。您可以使用Cypress的on('fail') 方法来监听测试失败事件，然后在其中输出cy.its()方法获取的值。下面的示例代码中演示了如何在测试失败时输出class属性的值：
------------- ------- --------- -- -
-------------------
-----------------
-------------
------------------ ---------
----------------- -- -
----------------------
---
--示例代码
下面的示例代码演示了如何获取断言失败的具体信息。假设我们有一个注册页面，其中有一个用户名输入框和密码输入框，以及一个注册按钮。我们的测试目标是验证当用户名和密码都为空时，注册按钮是否被禁用。如果注册按钮没有被禁用，测试就失败了。
---------------------- ------ -- -- -
---------- ---- - -------- -------- ------ ---- ---- ----- ------ --- ------- -- -- -
-----------------------------------------
------------------------------------------
------------------------------------------
------------------------------------------------------
------------- ------- --------- -- -
-------------------
-------------------------------
--------------------------
-------- -- -
------------------------------------------------------------- -- -
---------------------- -------------
---
------------------------------------------------------------- -- -
---------------------- -------------
---
---
---
---
---在上面的代码中，我们使用进入注册页面、输入用户名和密码并断言注册按钮是否被禁用的测试。当测试失败时，我们使用cy.on('fail')方法来捕获测试失败事件。在事件处理程序中，我们从我们cy.its()函数调用中获取了用户名和密码的值，并使用console.log()函数输出这些值。
结论
获取Cypress的断言失败的具体信息对于准确定位测试的问题是非常重要的。通过使用cy.its()函数获取元素的属性、console.log()函数输出该属性的值，并在测试失败时输出这个值，您可以更快地找到问题所在，让您的测试更加健壮和准确。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67136accad1e889fe20ca444