Cypress 的互联网：Heroku 的'互联网”游乐场的真实场景

我最近去了 chatGPT 并询问有哪些好的自动化练习，在同一系统上工作一段时间后，或者只为特定类型的用户流提供自动化，我们最终可能会忘记一些事情，所以我询问了一些练习网站，然后我找到了互联网。
尽管该网站可能看起来很简陋，但它们仍然为您提供了一个尝试自动化的地方，而目前，这就是我所需要的。我花了一些时间使用 Cypress 解决了一些经典的网络挑战。
因此，言归正传，让我们深入研究我自动化的一些场景，涵盖从神奇般来来去去的按钮、奇怪的拖放、与文件相关的自动化和一些快速 Shadow DOM 工作的所有内容！

1. 拖放： 如果您曾经尝试过自动化拖放操作，您就会知道它从来没有看起来那么简单。虽然 Cypress 对某些交互有原生支持（我确实尝试过，哈哈），但仍然需要一些创造力才能在这里进行拖放测试。

在本例中，我使用触发器（'mousedown'）、触发器（'dragover'）和触发器（'mouseup'）尝试了自定义拖放命令。由于该网站上实现该功能的方式，我必须更深入地挖掘才能使该测试正常工作，但对于大多数现代应用程序来说，cypress 插件应该足够了（谢天谢地）。

1. 添加/删除元素：

这个练习中的“添加元素”按钮理论上很简单，但有趣的是这个游乐场有时会试图扰乱你的期望，哈哈。单击它一次，然后...出现一个删除按钮（这不是超级直观，但哦，好吧，你只需要使用它即可）。诀窍是确保我们在测试中以稳定且可重复的方式处理添加-删除舞蹈。使用 Cypress，我们检查按钮是否出现，添加更多按钮，然后将它们一一删除，确保顺序不会出现问题。

专业提示：
跟踪出现和消失的元素可能很棘手，但 Cypress .should('exist') 和 .should('not.exist') 断言可以很好地处理这个问题。另外，您每次都会得到甜蜜的视觉确认。

1. 动态内容：

我认为这是本文中最简单的示例，但它仍然很有趣，这个想法只是创建测试来确保内容的格式是一个常量，即使它的内容会总是改变......不过对于学习仍然有用。

Cypress 可以确认元素按预期加载，而无需对实际内容过于挑剔，从而保持测试的弹性。

1. 动态控制：

对于这个控件，诸如复选框和按钮之类的控件会根据用户交互而出现或消失。有些需要等待加载指示器消失。在这里，Cypress 的 cy.wait 和 .should('be.visible') 是关键。

快速提示：

不要使用硬编码的等待，而是使用 .should('exist') 和 .should('be.disabled') 等断言来对页面的状态做出反应。这使得测试更加稳健和适应性更强。

1. 文件下载：

下载文件可能听起来很简单，直到您必须证明它确实发生了。使用 Cypress，我们可以采取不同的措施来确保文件确实已下载。

我们可以做不同的事情来确保下载完成，对于这个应用程序，我只是确保在单击链接后我们在下载文件夹中拥有该文件。非常简单，一旦文件存在，测试就会自动通过。可以应用其他策略，例如使用 cy.intercept 来验证是否触发了下载请求。

1. 文件上传： 就像文件下载一样，Cypress 的文件上传也非常流畅。

对于这种类型的场景，您可以使用 cypress-file-upload 之类的东西
这是一个非常好用的插件，并确认该文件已被应用程序处理。

在我的示例中，所有这些都是通过 .selectFile 命令完成的，并且有一种方法可以做到这一点，甚至无需发送实际文件，只需使用 Cypress.Buffer 就可以解决问题（您可以看到里面的实现）下面链接的存储库）。

这适用于通过单击按钮完成的上传以及拖放上传，非常简单......谢谢赛普拉斯？.

1. 影子 DOM:

Shadow DOM 的神秘之处在于元素就像主 DOM 中的秘密。它们被隐藏起来，不遵循常规的 CSS 可见性规则，这可能有点棘手，具体取决于您需要如何在它们上运行自动化。值得庆幸的是，Cypress 支持 Shadow 命令来刺穿这层面纱并找到那些隐藏的元素。

对于这些测试，我使用 cy.get('element').shadow() 来访问 Shadow DOM 中的元素，然后，不再有问题或困难，您可以像您一样访问元素并对其进行断言与普通的。

---

现在就是这样..只是简单的 6 个示例，说明我们如何使用 Cypress 来处理一些基本的浏览器自动化使用，以及如何利用它来让您的生活更轻松地处理此类情况.

准备好尝试了吗？

如果您有兴趣尝试这些测试或根据您的项目调整它们，我已在我的 GitHub 存储库上提供了代码。测试套件非常轻量，所以不应该有太多疑问点，而且我们有 GitHub Actions 流程，您可以使用它，这样您就可以看到它是如何运作的！谢谢您，我们下次再见！

以上是Cypress 的互联网：Heroku 的'互联网”游乐场的真实场景的详细内容。更多信息请关注PHP中文网其他相关文章！