selenium webdriver学习 11 – 怎么等待页面元素加载完成

web的自动化测试中,我们经常会遇到这样一种情况:当我们的程序执行时需要页面某个元素,而此时这个元素还未加载完成,这时我们的程序就会报错。怎么办?等待。等待元素出现后再进行对这个元素的操作。
在selenium-webdriver中我们用两种方式进行等待:明确的等待和隐性的等待。
明确的等待
明确的等待是指在 代码进行下一步操作之前等待某一个条件的发生。最不好的情况是使用Thread.sleep()去设置一段确认的时间去等待。但为什么说最不好呢?因为一 个元素的加载时间有长有短,你在设置sleep的时间之前要自己把握长短,太短容易超时,太长浪费时间。selenium webdriver提供了一些方法帮助我们等待正好需要等待的时间。利用WebDriverWait类和ExpectedCondition接口就能实现这一点。
下面的html代码实现了这样的一种效果:点击click按钮5秒钟后,页面上会出现一个红色的div块。我们需要写一段自动化脚本去捕获这个出现的div,然后高亮之。

Wait.html  
 
<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块的功能:

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();  
        String url = "file:///C:/Documents and Settings/gongjf/桌面/selenium_test/Wait.html";// "/Your/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,直到有成功的返回,当然如果超过设定的值还没有成功的返回,将抛出异常。
隐性等待
隐性等待是指当要查找元素,而这个元素没有马上出现时,告诉WebDriver查询Dom一定时间。默认值是0,但是设置之后,这个时间将在WebDriver对象实例整个生命周期都起作用。上面的代码就变成了这样:

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/gongjf/桌面/selenium_test/Wait.html";// "/Your/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);    
         
    }  
}
两者选其一,第二种看起来一劳永逸呀。哈哈

继续阅读
  • 我们QQ群
  • QQ扫一扫
  • weinxin
  • 微信公众号
  • 公众号扫一扫
  • weinxin
TestWhite
  • 本文由 发表于 2018年4月18日14:56:19
  • 请您在转载时请务必保留本文链接:https://www.playezu.com/10912.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: