如何使用 Cypress 检查元素是否存在？

Cypress 是一款帮助 Web 开发人员和测试人员确保其网站正常运行的工具。它可以检查网站的某个部分是否存在。这很有用，因为它有助于在用户发现问题之前发现问题。元素存在是您应该在项目中使用 Cypress 进行测试的首要任务之一。在本文中，我们将了解如何测试元素是否存在。另外，如果存在，如何检查它是否可见？.

什么是柏树元素？

• Web 应用程序中的元素是指构成网页结构和内容的各个 HTML 元素。
• 元素的示例包括按钮、文本框、链接和图像，每个元素都有自己的属性，如 id、class 和 style。
• 这些属性可用于与 CSS 或 JavaScript 选择器交互。

元素很重要，因为它们定义了页面的结构和行为。
通过选择元素并与之交互，您可以创建自动化测试，以确保 Web 应用程序的行为符合所有用户的预期。
在 Cypress 中，元素是您希望与之交互或测试的网站的 HTML 元素。
要与这些元素交互或测试这些元素，只需使用类似于 CSS 的选择器选择它们即可。

为什么元素的存在在 Cypress 中很重要？

网站就像一个拼图，其中包含按钮和表单等互动部分。测试包括确保这些部件位于正确的位置并正常运行。检查元素是否存在很重要，因为网站的不同部分可以根据用户操作进行更改。

例如，填写表单后可能会出现“提交”按钮，因此需要检查它是否出现。这有助于在用户遇到问题之前识别问题，从而提供更流畅的体验。

如何使用 Cypress 验证元素是否存在？

Cypress 提供了多种方法来验证网页上元素的存在。让我们深入研究每种方法并了解如何有效地实施它们。

1。 cy.get() 方法

real-device-cloud-cta.jpg
Cypress 中的 cy.get() 方法用于根据各种选择器（例如类名、ID、属性等）选择和检索页面上的元素。要验证元素是否存在，开发人员可以使用 should() 命令和 cy.get() 方法。

将 .should(‘exist’) 断言与 cy.get() 一起使用可确保所选元素出现在页面上。

2。 cy.contains() 方法

cy.contains() 方法用于根据文本内容查找元素。此方法还可用于检查页面上是否存在具有特定文本的元素。

3。 cy.find() 方法

cy.find() 方法在处理父元素内的嵌套元素时非常有用。它允许您在另一个元素的上下文中搜索元素，确保更集中的搜索。

4。带有自定义断言的 cy.get().should()

Cypress 使开发人员能够使用 cy.should() 方法创建自定义断言。当您想要实现除元素存在之外的更具体的检查时，这特别有用。

5。使用 .should() 和超时

有时，元素可能会异步加载或略有延迟。在这种情况下，您可以使用带有超时的 .should() 断言来确保 Cypress 等待元素出现。

使用 Cypress 进行条件测试：
Cypress 中的条件测试是将条件逻辑集成到测试脚本中的行为，以便在测试执行期间根据特定条件或结果做出决策并执行操作。这种方法使您能够设计更灵活、适应性更强的测试，可以处理各种场景并做出相应的响应。赛普拉斯提供了一系列命令和 API，您可以利用它们来实现有效的条件测试。以下是如何使用 Cypress 进行条件测试的说明。

示例-1

在此示例中，测试脚本访问网页并对元素是否存在以及页面标题执行条件测试。根据条件是否满足，脚本将相应的消息记录到 Cypress 测试输出。

real-device-cloud-cta.jpg
Cypress 提供了流畅直观的语法，用于在测试脚本中执行条件测试。您可以使用断言、承诺和常规 JavaScript 逻辑来构建复杂的条件和基于这些条件的结果的操作。

Cypress 中的条件测试与其他测试框架类似，可以帮助您创建更通用、更有效的测试，可以适应不同的场景，使您的测试过程更加健壮和可靠。

示例2：

在此代码片段中，Cypress 首先使用 .should(‘exist’) 确保按钮元素的存在。然后，它使用 .then() 检索该元素，随后的条件检查确定该按钮是否存在。如果满足条件，表明按钮存在，Cypress 将使用 cy.wrap(button).click() 单击按钮。如果条件失败，则 else 块会促进执行替代操作。

元素存在性检查的实际应用：

让我们想想一些日常情况，在这些情况下检查元素是否存在非常有帮助：

1。表单成功消息

用户提交表单后，可能会出现成功消息。使用 Cypress，您可以检查该消息是否显示，确保用户知道他们的表单已成功提交。

2。菜单导航

当用户将鼠标悬停在按钮上时，您会出现一个下拉菜单。您想要确认当用户执行该悬停操作时菜单会出现。

3。响应式设计

网站的移动版本和桌面版本上可能会出现或消失不同的元素。您可以使用 Cypress 来确保这些元素按预期显示或隐藏。

4。用户访问控制

某些按钮或链接可能仅对某些类型的用户可见。 Cypress 帮助您验证这些元素是否显示给正确的人。

另请阅读：Cypress 并行测试：带有代码示例的分步教程

结论

借助 Cypress 等工具，Web 测试不再是一项困难且耗时的任务。 “如果元素存在”功能封装了条件测试的本质，使开发人员和测试人员能够精心模仿真实用户交互的测试。此功能不仅简化了测试，还鼓励对应用程序行为采取更周到的方法。通过利用 Cypress 直观的命令和强大的断言，开发人员可以简化测试套件、减少冗余并构建更强大的 Web 应用程序。因此，拥抱 Cypress 的力量，踏上提升 Web 开发项目质量的旅程。

来源：本博客最初发布于testgrid.io

以上是如何使用 Cypress 检查元素是否存在？的详细内容。更多信息请关注PHP中文网其他相关文章！