1. 程式人生 > >selenium之如何等待頁面元素載入完成

selenium之如何等待頁面元素載入完成

webdriver中我們用兩種方式進行等待:明確的等待和隱性的等待。

明確的等待

明確的等待是指在程式碼進行下一步操作之前等待某一個條件的發生。最不好的情況是使用Thread.sleep()去設定一段確認的時間去等待。但為什麼說最不好呢?因為一個元素的載入時間有長有短,你在設定sleep的時間之前要自己把握長短,太短容易超時,太長浪費時間。selenium webdriver提供了一些方法幫助我們等待正好需要等待的時間。利用WebDriverWait類和ExpectedCondition介面就能實現這一點。

下面的html程式碼實現了這樣的一種效果:點選click按鈕5秒鐘後,頁面上會出現一個紅色的div塊。我們需要寫一段自動化指令碼去捕獲這個出現的div,然後高亮之。

<html>  
    <head>  
        <title>Set Timeout</title>  
        <style>  
            .red_box {background-color: red; width = 20%; height: 100px; border: none;}  
        </style>  
        <script>  
            function show_div(){  
                setTimeout("create_div()"
, 5000); } function create_div(){ d = document.createElement('div'); d.className = "red_box"; document.body.appendChild(d); }
</script> </head> <body> <button
id = "b" onclick = "show_div()">
click</button> </body> </html>

下面的程式碼實現了高亮動態生成的div塊的功能:

[java] view plain copy print?
import org.openqa.selenium.By;  
import org.openqa.selenium.JavascriptExecutor;  
import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.WebElement;  
import org.openqa.selenium.firefox.FirefoxDriver;  
import org.openqa.selenium.support.ui.ExpectedCondition;  
import org.openqa.selenium.support.ui.WebDriverWait;  


public class WaitForSomthing {  

    /** 
     * @author aerchi 
     */  
    public static void main(String[] args) {  
        System.setProperty("webdriver.firefox.bin","D:\\Program Files\\Mozilla Firefox\\firefox.exe");    
        WebDriver dr = new FirefoxDriver();  
        String url = "file:///C:/Documents and Settings/aerchi/桌面/selenium/Wait.html";// "%Path%/to/Wait.html"  
        dr.get(url);  
        WebDriverWait wait = new WebDriverWait(dr,10);  
        wait.until(new ExpectedCondition<WebElement>(){  
            @Override  
            public WebElement apply(WebDriver d) {  
                return d.findElement(By.id("b"));  
            }}).click();  

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

    }  
}  

上面的程式碼WebDriverWait類的構造方法接受了一個WebDriver物件和一個等待最長時間(10秒)。然後呼叫until方法,其中重寫了ExpectedCondition介面中的apply方法,讓其返回一個WebElement,即載入完成的元素,然後點選。預設情況下,WebDriverWait每500毫秒呼叫一次ExpectedCondition,直到有成功的返回,當然如果超過設定的值還沒有成功的返回,將丟擲異常。

顯式等待可以使用selenium預置的判斷方法,也可以使用自定義的方法。

 1 package com.test.elementwait;
 2 
 3 import org.openqa.selenium.By;
 4 import org.openqa.selenium.WebDriver;
 5 import org.openqa.selenium.firefox.FirefoxDriver;
 6 import org.openqa.selenium.support.ui.ExpectedCondition;
 7 import org.openqa.selenium.support.ui.ExpectedConditions;
 8 import org.openqa.selenium.support.ui.WebDriverWait;
 9 
