WebDriverIO 教程四：在 Selenium 中处理弹出窗口Alerts和Overlay, Handling Alerts & Overlay In Selenium, WebDriverIO 教程, WebDriverIO 入门

如今，您几乎找不到没有警报Alerts和弹出窗口的网站！每当您执行错误操作或输入访问网站的详细信息时，警报框都会警告您。这些警报框阻止您执行任何其他浏览器功能，直到警报得到解决。 这就是为什么在 Selenium 测试自动化脚本中处理它们变得很重要的原因。

在这个关于 Selenium 中警报处理的 WebDriverIO 教程中，我将向您展示如何在 WebDriverIO 中处理警报和弹出窗口以及覆盖模式。我还将介绍在自动化过程中您将面临的不同类型的警报，以及使用 WebDriverIO 在 Selenium 中处理警报需要遵循的关键点。

WebDriverIO 中的警报类型

警报和弹出窗口在任何网站开发中都很常见，在执行 Selenium 测试自动化时，您也必须处理它们。这些警报或 javascript 警报会弹出，将您的注意力从当前浏览器上移开并强制您阅读它们。如果您不知道如何处理警报，您将无法执行任何进一步的浏览器操作，手动和自动化都是如此。

请务必注意，您无法使用 devtools 或 XPath 识别警报。此外，由于它们不能作为窗口处理，这就是处理它们变得有点棘手的原因，但不要担心，您会在本 WebDriverIo 教程的后一部分中找到更多相关信息。

您需要在 WebDriverIO 中处理三种类型的警报。

1. 警报弹出 Alert pop up
2. 确认提醒 Confirmation Alert
3. 提示弹出 Prompt pop up

警报弹出窗口

警报弹出窗口或 alert() 方法显示一个警报框，其中只有一条消息和“确定”按钮。此警报用于通知用户某些信息。只有一个按钮“确定”与信息文本一起显示。在这里，用户只有一个选项来按下 OK 按钮。以下是弹出警报的示例。

确认提醒

确认警报是第二种带有消息的警报，它让用户可以选择按“确定”或“取消”。这是确认警报的示例。

提示弹出

弹出提示是最后一个警报，用于让用户为网站提供输入。在这里，用户可以提供输入并按 OK 按钮或按取消以避免提供输入。下面是弹出提示的示例。

除了这些内置的 javascript 警报外，还有一个弹出窗口，称为模态。警报和模态之间的主要区别在于，没有请求的操作（例如，确定或取消），警报无法关闭。在模态中，它是< div >通过提供特殊的 CSS 代码使用标签制作的。通过单击模式以外的其他地方，可以关闭此模式。

叠加模态

此模式是使用客户端框架构建的，例如 bootstrap、ReactJS。开发人员可用于显示某些信息、弹出窗口和表单。没有特别的

下面是一个叠加模态的例子：

现在，您已经熟悉了 javascript 中可用的另一种警报和模式。我将在此 WebDriverIO 教程中向您展示更多有关 Selenium 中警报处理的信息。

使用 WebDriverIO 在 Selenium 中处理警报

如果您熟悉使用其他框架的 Selenium 测试自动化中的警报处理，您会假设您必须在 Selenium 中的警报处理之前切换到警报。.例如在 Java 中，您必须创建 switchTo() 方法，然后需要访问 alert() 方法才能执行操作。情况并非如此，您将看到我们在本 WebDriverIO 教程中的进一步进展。对于 Selenium C# 爱好者，我们之前已经介绍过有关 Selenium C# 中警报处理的文章，请随时查看。

例如，

driver.switchTo().alert().accept();

同样，dismiss()、sendkeys() 方法也可以访问。

由于您不必在 Selenium 中的警报处理之前使用 switchTo() 方法，因此执行 Selenium 测试自动化会更容易一些。

在 Selenium 中处理警报以进行自动化浏览器测试所需的方法是：

• acceptAlert()
• dismissAlert()
• getAlertText()
• sendAlertText()
• isAlertOpen()

WebDriverIO 的一大优势是可以直接从驱动程序或浏览器对象访问警报以实现 Selenium 测试自动化。例如

browser.acceptAlert();
browser.dismissAlert();
browser.getAlertText();
browser.sendAlertText();
browser.isAlertOpen();

acceptAlert()

acceptAlert() 方法类似于driver.switchTo().alert().accept() selenium java。它可以帮助用户单击警报弹出窗口中的“确定”按钮。

句法：

browser.acceptAlert();

例子：

describe("This is example of Alert pop up ", function () {
   it("Simple Alert pop up", function () {
       browser.url("http://the-internet.herokuapp.com/");
       browser.pause(5000);
       $("=JavaScript Alerts").click();
       browser.pause(5000);
       $(".//button[text()='Click for JS Alert']").click();
       browser.pause(5000);
       browser.acceptAlert();
       browser.pause(5000);
   });
});

