引言
在前端开发中，常常需要使用弹出口来交互数据。这些弹出口例如提示框、确认框等等，是页面主体的一部分，却需要额外的测试用例进行检验。本文将讲述如何使用 Cypress 对弹出口进行测试。
Cypress 的介绍
Cypress 是一个基于 JavaScript 语言的前端测试框架，旨在提高测试速度和可维护性。Cypress 提供了一个交互式测试运行器，JavaScript 控制台，调试工具和可扩展的插件。Cypress 能够对跨浏览器的应用做单元和集成测试，并支持非常好的自动化测试。
测试弹出口
在本文中，我们将讨论如何使用 Cypress 进行弹出口测试。在这种情况下，我们将测试页面的确认框。确认框是一个弹出口，通常用于确认用户是否希望执行某个操作或是接受某种警告。
确认框的示例代码
HTML 代码如下：
--------- -----
------
------
-------------- ---------------
------- -----------------------------------------------------------
-------
------
------- --------------- ------- ------------
--------
---------------------------- -
--- - - ------------ --- ---- --- ---- -- ------ ---- --------
-- -- -- ----- -
----------- ------- ----------------
- ---- -
----------- ------ -- -------------
-
---
---------
-------
-------在这个例子中，我们使用 jQuery 创建一个按钮及其对应的点击事件。点击按钮时，确认框会弹出，询问用户是否要删除一些数据。如果用户点击“确认”按钮，则会弹出一个成功消息。如果用户点击“取消”按钮，则会弹出一个取消消息。
如何测试确认框?
在 Cypress 中，我们可以使用 cy.window() 方法来获取页面的 window 对象。我们可以使用该对象来模拟用户点击确认框的“确认”按钮和“取消”按钮，并断言是否处于预期的状态。
请按照以下步骤进行操作：
- 将确认框打开并捕获
---------------------- -- -
----------------- ------------------------------------------
--在此代码中，使用 cy.window() 从 Cypress 中获取浏览器的 window 对象。在 window 对象上使用 cy.stub() 方法可模拟 window.confirm() 方法，并将其存储在 Cypress 的别名 @confirmStub 中。
- 单击按钮
------------------------
这个命令模拟点击了按钮，通过模拟 window.confirm() 方法来打开确认框。
- 确认弹出口的内容
已经捕获了弹出口，现在我们需要确认内容并更改弹出口的返回值：
----------------------
------------------------ ---- --- ---- --- ---- -- ------ ---- -------
--------------------------------
------------------- -- -
--------------------------- - ------
--在此代码中，我们使用 get('@confirmStub') 获取 Cypress 别名中的 confirm() 方法。接下来，使用 Cypress 断言标准 API 确保 confirm() 调用符合预期，并设置其变量以指定应返回的值。
- 单击“取消”按钮
-----------------------------------
在此代码中，我们单击 confirm() 对象的“取消”按钮，并指定它应该返回“false”。
- 确认取消后的状态
--------------------- ----------- -- -
-------------------------------- ------ -- -------------
---
----------------------
------------------------ ---- --- ---- --- ---- -- ------ ---- -------
---------------------
------------------- -- -
------------------------------------------------
---在此代码中，我们使用 Cypress 断言库和 on() 处理程序来确认弹出取消警报是否符合预期。我们还使用 Cypress 断言库和别名获得 confirm() 调用符合预期。
结论
本文深入介绍了 Cypress 如何使用测试页面的用户的确认框。我们探讨了使用 cy.window() 和 cy.stub() 方法在 Cypress 中捕获 window.confirm() 方法来打开和测试确认框的方法。我们还介绍了如何检查返回的结果和发出警报消息，最终让您能够使用 Cypress 编写和运行弹出框测试。希望这篇文章可以帮助你更好地了解 Cypress。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6718b013ad1e889fe22d6c20