前言
随着 Web 应用的发展和进化，弹出窗口已经成为了 Web 页面中的常见元素之一。这些弹出窗口可以是警告提示、确认对话框、输入框等等。在进行前端测试时，需要对这些弹出窗口进行处理，以保证测试的准确性和可靠性。本篇文章将介绍如何使用 Cypress 处理弹出窗口。
弹出窗口分类
在 Cypress 中，我们通常将弹出窗口分为 Alert 和 Modal 两种类型。
Alert 是浏览器自带的弹出窗口，用于在页面中显示简单的警告提示。Alert 窗口有一个确定按钮，点击确定按钮后窗口将关闭。
Modal 是页面中的自定义弹出窗口，通常用于显示一些交互式信息或者需要用户进行某些操作时弹出。Modal 窗口通常有多个按钮（如确定、取消、关闭按钮），操作完成后窗口将关闭。
处理 Alert 弹出窗口
在 Cypress 中，我们可以使用 cy.on('window:alert', cb) 监听 Alert 弹出窗口，并在回调函数 cb 中处理 Alert。
以下是一个例子：
-- -------------------- ---- -------
---------- ------ ------- -- -- -
-----------------------------------
--------------------- ----- -- -
--------------------------- --------- -- ----------- ------ --------
--
------------------ ------------ -- ---- ----- --
--上面的例子中，我们使用 cy.on('window:alert', cb) 监听 Alert 弹窗，cb 中的参数 str 是 Alert 弹窗中的文本内容。我们可以在 cb 中对弹窗进行处理，例如判断文本内容是否符合预期。
处理 Modal 弹出窗口
处理 Modal 弹出窗口相对较为复杂，因为 Modal 窗口不同于 Alert 窗口，它不是浏览器的一部分，而是页面中的自定义元素。因此，我们需要找到 Modal 窗口，然后模拟用户操作。
在 Cypress 中，我们可以使用 cy.get('selector') 找到 Modal 窗口，selector 是 Modal 窗口的 CSS 选择器。然后，我们使用 cy.get('selector').find('button') 找到 Modal 窗口中需要操作的按钮。最后，我们使用 cy.get('selector').find('button').click() 模拟用户点击操作。
以下是一个例子：
-- -------------------- ---- -------
---------- ------ ------- -- -- -
-----------------------------------
-------------------------------- -- -- ----- -----
---------------- -- -- ----- --
----------------------- -- -- ----- ------
------------------ ------ --------- -- -- ----- ------------
----------------
------------------ -- -- ----- --------
-------- -- ------
--上面的例子中，我们使用 cy.get('selector') 找到 Modal 窗口及其内容，然后我们使用 should() 断言 Modal 窗口中的内容是否符合预期。最后，我们使用 click() 模拟用户点击确定按钮。
总结
使用 Cypress 处理弹出窗口的方法相对简单。我们可以使用 cy.on('window:alert', cb) 监听 Alert 弹出窗口，并在回调函数 cb 中对 Alert 进行处理；对于 Modal 弹出窗口，我们可以使用 cy.get('selector') 找到弹出窗口及其内容，然后模拟用户操作。通过这些方法，我们可以轻松地处理弹出窗口，提高前端测试的效率和准确性。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f035dff6b2d6eab3a291ba