自动化测试Selenium(4)

WebDriver相关api

定位一组元素

webdriver可以很方便地使用findElement方法来定位某个特定的对象, 不过有时候我们需要定位一组对象, 这时候就要使用findElements方法.

定位一组对象一般用于一下场景:

批量操作对象, 比如将页面上的checkbox都勾上.

先获取一组对象, 再在这组对象中过滤出需要具体定位的对象. 比如定位出页面上的checkbox, 然后选取最后一个.

通过类似下面这种形式可以定位一组元素.

List<WebElement> webElements = webDriver.findElements(.......);

下面我们在实际场景下使用一下, 先给出我们需要用到的html代码, 放入resource即可:

<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 test10() {
        WebDriver webDriver = new ChromeDriver();
        //这个是提供前端代码在文件中的路径
        webDriver.get("file:///C:/Users/86133/Desktop/%E6%96%87%E7%AB%A0/%E8%AF%BE%E4%BB%B6/html/%E6%B5%8B%E8%AF%95%E7%94%A8/test01.html");
        webDriver.manage().timeouts().implicitlyWait(3, TimeUnit.DAYS);
        //找到所有的input框
        List<WebElement> webElements = webDriver.findElements(By.cssSelector("input"));
        for(int i = 0; i < webElements.size(); i++) {
            //如果每个元素type等于checkbox进行点击(注:这里可能是radio-单选框, checkbox-多选框)
            //getAttribute获取页面的属性值, 比对
            if(webElements.get(i).getAttribute("type").equals("checkbox")) {
                webElements.get(i).click();
            }
        }
    }

测试结果:

可以看到成功地完成了多选.

多层框架/窗口定位

对于一个web应用, 经常会出现框架(frame)或窗口(window)的应用, 这也就给我们的定位带来了一定的困难.

窗口是操作系统中的基本用户界面元素, 用于承载应用程序的可视化界面, 通常由标题栏, 菜单栏, 工具栏, 客户区和边框组成. 而框架是一种高级的GUI组件, 用于创建具有特定功能和外观的窗口, 通常是窗口的一种特殊类型或子类,具有额外的功能和布局选项.

定位一个frame: webDriver.switchTo().frame()

定位一个窗口window: webDriver.switchTo().window()

多层框架的定位

switchTo.frame(): 通过frame的id或者name或者frame自带的其它属性来定位框架, 这里switchTo().frame()把当前定位的主体切换到了frame里.

webDriver.switchTo().defaultContent(): 从frame中嵌入的页面里跳出, 跳回到最外面的默认页面中.

下面我们来测试一下(需求: 定位到inner, 并点击click), 先给出外层frame的html代码:

<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>frame</title>
<!--  <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-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="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>-->
</html>

inner.html:

<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>inner</title>
</head>
<body>
<div class="row-fluid">
  <div class="span6 well">
    <h3>inner</h3>
    <iframe id="f2" src="https://www.baidu.com/"
            width="700"height="500"></iframe>
    <a href="javascript:alert('watir-webdriver better than selenium webdriver;')">click</a>
  </div>
</div>
</body>
</html>

测试代码:

    private static void test11() {
        WebDriver webDriver = new ChromeDriver();
        webDriver.get("file:///C:/Users/86133/Desktop/%E6%96%87%E7%AB%A0/%E8%AF%BE%E4%BB%B6/html/%E6%B5%8B%E8%AF%95%E7%94%A8/test02.html");
        webDriver.switchTo().frame("f1");
        webDriver.findElement(By.cssSelector("body > div > div > a")).click();
    }

运行结果(建议自行测试):

这时可以看到成功定位了, 并完成了指定的点击操作.

多层窗口定位

有可能嵌套的不是框架, 而是窗口, 还有针对窗口的方法: switchTo.window("windowName");

下拉框处理

下拉框是我们最常见的一种页面元素, 对于一般的元素, 我们只需要一次就定位, 但是对于下拉框里的内容需要进行两次定位, 先定位到下拉框对下拉框进行操作时, 在定位到下拉框里的选项.

测试一下, 先给出html代码:

<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>

现在我们来选择性地定位元素:

    private static void test12() throws InterruptedException {
        WebDriver webDriver = new ChromeDriver();
        webDriver.get("file:///C:/Users/86133/Desktop/%E6%96%87%E7%AB%A0/%E8%AF%BE%E4%BB%B6/html/%E6%B5%8B%E8%AF%95%E7%94%A8/test03.html");
        //定位到下拉框
        WebElement webElement = webDriver.findElement(By.cssSelector("#ShippingMethod"));
        //创建Select对象来操作下拉框列表
        Select select = new Select(webElement);
        sleep(3000);
        //选择到第3个元素(下标从0开始)
        select.selectByIndex(3);
        sleep(3000);
        //选择到值为12.51的元素
        select.selectByValue("12.51");
    }

请自行测试以查看结果.

弹窗操作

有时候在页面中可能会"蹦出"一些弹窗, 那么我们应该怎么对弹窗操作呢? 下面给出几种操作方法:

我们通过 switch().alert()来对弹窗进行操作, 下面给出几种常见的操作组合:
1.弹窗确认: switchTo().alert().accept();

2.弹窗取消: switchTo().alert().dismiss();

3.向弹窗中输入内容: switchTo().alert().sendKeys(".....");

