Cypress 是一款现代化的前端自动化测试工具，它可以帮助开发人员快速、准确地检测和验证应用的各种功能和交互细节，从而提高代码质量和用户体验。但是，在实际应用中，我们经常遇到各种弹窗和 Alert 的情况，这些对测试用例的编写和执行都会产生影响。为了更好地解决这些问题，本文将介绍如何在 Cypress 中处理弹窗和 Alert。
弹窗和 Alert 的基本概念
在 Web 应用中，弹窗和 Alert 是两种常见的交互方式，它们通常用于向用户展示一些提示信息，或者获取用户的反馈和选择。下面分别介绍一下它们的基本概念和特点。
弹窗
弹窗 (modal) 是一种浮动式的 Web 界面元素，通常用于向用户提供一些提示信息，或者让用户进行某种操作选择。弹窗通常分为两种类型：模态弹窗和非模态弹窗。
模态弹窗 (Modal Dialog) 是一种完全阻止用户对当前页面进行其他操作的弹窗，用户必须先处理完弹窗内容才能继续操作页面。而非模态弹窗 (Non-modal Dialog) 则是一种可与页面交互的弹窗，用户可以在弹窗中选择或输入内容，同时也可以在页面中进行其他操作。
Alert
Alert 是一种浏览器提供的消息框，通常用于向用户展示一些提示或警告信息，或者获取用户的简单反馈。Alert 通常是一种模态弹窗，弹出时会阻断用户对页面的操作，用户必须先处理完 Alert 才能继续操作页面。
如何在 Cypress 中处理弹窗和 Alert？
在 Cypress 中处理弹窗和 Alert 其实很简单，只需要使用 Cypress 提供的两个命令：window:alert 和 window:confirm。下面分别介绍一下它们的用法和注意事项。
处理 Alert
为了测试 Alert，我们需要使用 window:alert 命令来触发 Alert 弹窗，然后等待 Alert 弹窗出现，再使用 window:alert 命令来确认弹窗。
下面是一个简单的示例：
it('should show Alert', () => {
cy.on('window:alert', (msg) => {
expect(msg).to.eq('Hello, World!')
})
cy.get('#btn-alert').click()
})这里我们使用了 cy.on 命令来监听 window:alert 事件，当 Alert 弹窗被触发时会执行回调函数，我们可以在里面做一些验证或处理操作。另外，需要注意的是，window:alert 命令只能触发一个 Alert 弹窗，如果有多个 Alert 弹窗，则只处理第一个弹窗。
处理弹窗
为了测试弹窗，我们需要使用 window:confirm 命令来触发弹窗，然后等待弹窗出现，然后点击弹窗上的确定或取消按钮。
下面是一个简单的示例：
it('should show Confirm', () => {
cy.on('window:confirm', (msg) => {
expect(msg).to.eq('Are you sure?')
return true
})
cy.get('#btn-confirm').click()
})这里我们使用了 cy.on 命令来监听 window:confirm 事件，当弹窗被触发时会执行回调函数，我们可以在里面做一些验证或处理操作。另外，需要注意的是，window:confirm 命令会触发两个弹窗事件，分别是确认弹窗和取消弹窗，我们需要在回调函数中返回 true 或 false 来模拟用户的选择。
注意事项
在使用 window:alert 和 window:confirm 命令时，需要注意以下几点：
- 这两条命令只适用于模态弹窗和 Alert，非模态弹窗不能用这种方式处理。
- 这两条命令都是异步执行的，需要使用回调函数来处理结果。
- 弹窗的出现和消失都是异步的，需要使用
cy.clock命令来控制时间流逝，以确保顺序正确。
总结
在 Cypress 中处理弹窗和 Alert 很简单，只需要使用 Cypress 提供的两个命令：window:alert 和 window:confirm，就可以很容易地对弹窗和 Alert 进行操作。但是需要注意的是，这些命令只适用于模态弹窗和 Alert，非模态弹窗不能用这种方式处理，同时需要注意异步执行和时间流逝的控制。如果我们能够熟练掌握这些技巧，就可以更好地应对各种测试场景，提高测试效率和质量，让我们的应用更加稳定和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c612fa4908f32798b253bd