Selenium 自动化测试工具＜2＞(Selenium 常用API的使用方法）

文章目录

- 浏览器操作
- - 浏览器最大化
  - 设置浏览器的大小
  - 浏览器的前进和后退
  - 操作浏览器滚动条
- 键盘事件
- - 单个按键用法
  - 键盘组合键用法
- 鼠标事件
- 不同窗口搜索
- 定位一组元素
- 定位多层框架
- 下拉框定位
- alert、confirm、prompt 的处理
- 上传文件操作
- 自动截屏

继上一篇文章对 Selenium API 的使用，本篇文章将继续讲解剩下的一些主要的 API 的使用方法。

浏览器操作

浏览器最大化

需要使用到的 API：

manage()
window()
maximize()

场景：对浏览器进行最大化，然后获取到百度页面上的“换一换”按钮，并且获得文本

在这里插入图片描述

代码实现：

    private static void test9() {
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 跳转百度页面
        webDriver.get("https://www.baidu.com/");
        //浏览器最大化
        webDriver.manage().window().maximize();
        //定位“换一换"按钮
        String text = webDriver.findElement(By.cssSelector("#hotsearch-refresh-btn > span")).getText();
        if(text != null) {
            System.out.println("测试通过,text:" + text);
        }else {
            System.out.println("测试未通过");
        }
    }

执行结果：

在这里插入图片描述

设置浏览器的大小

场景：将浏览器的大小设置成 200*400 的大小

涉及到的 API：

manage()
window()
setSize()

代码实现：

    private static void test10() {
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 指定跳转页面
        webDriver.get("https://www.baidu.com/");
        // 设置浏览器大小
        webDriver.manage().window().setSize(new Dimension(200, 400));
        webDriver.quit();
    }

执行结果：

在这里插入图片描述

浏览器的前进和后退

场景1：在百度输入框中输入“张三”，点击百度一下按钮进行搜索，搜索出来之后，点击导航栏上的后退按钮，重新返回到百度的主页面

涉及到的API：

navigate()
back()
forwrd()

代码实现：

private static void test11() throws InterruptedException {
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 指定跳转页面
        webDriver.get("https://www.baidu.com/");
        // 选择输入框，输入张三
        webDriver.findElement(By.cssSelector("#kw")).sendKeys("张三");
        // 选择百度一下并点击
        webDriver.findElement(By.cssSelector("#su")).click();
        System.out.println("当前页面的url:" + webDriver.getCurrentUrl());
        //进入新的页面，休眠3秒
        sleep(3000);
        //选择控制台上的后退按钮
        webDriver.navigate().back();
        //休眠三秒，后退之后，获取当前页面的url
        sleep(3000);
        System.out.println("后退之后，当前页面的url:" + webDriver.getCurrentUrl());
        webDriver.quit();
    }

执行结果：

在这里插入图片描述

场景2：场景1：在百度输入框中输入“张三”，点击百度一下按钮进行搜索，搜索出来之后，点击导航栏上的后退按钮，重新返回到百度的主页面，然后再点击前进按钮，重新回到刚才搜索到的张三页面。

代码实现：

private static void test12() throws InterruptedException {
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 指定跳转页面
        webDriver.get("https://www.baidu.com/");
        // 选择输入框，输入张三
        webDriver.findElement(By.cssSelector("#kw")).sendKeys("张三");
        // 选择百度一下并点击
        webDriver.findElement(By.cssSelector("#su")).click();
        String currentUrl = webDriver.getCurrentUrl();
        System.out.println("搜索到张三的页面的url:" + currentUrl);
        //进入新的页面，休眠3秒
        sleep(3000);
        //选择控制台上的后退按钮
        webDriver.navigate().back();
        //休眠三秒，后退之后，获取当前页面的url
        sleep(3000);
        System.out.println("后退之后，当前页面的url:" + webDriver.getCurrentUrl());
        //进行前进
        webDriver.navigate().forward();
        sleep(3000);
        // 获取到前进后的页面
        String currentUrl1 = webDriver.getCurrentUrl();
        System.out.println(currentUrl1);
        // 判断前进后的页面和第一次搜索到的页面是不是同一个，如果是，则测试通过，否则测试未通过
        if(currentUrl.equals(currentUrl1)) {
            System.out.println("测试通过");
        }else {
            System.out.println("测试未通过");
        }
        webDriver.quit();
    }

在这里插入图片描述

操作浏览器滚动条

浏览器滚动条的控制需要依靠 js 脚本，代码如下：

#将浏览器滚动条滑到最顶端document.documentElement.scrollTop=0
#将浏览器滚动条滑到最底端
document.documentElement.scrollTop=10000

涉及到的API：

executeScript()

Java代码实现操作：

private static void test13() throws InterruptedException {
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 指定跳转页面
        webDriver.get("https://www.baidu.com/");
        // 选择输入框，输入张三
        webDriver.findElement(By.cssSelector("#kw")).sendKeys("张三");
        // 选择百度一下并点击
        webDriver.findElement(By.cssSelector("#su")).click();
        //休眠3秒，等待页面完成渲染
        sleep(3000);
        //将滚动条划到最下面
        String js_bottom = "document.documentElement.scrollTop=10000";
        ((JavascriptExecutor)webDriver).executeScript(js_bottom);
        sleep(3000);
        //将滚动条移动到最上面
        String js_up = "document.documentElement.scrollTop=0";
        ((JavascriptExecutor)webDriver).executeScript(js_up);
        sleep(3000);
        webDriver.quit();
    }

这里执行的结果，请自行演示。

键盘事件

单个按键用法

自动输入键盘上一些按键的用法，常见的如下：

webDriver.sendKeys(Keys.ENTER) 回车
webDriver.sendKeys((Keys.TAB) TAB
webDriver.sendKeys((Keys.SPACE) 空格键
webDriver.sendKeys((Keys.ESCAPE) 回退键

这里的用法都一样，所以，下面只讲解一个回车键一个例子

private static void test14() throws InterruptedException {
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 指定跳转页面
        webDriver.get("https://www.baidu.com/");
        // 选择输入框，输入张三
        webDriver.findElement(By.cssSelector("#kw")).sendKeys("张三");
        // 使用回车键搜索
        webDriver.findElement(By.cssSelector("#kw")).sendKeys(Keys.ENTER);
        sleep(3000);
        // 获取当前页面的url
        System.out.println(webDriver.getCurrentUrl());
        webDriver.quit();

    }

键盘组合键用法

webDriver.sendKeys(Keys.CONTROL, “A”) 全选（Ctrl+A）
webDriver.sendKeys(Keys.CONTROL,”C”) 复制（Ctrl+C）
webDriver.sendKeys(Keys.CONTROL,”X”) 剪贴（Ctrl+X）
webDriver.sendKeys(Keys.CONTROL,”V”) 粘贴（Ctrl+V）

代码实现：

private static void test15() throws InterruptedException {
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 指定跳转页面
        webDriver.get("https://www.baidu.com/");
        // 选择输入框，输入张三
        webDriver.findElement(By.cssSelector("#kw")).sendKeys("张三");
        sleep(3000);
        //全选输入框中的文本，也就是张三 ctrl+A
        webDriver.findElement(By.cssSelector("#kw")).sendKeys(Keys.CONTROL, "A");
        sleep(3000);
        //剪切文本ctrl+X
        webDriver.findElement(By.cssSelector("#kw")).sendKeys(Keys.CONTROL, "X");
        sleep(3000);
        //粘贴文本ctrl+V
        webDriver.findElement(By.cssSelector("#kw")).sendKeys(Keys.CONTROL, "V");
    }

执行结果自行测试观察现象。

鼠标事件

鼠标的一些常用动作如下：

Action.contextClick()右击
Action.doubleclick() 双击
Action.dragAndDrop() 拖动
Action.moveToElement() 移动

场景：在搜索框中输入张三，点击回车键搜索，然后将鼠标移动到图片上，然后鼠标点击右键

在这里插入图片描述

代码实现：

private static void test16() throws InterruptedException {
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 指定跳转页面
        webDriver.get("https://www.baidu.com/");
        // 选择输入框，输入张三
        webDriver.findElement(By.cssSelector("#kw")).sendKeys("张三");
        // 使用回车键搜索
        webDriver.findElement(By.cssSelector("#kw")).sendKeys(Keys.ENTER);
        sleep(3000);
        // 创建一个Actions对象，生成用户行为。
        Actions action = new Actions(webDriver);
        // 通过CSS选择器定位图片元素，定义一个目标
        WebElement element = webDriver.findElement(By.cssSelector("#s_tab > div > a.s-tab-item.s-tab-item_1CwH-.s-tab-pic_p4Uej.s-tab-pic"));
        //moveToElement(element)是将鼠标移动到指定的目标上
        //contextClick()点击鼠标右键
        //perform()显示以上执行的动作
        action.moveToElement(element).contextClick().perform();
    }

请自行执行代码观察效果。

不同窗口搜索

场景：在百度搜索页面，点击新闻按钮，然后进入新闻页面，在新闻页面的搜索框中搜索乌克兰，进行页面跳转。

在这里插入图片描述

代码实现：

    private static void test17() {
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 进入百度主页面
        webDriver.get("https://www.baidu.com/");
        // 定位新闻按钮并点击
        webDriver.findElement(By.cssSelector("#s-top-left > a:nth-child(1)")).click();
        // 进入到新闻页面，定位搜索框并输入“乌克兰”
        webDriver.findElement(By.cssSelector("#ww")).sendKeys("乌克兰");
        // 定位搜索按钮，并点击
        webDriver.findElement(By.cssSelector("#s_btn_wr")).click();
        webDriver.quit();
    }

执行结果：可以看到，结果最后报错了，并没有找到这样的元素，这是为什么呢？

在这里插入图片描述

异常原因：

可以看到，点击新闻后，又打开了一个新的窗口，但是，上述代码中，我们想要定位的是百度新闻页面的搜索框，从新闻页面中搜索乌克兰，而上述代码它还是在百度主页面查找元素，所以，它找不到这个搜索框，所以就会报错。

在这里插入图片描述

解决方法：

把当前浏览器中的所有窗口获取到，因为新的窗口都是在最后一个，所以获取到最后一个窗口信息，然后进入到新的窗口中，进行后续的操作即可。

涉及到的API：

webDriver.getWindowHandles()
webDriver.switchTo().window(target);

private static void test17() throws InterruptedException {
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 进入百度主页面
        webDriver.get("https://www.baidu.com/");
        // 定位新闻按钮并点击
        webDriver.findElement(By.cssSelector("#s-top-left > a:nth-child(1)")).click();
        sleep(3000);
        // webDriver.getWindowHandle(); 获取当前窗口信息
        // 获取浏览器中所有的窗口
        Set<String> windowHandles = webDriver.getWindowHandles();
        // 遍历所有窗口，定位最后一个窗口,也就是百度新闻的敞口
        String target = "";
        for(String win : windowHandles) {
            target = win;
        }
        // 进入百度新闻的窗口中
        webDriver.switchTo().window(target);
        sleep(3000);
        // 进入到新闻页面，定位搜索框并输入“乌克兰”
        webDriver.findElement(By.cssSelector("#ww")).sendKeys("乌克兰");
        // 定位搜索按钮，并点击
        webDriver.findElement(By.cssSelector("#s_btn_wr")).click();
        sleep(3000);
        webDriver.quit();
    }

定位一组元素

使用 findElement() 方法可以很方便的定位到某个特定的对象，但是，有的时候我们需要定位一组元素，这时候就需要使用 findElements() 方法了。

场景：批量操作对象，比如，将下图中所有的 checkbox 都勾上。

实现步骤：将这一组元素都获取到，然后进行筛选，将checkbox都进行点击。

在这里插入图片描述

前端页面代码：

<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>Checkbox</title>
</head>
<body>
<h3>checkbox</h3>
<div class="well">
  <form class="form-horizontal">
    <div class="control-group">
      <label class="control-label" for="c1">checkbox1</label>
      <div class="controls">
        <input type="checkbox" id="c1" />
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="c2">checkbox2</label>
      <div class="controls">
        <input type="checkbox" id="c2" />
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="c3">checkbox3</label>
      <div class="controls">
        <input type="checkbox" id="c3" />
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="r">radio</label>
      <div class="controls">
        <input type="radio" id="r1" />
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="r">radio</label>
      <div class="controls">
        <input type="radio" id="r2" />
      </div>
    </div>
  </form>
</div>
</body>
</html>

代码实现：

private static void test18() throws InterruptedException {
        // 获取浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 跳转页面
        webDriver.get("file:///D:/gitee/java-code-exercise/untitled5/src/main/resources/test01.html");
        sleep(3000);
        // 通过css选择器中标签的方式，获取所有的input标签元素
        List<WebElement> input = webDriver.findElements(By.cssSelector("input"));
        // 遍历所有元素，对checkbox的元素进行点击
        for(WebElement ele : input) {
            String type = ele.getAttribute("type");
            if(type.equals("checkbox")) {
                //进行勾选
                ele.click();
            }
        }
        sleep(5000);
        webDriver.quit();
    }

定位多层框架

场景: 如下两张图，在frame框架中，还有一个inner框架，所以他是多层框架嵌套，现在，对inner框架中的click按钮进行点击。

在这里插入图片描述

前端页面代码：

<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>frame</title>
  <link
          href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstra
p-combined.min.css" rel="stylesheet" />
  <script type="text/javascript">$(document).ready(function(){
  });
  </script>
</head>
<body>
<div class="row-fluid">
  <div class="span10 well">
    <h3>frame</h3>
    <iframe id="f1" src="inner.html" width="800" ,
            height="600"></iframe>
  </div>
</div>
</body>
<script
        src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</html>

代码实现：

思路：先一层一层的定位框架，例如，先定位到最外层框架，这里通过 id 属性来定位框架。，然后再定位里面的框架，之后再进行后续的点击操作即可

前端代码连接：

在这里插入图片描述

涉及到的API:

webDriver.switchTo().frame(); 定位框架

    private static void test19() throws InterruptedException {
        // 获取浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 跳转页面
        webDriver.get("file:///D:/gitee/java-code-exercise/untitled5/src/main/resources/test02_01.html");
        sleep(3000);
        // 定位下层框架
        webDriver.switchTo().frame("f1");
        // 定位click按钮并点击
        webDriver.findElement(By.cssSelector("body > div > div > a")).click();
        sleep(2000);
    }

下拉框定位

场景：如下图，有一个下拉框，现在要打开下拉框，然后选中里面的某个选项。例如选中图中的9.03

在这里插入图片描述

前端页面代码：

<html>
<body>
<select id="ShippingMethod"
        onchange="updateShipping(options[selectedIndex]);" name="ShippingMethod">
  <option value="12.51">UPS Next Day Air ==> $12.51</option>
  <option value="11.61">UPS Next Day Air Saver ==> $11.61</option>
  <option value="10.69">UPS 3 Day Select ==> $10.69</option>
  <option value="9.03">UPS 2nd Day Air ==> $9.03</option>
  <option value="8.34">UPS Ground ==> $8.34</option>
  <option value="9.25">USPS Priority Mail Insured ==> $9.25</option>
  <option value="7.45">USPS Priority Mail ==> $7.45</option>
  <option value="3.20" selected="">USPS First Class ==> $3.20</option>
</select>
</body>
</html>

代码实现：

涉及到的API：

Select 对象
select.selectByIndex() 通过下标定位
select.selectByValue() 通过属性定位

private static void test20() throws InterruptedException {
        // 获取浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 跳转页面
        webDriver.get("file:///D:/gitee/java-code-exercise/untitled5/src/main/resources/test04.html");
        sleep(3000);
        // 选中下拉框
        WebElement element = webDriver.findElement(By.cssSelector("#ShippingMethod"));
        // 借助Select对象
        Select select = new Select(element);
        // 第一种方式
        // 通过下标定位到指定选项
        //select.selectByIndex(3);//下拉框中选项的下标从0开始

        //第二种方式
        // 通过value属性的值来确定指定的选项
        select.selectByValue("9.03");
        sleep(3000);
        webDriver.quit();

    }

alert、confirm、prompt 的处理

text() 方法返回弹框，确认框，提示框中的文本信息
accept() 点击确认按钮
dismiss() 点击取消按钮，如果有的的话。
alert() 定位弹窗

场景：点击弹窗链接按钮，然后先获取弹窗中的信息，测试获取的信息和弹窗中的信息是否一致，接着向对话框中输入我爱你，然后在页面上显示。

在这里插入图片描述

前端页面代码：

<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
    function disp_prompt(){
      let name = prompt("Please enter your name", "");
      if (name!=null &&name!=""){
        document.write("Hello " +name + "!")
      }
    }
  </script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value="请点击"/>
</body>
</html>

 private static void test21() throws InterruptedException {
        // 获取浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 跳转页面
        webDriver.get("file:///D:/gitee/java-code-exercise/untitled5/src/main/resources/test0502.html");
        //定位弹窗连接按钮，并点击
        webDriver.findElement(By.cssSelector("body > input[type=button]")).click();
        sleep(2000);
        //选择弹窗,并获取弹窗中的信息
        Alert alert = webDriver.switchTo().alert();
        System.out.println("弹窗中的信息：" + alert.getText());
        String info = "Please enter your name";
        if(alert.getText().equals(info)) {
            System.out.println("弹窗信息测试通过");
        }else {
            System.out.println("弹窗信息测试不通过");
        }
        //向弹窗的对话框中输入信息
        alert.sendKeys("我爱你");
        sleep(3000);
        //点击确认按钮
        alert.accept();
//        点击弹框中取消按钮
//        alert.dismiss();
        sleep(3000);
        //获取页面中的值
        String text = webDriver.findElement(By.cssSelector("body")).getText();
        String pageInfo = "Hello 我爱你!";
        if(text.equals(pageInfo)) {
            System.out.println("弹框信息测试成功: " + text);
        }else {
            System.out.println("弹框信息测试失败");
        }
        webDriver.quit();
    }

执行结果：

在这里插入图片描述

上传文件操作

在Selenium中的上传文件并没有那么复杂，只要定位到上传按钮，通过sendKeys添加本地文件路径即可，代码如下：

前端页面代码：

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>upload_file</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<link
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstra
p-combined.min.css" rel="stylesheet" />
<script type="text/javascript">
</script>
</head>
<body>
<div class="row-fluid">
<div class="span6 well">
<h3>upload_file</h3>
<input type="file" name="file" />
</div>
</div>
</body>
<script src="http://netdna.bootstrapcdn.com/twitterbootstrap/2.3.2/js/bootstrap.
min.js"></script>
</html>

代码实现：

    private static void test22() throws InterruptedException {
        // 获取浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        //跳转页面
        webDriver.get("file:///D:/gitee/java-code-exercise/untitled5/src/main/resources/test08.html");
        sleep(3000);
        //定位上传文件按钮，并点击
        WebElement element = webDriver.findElement(By.cssSelector("body > div > div > input[type=file]"));
        //上传文件路径
        element.sendKeys("D:\\无标题.png");
        webDriver.quit();
    }

自动截屏

在自动测试的过程中，如果测试结果不符合我们的预期，就可以把这个测试结果的现象给截图下来，这样就不用一直的对这个错误复现，要是使用自动截图，需要引入以下依赖：

<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.15.1</version>
</dependency>

场景：

在百度的页面输入张三，然后点击搜索，对搜索结果的页面进行截图。

在这里插入图片描述

代码实现：

    private static void test23() throws IOException, InterruptedException {
        // 获取浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 跳转百度页面
        webDriver.get("https://www.baidu.com/");
        sleep(3000);
        // 定位搜索框，输入张三，点击百度一下
        webDriver.findElement(By.cssSelector("#kw")).sendKeys("张三");
        webDriver.findElement(By.cssSelector("#su"));
        sleep(3000);
        // 截图
        File screenshotAs = ((TakesScreenshot) webDriver).getScreenshotAs(OutputType.FILE);
        // 将截图复制到指定的路径
        FileUtils.copyFile(screenshotAs, new File("d://搜索页面截图.pnj"));
        webDriver.quit();
    }