下面我们给出html代码,我们来测试一下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="Click()">这是一个弹窗</button>
</body>
<script type="text/javascript">
  function Click() {
    let name = prompt("请输入姓名：");
    let parent = document.querySelector("body");
    let child = document.createElement("div");
    child.innerHTML = name;
    parent.appendChild(child)
  }
</script>
</html>

测试代码:

    private static void test13() throws InterruptedException {
        WebDriver webDriver = new ChromeDriver();
        webDriver.get("file:///C:/Users/86133/Desktop/%E6%96%87%E7%AB%A0/%E8%AF%BE%E4%BB%B6/html/%E6%B5%8B%E8%AF%95%E7%94%A8/test04.html");
        //找到"这是一个弹窗"按钮并点击
        webDriver.findElement(By.cssSelector("button")).click();
        sleep(3000);
        //弹窗取消
        webDriver.switchTo().alert().dismiss();
        sleep(3000);
        webDriver.findElement(By.cssSelector("button")).click();
        //在弹窗中输入内容
        webDriver.switchTo().alert().sendKeys("初音未来");
        //弹窗确认
        sleep(3000);
        webDriver.switchTo().alert().accept();
    }

选择文件并放置

这个与输入类似, 使用sendKeys()操作即可.

eg: webDriver.findElement(By.cssSelector("")).sendKeys("文件路径");

跳转页面选择元素

在前面, 我们学习了在一个页面中选择元素, 就是通过一个元素的标签或者类名什么的来进行定位. 那么我要问一个问题, 在当前页面中选择一个元素, 再在会跳转到的页面选择一个元素, 那么这个元素还生效吗? 我们不妨来测试一下:

比如先在百度首页点击新闻, 然后跳转后输入新闻联播:

按照先前的方法, 我们来测试一下:

我们发现这里报错了, 这里我们得出结论:

在页面跳转后, 已选择的下拉表元素可能会丢失选中状态, 这取决于页面的实现和浏览器的行为(即你要找的元素默认是在get方法打开的页面来寻找的). 通常情况下, 页面跳转后, 之前的页面会被清除, 包括下拉列表的选中状态. 并且还有一个问题,跳转后的页面和当前的页面可能会出现id一致的问题.

那么我们应该怎么解决这个问题呢?

针对上面发现的问题, 就是出现在,页面跳转后丢失了选中状态, 所以我们应该在页面跳转之后保持选中状态, 可以考虑在页面跳转前记录当前选中的选项值, 并在跳转后再次选中该值. 或者在页面跳转后重新定位到下拉列表元素, 并重新选择之前选中的选项.

那么怎么实现呢?

这就使用到了获取句柄的方法.

句柄的定义: 总的来说, 句柄是一个通用的概念, 用来引用和操作各种对象. 它提供了一种抽象的方式来管理和访问对象, 使得程序能够更灵活地进行处理.

在Selenium WebDriver中, getWindowHandle()和getWindowHandles()方法用于处理浏览器窗口和标签页的句柄.

1.getWindowHandle(): 这个方法用于获取当前浏览器窗口或标签页的句柄(handle). 句柄是一个字符串, 表示当前窗口或标签页的唯一标识符.

String currentWindowHandle = webDriver.getWindowHandle();

2.getWindowHandles(): 这个方法用于获取当前浏览器所有窗口或标签页的句柄集合. 返回的是一个包含所有窗口句柄的集合.

Set<String> windowHandles = webDriver.getWindowHandles();

修改一下代码:

    private static void test11() throws InterruptedException {
        WebDriver webDriver =  new ChromeDriver();
        webDriver.get("https://www.baidu.com");
        webDriver.findElement(By.cssSelector("#s-top-left > a:nth-child(1)")).click();
        Thread.sleep(3000);
        //通过getWindowHandles获取所有的窗口句柄
        //通过getWindowHandle获取的get打开的页面窗口句柄.
        System.out.println(webDriver.getWindowHandle());
        //获取到所有的窗口句柄,存储到一个set集合中
        Set<String> handles = webDriver.getWindowHandles();
        String target_handle = "";
        for(String handle : handles) {
            target_handle = handle;
        }
        //这个就是打开新窗口的句柄
        webDriver.switchTo().window(target_handle);
        Thread.sleep(3000);
        webDriver.findElement(By.cssSelector("#ww")).sendKeys("新闻联播");
        webDriver.findElement(By.cssSelector("#s_btn_wr")).click();
    }

运行, 发现能够正确处理逻辑了.

截图功能

这里直接给出代码:

    private static void test12() throws InterruptedException, IOException {
        WebDriver webDriver = new ChromeDriver();
        webDriver.get("https://www.baidu.com/");
        webDriver.findElement(By.cssSelector("#kw")).sendKeys("软件测试");
        webDriver.findElement(By.cssSelector("#su")).click();
        Thread.sleep(3000);
        //使用WebDriver截图功能进行页面截图, 首先将WebDriver强制转换为TakesScreenshot接口
        //然后调用getScreenshotAs方法获取截图文件
        File file = ((TakesScreenshot)webDriver).getScreenshotAs(OutputType.FILE);
        //使用FileUtils工具将截图文件保存到本地
        FileUtils.copyFile(file, new File("D://2024419jietu.png"));
    }

运行代码, 发现截图成功: