前言
在 Web 应用程序中，我们经常会遇到弹出的对话框，特别是需要输入一些信息的情况，例如登录、注册、确认操作等等。如何在 Cypress 中处理这些对话框是一个很重要的问题。本文将介绍如何使用 Cypress 处理弹出对话框。
Cypress 中处理对话框
在 Cypress 中，我们可以使用 cy.on() 方法在每次打开对话框时捕获对话框。对于不同类型的对话框，我们需要使用不同的方法进行操作。
确认对话框
如果对话框是一个确认对话框，我们可以使用 window.confirm() 方法来处理。假设我们在页面上有一个按钮，当点击时会弹出一个确认对话框：
<button id="btn">点击弹出确认对话框</button>
我们可以使用以下代码来测试确认对话框：
it("测试确认对话框", () => {
const stub = cy.stub();
cy.on("window:confirm", stub);
cy.get("#btn").click().then(() => {
expect(stub.getCall(0)).to.be.calledWith("你确定吗？");
});
});在上述代码中，我们首先使用 cy.stub() 创建一个 Sinon stub 对象。然后，我们调用 cy.on() 方法来监听 window:confirm 事件，并将 stub 作为回调函数传递。最后，我们使用 cy.get() 方法来获取按钮元素，并点击它。当对话框弹出时，stub 就会被调用，我们可以通过 getCall(0) 方法获取被调用的参数。
提示对话框
如果对话框是一个提示对话框，我们可以使用 window.alert() 方法来处理。假设我们在页面上有一个按钮，当点击时会弹出一个提示对话框：
<button id="btn">点击弹出提示对话框</button>
我们可以使用以下代码来测试提示对话框：
it("测试提示对话框", () => {
const stub = cy.stub();
cy.on("window:alert", stub);
cy.get("#btn").click().then(() => {
expect(stub.getCall(0)).to.be.calledWith("你好！");
});
});和确认对话框类似，我们使用 cy.on() 方法监听 window:alert 事件，并将 stub 作为回调函数传递。最后，我们使用 cy.get() 方法获取按钮元素，并点击它。当对话框弹出时，stub 就会被调用，我们可以通过 getCall(0) 方法获取被调用的参数。
输入对话框
如果对话框是一个输入对话框，我们需要使用 cy.window() 方法来操作。假设我们在页面上有一个按钮，当点击时会弹出一个输入对话框：
<button id="btn">点击弹出输入对话框</button>
我们可以使用以下代码来测试输入对话框：
it("测试输入对话框", () => {
cy.window().then(win => {
cy.stub(win, "prompt").returns("张三");
});
cy.get("#btn").click();
});在上述代码中，我们首先使用 cy.window() 方法获取当前窗口对象。然后，在 .then() 方法中使用 cy.stub() 方法来创建一个 Sinon stub 对象，并将 prompt 方法作为参数传递。最后，我们使用 .returns() 方法来模拟 prompt 方法的返回值。当点击按钮时，输入对话框就会弹出，并显示模拟的返回值。
总结
在 Cypress 中处理弹出对话框需要使用不同的方法，具体取决于对话框的类型。我们可以使用 cy.on() 方法在每次打开对话框时捕获对话框，并使用 Sinon stub 对象模拟对话框的返回值。在测试时，请注意使用恰当的方法，以确保测试的准确性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ffce2195b1f8cacde17865