10 public class ExplicitWait {
11 
12     public static void main(String[] args) {
13         WebDriver driver = new FirefoxDriver();
14         driver.get("http://www.baidu.com");
15         driver.manage().window().maximize();
16 
17         //標題是不是“百度一下,你就知道”
18         new WebDriverWait(driver,5).until(ExpectedConditions.titleIs("百度一下,你就知道"));
19         //標題是不是包含“百度一下”
20         new WebDriverWait(driver,5).until(ExpectedConditions.titleContains("百度一下"));
21         //判斷該元素是否被載入在DOM中,並不代表該元素一定可見        
22         new WebDriverWait(driver,5).until(ExpectedConditions.presenceOfElementLocated(By.xpath("//*[@id='kw']")));
23         //判斷元素(定位後)是否可見
24         new WebDriverWait(driver,5).until(ExpectedConditions.visibilityOf(driver.findElement(By.xpath("//*[@id='kw']"))));
25         //判斷元素是否可見(非隱藏,並且元素的寬和高都不等以026         new WebDriverWait(driver,5).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[@id='kw']")));
27         //只要存在一個就是true
28         ExpectedConditions.presenceOfAllElementsLocatedBy(By.xpath("//*[@id='kw']"));
29         //元素中的text是否包含語氣的字串
30         ExpectedConditions.textToBePresentInElementLocated(By.xpath("//*[@id='kw']"), "百度一下");
31         //元素的value屬性中是否包含語氣的字串
32         ExpectedConditions.textToBePresentInElementValue(By.xpath("//*[@id='kw']"), "***");
33         //判斷該表單是否可以切過去,可以就切過去並返回true,否則放回false
34         ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("**"));
35         //判斷某個元素是否不存在於DOM或不可見
36         ExpectedConditions.invisibilityOfElementLocated(By.xpath("//*[@id='kw']"));
37         //判斷元素是否可以點選
38         ExpectedConditions.elementToBeClickable(By.xpath("//*[@id='kw']"));
39         //等到一個元素從DOM中移除
40         ExpectedConditions.stalenessOf(driver.findElement(By.xpath("//*[@id='kw']")));
41         //判斷某個元素是否被選中,一般用在下拉列表
42         ExpectedConditions.elementToBeSelected(By.xpath("//*[@id='kw']"));
43         //判斷某個元素的選中狀態是否符合預期
44         ExpectedConditions.elementSelectionStateToBe(By.xpath("//*[@id='kw']"), true);
45         //判斷某個元素(已定位)的選中狀態是否符合預期
46         ExpectedConditions.elementSelectionStateToBe(driver.findElement(By.xpath("//*[@id='kw']")), false);
47         //判斷頁面中是否存在alert
48         new WebDriverWait(driver,5).until(ExpectedConditions.alertIsPresent());
49         //--------------------自定義判斷條件-----------------------------
50         WebDriverWait wait = new WebDriverWait(driver, 3);
51         wait.until(new ExpectedCondition<Boolean>() {
52              public Boolean apply(WebDriver driver) {
53                  return !driver.findElement(By.xpath("//*[@id='kw']")).getAttribute("class").contains("x-form-invalid-field");
54                              }
55                  });
56         
57     }
58 
59 }


隱性等待

隱性等待是指當要查詢元素,而這個元素沒有馬上出現時,告訴WebDriver查詢Dom一定時間。預設值是0,但是設定之後,這個時間將在WebDriver物件例項整個生命週期都起作用。上面的程式碼就變成了這樣:
[java] view plain copy print?
import java.util.concurrent.TimeUnit;  

import org.openqa.selenium.By;  
import org.openqa.selenium.JavascriptExecutor;  
import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.WebElement;  
import org.openqa.selenium.firefox.FirefoxDriver;  
import org.openqa.selenium.support.ui.ExpectedCondition;  
import org.openqa.selenium.support.ui.WebDriverWait;  
public class WaitForSomthing {  

    /** 
     * @author gongjf 
     */  
    public static void main(String[] args) {  
        // TODO Auto-generated method stub  
        System.setProperty("webdriver.firefox.bin","D:\\Program Files\\Mozilla Firefox\\firefox.exe");    
        WebDriver dr = new FirefoxDriver();  

        //設定10秒  
        dr.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);  

        String url = "file:///C:/Documents and Settings/aerchi/桌面/selenium/Wait.html";// "%Path%/to/Wait.html"  
        dr.get(url);  
                 //註釋掉原來的  
        /*WebDriverWait wait = new WebDriverWait(dr,10); 
        wait.until(new ExpectedCondition<WebElement>(){ 
            @Override 
            public WebElement apply(WebDriver d) { 
                return d.findElement(By.id("b")); 
            }}).click();*/  
        dr.findElement(By.id("b")).click();  
        WebElement element = dr.findElement(By.cssSelector(".red_box"));  
        ((JavascriptExecutor)dr).executeScript("arguments[0].style.border = \"5px solid yellow\"",element);    

    }  
}  

兩者選其一,第二種看起來一勞永逸呀。哈哈
博主 用隱性等待是查詢之前會等麼 不管元素出現與否?

對的,如果一個無素沒有出現都會預設等待你所設定的時間,直到超時或者元素出現