dismissAlert()

dismissAlert() 方法用于单击“取消”按钮。如果将此方法与 In selenium java 进行比较，则它就像driver.switchTo().alert().dismiss()

句法：

browser.dismissAlert();

例子：

describe("This is example of Alert pop up ", function () {
   it("comfirmation pop up", function () {
       browser.url("http://the-internet.herokuapp.com/");
       browser.pause(5000);
       $("=JavaScript Alerts").click();
       browser.pause(5000);
       $(".//button[text()='Click for JS Confirm']").click();
       browser.pause(5000);
       browser.dismissAlert();
       browser.pause(5000);
   });
});

getAlertText()

getAlertText() 方法用于读取弹出时写入的消息。这类似于Selnium java 中的 driver.switchTo ().alert().getText()。

句法：

browser.getAlertText();

例子：

describe("This is example of Alert pop up ", function () {
    it("getAlertText() pop up", function () {
       browser.url("http://the-internet.herokuapp.com/");
       browser.pause(5000);
       $("=JavaScript Alerts").click();
       browser.pause(5000);
       $(".//button[text()='Click for JS Confirm']").click();
       browser.pause(5000);
       const msg = browser.getAlertText();
       console.log(msg);
       browser.pause(5000);
       browser.acceptAlert();
       browser.pause(5000);
   });
});

sendAlertText()

发送到输入框。sendAlertText() 方法类似于Selenium Java 中的driver.switchTo().alert().sendKeys() 方法。

句法：

browser.sendAlertText(String str)

例子：

describe("This is example of Alert pop up ", function () { 
  it("sendAlertText() Pop up ", function () {
       browser.url("http://the-internet.herokuapp.com/");
       browser.pause(5000);
       $("=JavaScript Alerts").click();
       browser.pause(5000);
       $(".//button[text()='Click for JS Prompt']").click();
       browser.pause(5000);
       browser.sendAlertText("This is Input Text");
       browser.pause(5000);
       browser.acceptAlert();
       browser.pause(5000);
   });
});

isAlertOpen()

isAlertOpen( ) 方法用于检查警报是否可见。此方法向用户返回一个布尔值，用户可以根据此布尔值做出决定。

语法：

browser.isAlertOpen()

例子：

describe("This is example of Alert pop up ", function () {
  
   it("isAlertOpen check pop up", function () {
       browser.url("http://the-internet.herokuapp.com/");
       browser.pause(5000);
       $("=JavaScript Alerts").click();
       browser.pause(5000);
       $(".//button[text()='Click for JS Alert']").click();
       browser.pause(5000);
       const isOpen = browser.isAlertOpen();

       if (isOpen) {
           console.log("===========>" + isOpen);
           browser.acceptAlert();
           browser.pause(5000);
       }
   });
});

使用 WebDriverIO 处理叠加模式

到目前为止，您已经在本 WebDriverIO 教程中了解了 Alerts 和 Overlay Modal 之间的区别。警报只能通过预期的操作关闭，而叠加模式可以通过单击背景上的任意位置来关闭。我现在将向您展示如何使用 WebDriverIO 自动化 Overlay Modal。

当您自动化模态时，您不必处理特殊代码或类。您只需直接使用 WebDriverIO 选择器找出元素的对象并执行操作即可。

以下是使用 WebDriverIO 在 Selenium 中处理 Overlay Modal 的方法。

describe("This is example of Modal pop up ", function () {
   it("Handle Modal pop up", function () {
       browser.url("https://jquerymodal.com/");
       browser.pause(5000);
       $(".//a[@href='#ex1']").click();
       browser.pause(5000);
       $(".//a[@href='#close-modal']").click();
   });
});

Wrapping It Up!

在这个 WebDriverIO 教程中，我阐明了 Selenium 中的警报处理以及使用 WebdriverIO 的 Overlay Modal。我还将使用 WebDriverIO 的 Selenium 中的警报处理与其他框架进行了比较。我展示了如何在 WebDriverIO 中处理它们而无需切换到它们，这与 Selenium Java 等其他技术不同。

此外，我探索了 Selenium 中用于警报处理的 5 个 WebDriverIO 方法，它们是 acceptAlert()、dismissAlert()、getAlertText()、sendAlertText() 和 isAlertOpen。这些方法有助于自动弹出警报，但无助于处理叠加模式。您可以访问模态的每个元素，以便您可以直接使用单个元素的选择器并执行操作。如果您想了解WebDriverIO 中的浏览器命令，可以参考链接的文章。

我希望您喜欢阅读有关 Selenium 中警报处理的 WebDriverIO 教程。如果在下面的评论部分有任何问题或疑问，请随时与我们联系。让我们自动化！！！?

本文：WebDriverIO 教程四：在 Selenium 中处理弹出窗口Alerts和Overlay, Handling Alerts & Overlay In Selenium, WebDriverIO 教程, WebDriverIO 入门