WebDriverIO教程：处理Selenium中的警报和覆盖

叁歲伎倆 2023-01-15 02:15 14阅读 0赞

在此有关[Selenium][]中警报处理的[WebDriverIO教程][Selenium]中，我将向您展示如何在WebDriverIO中处理警报和弹出窗口以及叠加模式。我还将介绍自动化期间将要遇到的各种类型的警报，以及使用WebDriverIO在Selenium中处理警报时需要[遵循的关键点][Selenium]。

## WebDriverIO中的警报类型 ##

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

重要的是要注意，您无法使用devtools或XPath来识别警报。另外，由于不能将它们作为窗口来处理，这就是为什么要处理它们有些棘手的原因，但是请不要担心，您可以在本WebDriverIo教程的后面部分中找到更多有关此的信息。

WebDriverIO中需要处理三种警报。

[1、警报弹出][Selenium]  
[2、确认提示][Selenium]  
[3、提示弹出][Selenium]

## 警报弹出窗口 ##

弹出警报或alert（）方法将显示一个仅带有消息和“确定”按钮的警报框。该警报用于通知用户一些信息。信息文本仅显示一个按钮“确定”。在此，用户只有一个选项可以按“确定”按钮。以下是警报弹出的示例。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]

## 确认提示 ##

确认警报是带有消息的第二种警报，它使用户可以选择按“确定”或“取消”。这是确认警报的示例。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]

## 提示弹出 ##

弹出的提示是最后一个警报，用于提醒用户输入网站信息。在这里，用户可以进行输入并按OK（确定）按钮或按Cancel（取消）以避免输入。以下是弹出提示的示例。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 2]

除了这些内置的javascript警报之外，还有一个弹出窗口称为“模式”。警报和模式警报之间的主要区别在于，如果没有请求的操作（如“确定”或“取消”），警报将不会发出。在模式中，< div >通过提供特殊的CSS代码使用标记来完成。单击模态以外的其他位置可以关闭该模态。

## 叠加模态 ##

该模式是使用客户端框架（例如，引导程序，ReactJS）构建的。开发人员可以用来显示一些信息，弹出窗口和表格。没有特别的

这是叠加模式的示例：

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

## WebDriverIO教程：运行第一个自动化脚本 ##

**使用WebDriverIO在Selenium中处理警报**  
如果您熟悉Selenium在其他框架中的自动化测试中的警报处理，那么您会假定必须先切换到警报，然后再在Selenium中进行警报处理。例如，在Java中，您必须创建switchTo（）方法，然后需要访问alert（）方法以执行操作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 3]

例如，

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（） 硒Java。它可以帮助用户单击“警报”弹出窗口上的“确定”按钮。

句法：

**browser.acceptAlert();**

例：

describe("这是警报弹出的示例 ", 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()='点击JS警报']").click();
           browser.pause(5000);
           browser.acceptAlert();
           browser.pause(5000);
       });
    });

**dismissAlert（）**  
dismissAlert（）方法用于单击“取消”按钮。如果将此方法与In selenium java进行比较，则它类似于driver.switchTo（）。alert（）。dismiss（）

句法：

**browser.dismissAlert();**

例：

describe("这是警报弹出的示例 ", 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("这是警报弹出的示例 ", 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);
       });
    });

**isAlertOpen（）**  
isAlertOpen（）方法用于检查警报是否可见。此方法将布尔值返回给用户，并且用户可以基于此布尔值做出决定。

Syntex：

**browser.isAlertOpen()**

例：

describe("T这是警报弹出的示例 ", function () {  
      it("sendAlertText() Pop up ", function () { 
           browser.url("http://the-internet.herokuapp.com/");
           browser.pause(5000);
           $("=JavaScript Alerts").click();
           browser.pause(5000);
           $(".//button[text()='点击JS提示']").click();
           browser.pause(5000);
           browser.sendAlertText("这是输入文本");
           browser.pause(5000);
           browser.acceptAlert();
           browser.pause(5000);
       });
    });

## 使用WebDriverIO处理覆盖模态 ##

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

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

这是使用WebDriverIO处理Selenium中的Overlay Modal的方法。

describe("这是警报弹出的示例 ", 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();
       });
    });

[Selenium]: http://github.crmeb.net/u/defu
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]: /images/20221022/05255d22f3564bc6bb456a5f4417c311.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]: /images/20221022/7b3659e463cf49bea9fc064765355b90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 2]: /images/20221022/4435f820b3ee47a1b213377c5f8a1daf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 3]: /images/20221022/1ab5fef1c4f341f88ebc3457db6b570e.png