如何在 Cypress 中处理弹出框-JavaScript中文网-JavaScript教程资源分享门户

Cypress 是一款现代化的前端自动化测试工具，它拥有强大的 UI 操作能力以及易于使用的 API。但是，当你的应用程序需要处理弹出框时，就会给测试工作带来一定的挑战。

在本篇文章中，我们将讨论在 Cypress 中处理弹出框的方法，包括如何识别弹出框、与弹出框进行交互以及断言弹出框的内容。我们的文章将详细讲解这些知识点，并提供示例代码和指导意义。

识别弹出框

在 Cypress 中，识别弹出框的方法因应用程序而异。弹出框通常是用 JavaScript 代码触发的，例如 alert()、confirm() 和 prompt() 等函数。如果你的应用程序使用这些函数来触发弹出框，那么 Cypress 可以通过 window 对象来访问它们。

例如，我们可以使用 cy.window() 命令来获取页面的 window 对象，并使用 then() 回调函数来访问 alert() 函数的返回值：

cy.window().then(win => {
  const alertStub = cy.stub(win, "alert").as("alert");
  // 在事件发生后触发 alert() 函数
  cy.get("#button").click().then(() => {
    expect(alertStub.getCall(0)).to.have.been.calledWith("Hello, world!");
  });
});

如果应用程序使用自定义的弹出框组件，我们可以通过拦截 API 请求来识别弹出框。例如，当你点击 "删除" 按钮时，应用程序会发送一个 API 请求来删除该项。在此过程中，应用程序可能会显示一个警告框，提示你是否确认删除。你可以使用 Cypress 中的 cy.route() 命令来拦截 API 请求，并检查弹出框是否已显示。

cy.server();
cy.route("/api/delete").as("delete");
cy.get("#button").click().then(() => {
  cy.wait("@delete").then(xhr => {
    expect(cy.get("#alert-message")).to.be.visible;
  });
});

与弹出框进行交互

一旦我们能够识别弹出框，就可以与弹出框进行交互。在 Cypress 中，我们可以通过 cy.on() 命令来监听 window 对象的事件。例如，当我们点击 "确定" 按钮时，可以使用 cy.on("window:confirm", ...) 来捕获 confirm() 函数的返回值。

it("should handle confirm dialog", () => {
  cy.on("window:confirm", () => true);
  cy.get("#button").click().then(() => {
    expect(cy.get("#alert-message")).to.be.visible;
  });
});

类似地，当我们需要与 prompt() 函数交互时，我们可以使用 cy.stub().returns(...) 或 cy.on("window:prompt", ...) 来模拟用户输入。

it("should handle prompt dialog", () => {
  cy.stub(win, "prompt").returns("John Doe");
  cy.get("#button").click().then(() => {
    expect(cy.get("#name")).to.contain("John Doe");
  });
});

请注意，我们应该在测试中使用 cy.on() 命令来监听 window 对象的事件，而不是在应用程序代码中依赖使用这些函数。这样可以确保测试代码的独立性和可靠性。

断言弹出框的内容

最后，我们需要断言弹出框的内容是否符合预期。在 Cypress 中，我们可以使用 cy.stub() 命令来拦截 alert() 的调用，并使用 getCall(0).args 属性来获取弹出框的文本。

cy.on("window:alert", str => {
  expect(str).to.eq("Hello, world!");
});

如果你的应用程序使用自定义的弹出框组件，可以使用 cy.get() 命令来获取弹出框的 DOM 元素，并使用 cy.contains() 或 cy.match() 命令来验证其内容。

cy.get("#alert-message").should("contain", "Are you sure you want to delete?");

总结

在本文中，我们讨论了在 Cypress 中处理弹出框的方法，包括如何识别弹出框、与弹出框进行交互以及断言弹出框的内容。我们提供了示例代码和指导意义，希望可以帮助读者更全面地了解 Cypress 的测试功能。如果您想了解更多关于 Cypress 的内容，请参阅官方文档。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6544ac427d4982a6ebe83967