Selenium 特殊元素定位与操作

前面几节中我们使用 Selenium 定位处理了 Web 页面中的常用元素，但除此之外 Web 页面中还有其他一些特殊的元素，如弹出框、Cookie 以及文件上传等。

switchTo().alert().getText(): 获取弹出框文本信息
switchTo().alert().accept(): 点击弹出框确认按钮
switchTo().alert().dismiss(): 点击弹出框取消按钮
getCookies()：获取全部 Cookie 信息
addCookie()：添加 Cookie
deleteAllCookies()：删除所有的 Cookie
deleteCookieNamed(): 删除指定的 Cookie
getCookieNamed()：获取指定的 Cookie
文件上传处理

Web 页面中共有三种弹出框，分别是 Alert 警告框、Confirm 确认框以及 Prompt 提示消息框，但是在 Selenium 中这三种弹出框都会被当做 Alert 对象来处理。

<html>
    <head>
        <title>Alert Window</title>
    </head>
    <body>
        <br />
        <input type="button" onclick="alert('this is a alert window.')" value="Alert"/>
        <br />
        <input type= "button" onclick="confirm('This is a confirm window.')" value="Confirmation" />
        <br />
        <input type="button" onclick="prompt('this is a prompt window.')" value="prompt" />
    </body>
</html>

打开页面的效果如下：

3-4-1

弹出框是一个 Window 窗口，所以在处理弹出框时首先要通过

driver.switchTo().alert()

方法切换到弹出框窗口，然后在进行操作；前面提到页面上的三种弹出框在 Selenium 中都被当做 Alert 处理，因此不管是页面上的 Alert 弹窗还是 Confirm 弹窗还是 Prompt 弹出都可以通过

driver.switchTo().alert()

来切换到目标窗口上。

在 driver 切换到弹出框后，我们就可以对弹出框进行操作了，弹出框的操作有以下四种方法，分别是：

accept(): 确认弹出框，点击弹出框的确认按钮
dismiss(): 取消弹出框，点击弹出框的取消按钮
sendKeys(): 往弹出框中输入信息，对于 alert 和 confirm 弹出框无法使用
getText()：获取弹出框中的文本信息

在 cn.lanqiao.elements 包下创建一个新的测试类 AlertCommandTest，在这个测试类中来演示页面上三种弹出框的定位与操作。

Alert 弹出框定位与操作

在 AlertCommandTest 测试类中新增一个测试方法 testAlert(), 具体代码如下：

package cn.lanqiao.elements;

import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

public class AlertCommandTest {

    @Test
    public void testAlert() throws Exception{
        // 设置 WebDriver 的路径
        System.setProperty("webdriver.chrome.driver", "C:\\Users\\jingnan\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        String url = "file:///C:/Users/jingnan/IdeaProjects/selenium-java/src/main/resources/alert.html";
        driver.get(url);

        // 定位 alert 按钮
        WebElement alertBtn = driver.findElement(By.xpath("/html/body/input[1]"));
        // 点击 alert 按钮
        alertBtn.click();
        // 切换到到弹出框后，获取弹出框的文本信息
        System.out.println(driver.switchTo().alert().getText());
        // 点击确定
        driver.switchTo().alert().accept();
        Thread.sleep(2000);
    }
}

执行上述代码，执行过程如下：

3-4-2

控制台输出内容如下：

this is a alert window.

Confirm 弹出框定位与操作

在 AlertCommandTest 测试类中新增测试方法 testConfirm，用来测试 confirm 弹出框，具体代码如下：

package cn.lanqiao.elements;

import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

public class AlertCommandTest {

