前言
在进行前端自动化测试时，我们会遇到很多弹框提示，例如 alert、confirm、prompt 等等。如果没有合适的方法处理这些弹框，测试用例就会因为这些弹框而无法顺利执行。在 Cypress 中，我们可以使用一些方法来处理这些弹框。
Cypress 中常用的弹框处理方法
方法一：重写 window.alert、window.confirm、window.prompt 方法
通过重写 window 对象上的 alert、confirm、prompt 方法来处理弹框。这种方法可以直接使用 Cypress 的命令行操作。
cy.on('window:alert', () => true);
cy.on('window:confirm', () => true);
cy.on('window:prompt', () => 'Hello, World!');当出现弹框时，Cypress 会捕捉到 window 对象上的事件，然后执行相应的处理。通过返回一个 true 来接受 alert 和 confirm 弹框，通过返回一个字符串来模拟用户在 prompt 中输入的文本。
方法二：spy window.alert、window.confirm、window.prompt 方法
在测试用例中，我们可以使用 Cypress 的 spy 方法来监听 window 对象上的 alert、confirm、prompt 方法。这种方法可以用于测试验证弹框是不是正确的。
-- -------------------- ---- ------- ----------------------- -- - -------------- ----------------------- --- -- ------- --- ----- ------------------------------ ------------------ --------------------------------
这里我们使用 cy.window() 获取到整个浏览器的 window 对象，然后使用 cy.spy 方法监听它的 alert 方法。在我们的测试用例中，我们点击某个按钮，在 onClick 事件中触发 alert 弹框，并使用 @myAlert 引用之前创建的 spy 对象。最后，我们使用 should('have.been.calledOnce') 来验证 alert 方法是否被恰好调用一次。
方法三：使用自定义的 Cypress 命令
最后一种方法是创建一个自定义的 Cypress 命令来处理弹框。这种方法可以使代码更模块化，可以在多个测试用例中共用。
Cypress.Commands.add('handleAlert', (text) => {
cy.on('window:alert', () => true);
cy.get('#someButton').click();
// do something with the alert text
});
// in your test code
cy.handleAlert('Hello, World!');这里我们创建了一个叫做 handleAlert 的自定义命令，它接受一个字符串参数，代表 alert 框中的文本内容。在命令中，我们重写了 window 的 alert 方法来接受弹框，然后我们点击某个按钮触发弹框，最后我们可以调用别的方法来处理弹框中的文本内容。
总结
在 Cypress 中处理弹框的方法有很多，上面提到的三种方法都很有用。选择哪一种方式取决于你的测试用例的需求。希望这篇文章可以对你有帮助，可以让你更好地编写 Cypress 测试用例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bb0e648841e98949fb729