WebDriver拾级而上·之九等待页面加载元素完成-优快云博客

web的自动化测试中，我们经常会遇到这样一种情况：当我们的程序执行时需要页面某个元素，而此时这个元素还未加载完成，这时我们的程序就会报错。怎么办？等待。等待元素出现后再进行对这个元素的操作。

在selenium-webdriver中我们用两种方式进行等待：明确的等待和隐性的等待。

一、明确的等待

明确的等待是指在代码进行下一步操作之前等待某一个条件的发生。最不好的情况是使用Thread.sleep()去设置一段确认的时间去等待。但为什么说最不好呢？因为一个元素的加载时间有长有短，你在设置sleep的时间之前要自己把握长短，太短容易超时，太长浪费时间。

selenium webdriver提供了一些方法帮助我们等待正好需要等待的时间。利用WebDriverWait类和ExpectedCondition接口就能实现这一点。

下面的html代码实现了这样的一种效果：点击click按钮5秒钟后，页面上会出现一个红色的div块。我们需要写一段自动化脚本去捕获这个出现的div，然后高亮之。

Html代码

wait.html 放在桌面

<html>

<head>

<title>SetTimeout</title>

<style>

.red_box{background-color:red;width=20%;height:100px;border:none;}

</style>

functionshow_div(){

setTimeout("create_div()",5000);

}

functioncreate_div(){

d=document_createElement_x('div');

d.className="red_box";

document.body.a(d);

}

</script>

</head>

<body>

<buttonid="b"onclick="show_div()">click</button>

</body>

</html>

下面的代码实现了高亮动态生成的div块的功能：

Java代码

package com.test;

import org.openqa.selenium.By;

import org.openqa.selenium.JavascriptExecutor;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;

import org.openqa.selenium.support.ui.ExpectedCondition;

import org.openqa.selenium.support.ui.WebDriverWait;

public class Test_waitfor {

public static void main(String[] args) {

String url = "file:///C:/Documents and Settings/fei yong/桌面/wait.html";

//打开chrome

WebDriver dr = new ChromeDriver();

dr.get(url);

WebElement button_b = dr.findElement(By.id("b"));

button_b.click();

WebDriverWait wait = new WebDriverWait(dr,10);

wait.until(new ExpectedCondition<WebElement>(){

@Override

public WebElement apply(WebDriver d) {

return d.findElement(By.className("red_box"));

}

});

WebElement element = dr.findElement(By.cssSelector(".red_box"));

System.out.println("获取.red_box的背景颜色属性值:"+element.getCssValue("background-color"));

//在红色区域外面加黄框

((JavascriptExecutor)dr).executeScript("arguments[0].style.border = \"5px solid yellow\"",element);

dr.quit();

}

页面输出：

Started ChromeDriver

port=36071

version=19.0.1068.0

log=E:\android\selenium\test_wdng_java\chromedriver.log

获取.red_box的背景颜色属性值:rgb(255, 0, 0)

上面的代码WebDriverWait类的构造方法接受了一个WebDriver对象和一个等待最长时间（10秒）。然后调用until方法，其中重写了ExpectedCondition接口中的apply方法，让其返回一个WebElement,即加载完成的元素，然后点击。默认情况下，WebDriverWait每500毫秒调用一次ExpectedCondition，直到有成功的返回，当然如果超过设定的值还没有成功的返回，将抛出异常。

二、隐性等待 隐性等待是指当要查找元素，而这个元素没有马上出现时，告诉WebDriver查询Dom一定时间。默认值是0,但是设置之后，这个时间将在WebDriver对象实例整个生命周期都起作用。上面的代码就变成了这样： Java代码 <div>package com.test;</div> <div> </div> <div>import java.util.concurrent.TimeUnit;</div> <div> </div> <div>import org.openqa.selenium.By;</div> <div>import org.openqa.selenium.JavascriptExecutor;</div> <div>import org.openqa.selenium.WebDriver;</div> <div>import org.openqa.selenium.WebElement;</div> <div>import org.openqa.selenium.chrome.ChromeDriver;</div> <div> </div> <div> </div> <div>public class Test_waitfor2 {</div> <div>public static void main(String[] args) {</div> <div> </div> <div>String url = "file:///C:/Documents and Settings/fei yong/桌面/wait.html";</div> <div>//打开chrome</div> <div>WebDriver dr = new ChromeDriver();</div> <div>dr.get(url);</div> <div></div> <div>//设置10秒</div> <div>dr.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);</div> <div> </div> <div>dr.findElement(By.id("b")).click();</div> <div></div> <div>WebElement element = dr.findElement(By.cssSelector(".red_box"));</div> <div>System.out.println("获取.red_box的背景颜色属性值:"+element.getCssValue("background-color"));</div> <div>//在红色区域外面加黄框</div> <div>((JavascriptExecutor)dr).executeScript("arguments[0].style.border = \"5px solid yellow\"",element); </div> <div></div> <div>//dr.quit();</div> <div>}</div> <div>}</div>

页面输出：

Started ChromeDriver

port=37023

version=19.0.1068.0

log=E:\android\selenium\test_wdng_java\chromedriver.log

获取.red_box的背景颜色属性值:rgb(255, 0, 0)