    @Test
    public void testConfirm() throws Exception{
        // 设置 WebDriver 的路径
        System.setProperty("webdriver.chrome.driver", "C:\\Users\\jingnan\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        String url = "file:///C:/Users/jingnan/IdeaProjects/selenium-java/src/main/resources/alert.html";
        driver.get(url);

        WebElement confirmBtn = driver.findElement(By.xpath("/html/body/input[2]"));
        // 点击 Confirmation 按钮
        confirmBtn.click();
        // 输出弹出框中的文本信息
        System.out.println("确认框中的文本信息为：" + driver.switchTo().alert().getText());
        // 点击弹出框中的确认按钮
        driver.switchTo().alert().accept();

        Thread.sleep(3000);
        // 再次点击 confirmation 按钮
        confirm.click();
        // 点击弹出框中的取消按钮
        // driver.switchTo().alert().dismiss();
    }
}

执行上述测试方法，执行过程如下：

3-4-3

控制台输出内容如下：

确认框中的文本信息为：This is a confirm window.

confirm 弹出框可以点击确定或者取消，分别通过 accept 方法和 dismiss 方法来表示。

Prompt 弹出框定位与操作

新建一个 HTML 页面 prompt.html，页面内容如下：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Prompt Test</title>
</head>
<script type="text/javascript">
   function showPrompt(){
       var t1 = document.from1.t1;
       t1.value = prompt("请输入信息：");
   }
</script>
<body>
<h2>Prompt Test</h2>
<form name="from1">
    <input type="button" name="button1" value="点击Prompt按钮" onclick="showPrompt()"><br><br>
    <input type="text" name="t1">
</form>
</body>
</html>

上述页面中包含了一个 JS 函数，该函数触发时会将 Prompt 弹出框中输入的内容并点击确定后在页面中的输入框中显示出来，如下图所示：

3-4-4

3-4-5

这样我们就可以通过输入框中显示的内容来观察 Prompt 弹出框中输入的内容了。

在 AlertCommandTest 测试类中新增测试方法 testPrompt，该方法打开的 URL 地址为刚刚创建的 prompt.html 页面，具体代码如下：

package cn.lanqiao.elements;

import org.junit.Test;
import org.openqa.selenium.Alert;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

public class AlertCommandTest {

    @Test
    public void testPrompt() throws Exception{
        // 设置 WebDriver 的路径
        System.setProperty("webdriver.chrome.driver", "C:\\Users\\jingnan\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        String url = "file:///C:/Users/jingnan/IdeaProjects/selenium-java/src/main/resources/prompt.html";
        driver.get(url);
        // 定位 prompt 按钮
        WebElement promptBtn = driver.findElement(By.name("button1"));
        // 点击 prompt 按钮，出现弹出框
        promptBtn.click();
        Alert prompt = driver.switchTo().alert();
        Thread.sleep(2000);
        // 往弹出框中输入信息
        String text = "蓝桥云课";
        prompt.sendKeys(text);
        Thread.sleep(2000);
        // 点击确定
        prompt.accept();

        Thread.sleep(5000);
        driver.quit();
    }
}

执行上述代码，输出过程如下：

3-4-6

处理 Cookie

Cookie 是 HTTP 请求头中的内容，Cookie 中存储这用户的登录信息，通常我们在记性自动化测试时需要跳过用户验证或者登录的时候，就可以通过添加已登录用户的 Cookie 信息来绕过用户验证，免去登录授权的操作。

Cookie 是由多个键值对组成的，Selenium 中通过 WebDriver 中的 Options 来管理 Cookie，Options 类可以通过 driver 调用 manage() 方法来获取，Cookie 的操作包括了一下几个操作，分别是：

getCookies：获取全部 Cookie 信息
addCookie：添加 Cookie
deleteAllCookies：删除所有的 Cookie
deleteCookieNamed: 删除指定的 Cookie
getCookieNamed：获取指定的 Cookie

在 elements 包下创建一个新的测试类 CookieManageTest，测试 Cookie 的增删改查操作，具体代码如下：

package cn.lanqiao.elements;

import org.junit.Test;
import org.openqa.selenium.Cookie;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

import java.util.Set;

public class CookieManageTest {

    @Test
    public void testCookie() throws Exception{
        // 设置 WebDriver 的路径
        System.setProperty("webdriver.chrome.driver", "C:\\Users\\jingnan\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        String url = "https://www.lanqiao.cn";
        driver.get(url);

        WebDriver.Options options = driver.manage();
        // 获取 Cookie 的集合
        Set<Cookie> cookieSet = options.getCookies();
        // 输出 所有的 Cookie 的 Name 和 Value
        for (Cookie cookie : cookieSet) {
            System.out.println(cookie.getName() + ": " + cookie.getValue());
        }
        Thread.sleep(2000);

        // 删除所有的 cookie
        options.deleteAllCookies();
        Thread.sleep(2000);
        // 在页面上执行登录操作，获取一个有效的cookie
        // Cookie 的构造方法要输入一个 Cookie 的名称，Cookie 的 Value 以及作用范围，
        // / 表示在当前域名下的所有路径都生效
        Cookie loginCookie = new Cookie("lqtoken", "34808c603c2bbc864fe4a90c76441249", "/");
        // 将 cookie 添加到 options 中
        options.addCookie(loginCookie);
        // 刷新页面，此时已变成登录状态
        driver.navigate().refresh();

        Thread.sleep(5000);
        driver.quit();
    }
}

执行上述方法，控制台输出了此时包含的所有的 Cookie 信息，如下图所示：

3-4-7

浏览器执行过程如下：

3-4-8

可以确定在添加了 Cookie 之后，页面从未登录状态在刷新后变成了已登录状态，并出现了用户名等信息。

处理文件上传

文件上传也是页面中常见的操作，我们以蓝桥云课的个人中心的上传头像为例来剖析文件上传。

登录云课官网后打开 profile 页面，地址如下 https://www.lanqiao.cn/user/profile/，点击头像，进入文件上传的输入框，打开浏览器的检查工具，选中更换图片按钮，如下图所示：

3-4-9

表面上我们是通过点击更换图片按钮来打开 Window 框来选择图片上传，实际上真正起作用的是这里的一个 input 框，该 input 框的 class 属性是 hidden，说明它是隐藏起来的，我们可以删除该属性或者通过一段 js 代码来删除，如下图所示：

3-4-10

此时，我们可以看到选择文件按钮显示在了页面中，至于为什么要将更换图片按钮覆盖在文件上传按钮上呢，这是因为文件上传按钮本身的格式非常简单，为了契合整体的页面设计，通常会将该按钮隐藏，通过覆盖一个按钮来实现点击打开 Windows 图片选择框。

那么我们想要上传文件就要定位真正的文件上传按钮，然后选择文件进行上传，但是文件选择是一个 Windows 系统弹出框，Selenium 是无法定位这个框的，因此使用 Selenium 操作 Windows 弹出框选择图片是无法实现的。

但是文件上传按钮本身是一个 input 标签，我们可以通过 input 标签的 sendKeys 方法输入一个文件路径，就可以实现在 Windows 弹出框中选择文件相同的效果，因此这就是我们的最终解决方案。

在 elements 包下创建一个新的测试类 UploadFileTest，并在 resources 目录下存储一张头像图片 avatar.png, 具体代码如下：

package cn.lanqiao.elements;

import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.Cookie;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

public class UploadFileTest {

    @Test
    public void testAvatarUpload() throws Exception{
        // 设置 WebDriver 的路径
        System.setProperty("webdriver.chrome.driver", "C:\\Users\\jingnan\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        String url = "https://passport.lanqiao.cn/profile";
        driver.get(url);
        WebDriver.Options options = driver.manage();
        // 添加登录的 cookie，从页面的登录操作中获取一个cookie
        options.addCookie(new Cookie("lqtoken", "34808c603c2bbc864fe4a90c76441249", "/"));
        driver.navigate().refresh();
        // 点击头像
        driver.findElement(By.className("avatar-wrap")).click();

        // 定位 input
        Thread.sleep(5000);
        // 选择一个文件
        driver.findElement(By.className("hidden")).sendKeys("C:\\Users\\jingnan\\selenium-java\\src\\main\\resources\\avatar.png");
        driver.findElement(By.cssSelector(".cropper-preview .ant-btn-primary")).click();

        Thread.sleep(5000);
        driver.quit();
    }
}

执行上述代码，输出过程如下：

3-4-11

根据执行过程可以确定，成功实现了图片上传功能。

标签： selenium 前端 javascript

本文转载自: https://blog.csdn.net/onforget/article/details/137580481
版权归原作者 onforget 所有，如有侵权，请联系我们删除。

Selenium 特殊元素定位与操作

Alert 弹出框定位与操作

Confirm 弹出框定位与操作

Prompt 弹出框定位与操作

处理 Cookie

处理文件上传

发表评论

“Selenium 特殊元素定位与操作”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航