51Testing软件测试论坛

标题: 【转帖】WebDriver拾级而上(09) – 等待页面加载元素完成 [打印本页]
作者: 悠悠小仙仙    时间: 2017-7-14 11:28
标题: 【转帖】WebDriver拾级而上(09) – 等待页面加载元素完成
[attach]107444[/attach]
web的自动化测试中，我们经常会遇到这样一种情况：当我们的程序执行时需要页面某个元素，而此时这个元素还未加载完成，这时我们的程序就会报错。怎么办？等待。等待元素出现后再进行对这个元素的操作。
在selenium-webdriver中我们用两种方式进行等待：明确的等待和隐性的等待。
一、明确的等待
明确的等待是指在代码进行下一步操作之前等待某一个条件的发生。最不好的情况是使用Thread.sleep()去设置一段确认的时间去等待。但为 什么说最不好呢？因为一个元素的加载时间有长有短，你在设置sleep的时间之前要自己把握长短，太短容易超时，太长浪费时间。
selenium webdriver提供了一些方法帮助我们等待正好需要等待的时间。利用WebDriverWait类和ExpectedCondition接口就能实现这一点。
下面的html代码实现了这样的一种效果：点击click按钮5秒钟后，页面上会出现一个红色的div块。我们需要写一段自动化脚本去捕获这个出现的div，然后高亮之。
Html代码 wait.html (放在桌面):
CODE:
  1. <font size="4"><html>
  2.     <head>
  3.         <title>Set Timeout</title>
  4.         <style>
  5.             .red_box {background-color: red; width = 20%; height: 100px; border: none;}
  6.         </style>
  7.         <script>
  8.             function show_div(){
  9.                 setTimeout("create_div()", 5000);
  10.             }
  11.    
  12.             function create_div(){
  13.                 d = document_createElement_x_x ('div');
  14.                 d.className = "red_box";
  15.                 document.body.a(d);
  16.             }
  17.         </script>
  18.     </head>
  19.     <body>
  20.         <button id = "b" onclick = "show_div()">click</button>
  21.     </body>
  22. </html></font>
复制代码

下面的代码实现了高亮动态生成的div块的功能：
Java代码:
CODE:
  1. <font size="4">package com.test;

  3. import org.openqa.selenium.By;
  4. import org.openqa.selenium.JavascriptExecutor;
  5. import org.openqa.selenium.WebDriver;
  6. import org.openqa.selenium.WebElement;
  7. import org.openqa.selenium.chrome.ChromeDriver;
  8. import org.openqa.selenium.support.ui.ExpectedCondition;
  9. import org.openqa.selenium.support.ui.WebDriverWait;

  11. public class Test_waitfor {
  12.     public static void main(String[] args) {
  13.         String url = "file:///C:/Documents and Settings/bestfei/桌面/wait.html";
  14.          
  15.         //打开chrome
  16.         WebDriver dr = new ChromeDriver();
  17.         dr.get(url);

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

  22.         WebDriverWait wait = new WebDriverWait(dr,10);
  23.         wait.until(new ExpectedCondition<WebElement>(){
  24.             @Override
  25.             public WebElement apply(WebDriver d) {
  26.                 return d.findElement(By.className("red_box"));
  27.             }
  28.         });

  30.         WebElement element = dr.findElement(By.cssSelector(".red_box"));
  31.         System.out.println("获取.red_box的背景颜色属性值:"+element.getCssValue("background-color"));
  32.          
  33.         //在红色区域外面加黄框
  34.         ((JavascriptExecutor)dr).executeScript("arguments[0].style.border = \"5px solid yellow\"",element);  

  36.         dr.quit();
  37.     }
  38. }</font>
复制代码

页面输出：
CODE:
  1. <font size="4">Started ChromeDriver
  2. port=36071
  3. version=19.0.1068.0
  4. log=E:\android\selenium\test_wdng_java\chromedriver.log
  5. 获取.red_box的背景颜色属性值:rgb(255, 0, 0)</font>
复制代码

上面的代码WebDriverWait类的构造方法接受了一个WebDriver对象和一个等待最长时间（10秒）。然后调用until方法，其中重写了 ExpectedCondition接口中的apply方法，让其返回一个WebElement,即加载完成的元素，然后点击。默认情况下，WebDriverWait每500毫秒调用一次ExpectedCondition，直到有成功的返回，当然如果超过设定的值还没有成功的返回，将抛出异常。
二、隐性等待
隐性等待是指当要查找元素，而这个元素没有马上出现时，告诉WebDriver查询Dom一定时间。默认值是0,但是设置之后，这个时间将在WebDriver对象实例整个生命周期都起作用。上面的代码就变成了这样：
Java代码:
CODE:
  1. <font size="4">package com.test;

  3. import java.util.concurrent.TimeUnit;

  5. import org.openqa.selenium.By;
  6. import org.openqa.selenium.JavascriptExecutor;
  7. import org.openqa.selenium.WebDriver;
  8. import org.openqa.selenium.WebElement;
  9. import org.openqa.selenium.chrome.ChromeDriver;

  11. public class Test_waitfor2 {
  12.     public static void main(String[] args) {
  13.         String url = "file:///C:/Documents and Settings/fei yong/桌面/wait.html";
  14.          
  15.         //打开chrome
  16.         WebDriver dr = new ChromeDriver();
  17.         dr.get(url);

  19.         //设置10秒
  20.         dr.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
  21.         dr.findElement(By.id("b")).click();

  23.         WebElement element = dr.findElement(By.cssSelector(".red_box"));
  24.         System.out.println("获取.red_box的背景颜色属性值:"+element.getCssValue("background-color"));
  25.          
  26.         //在红色区域外面加黄框
  27.         ((JavascriptExecutor)dr).executeScript("arguments[0].style.border = \"5px solid yellow\"",element);  

  29.         //dr.quit();
  30.     }
  31. }</font>
复制代码

页面输出：
CODE:
  1. <font size="4">Started ChromeDriver
  2. port=37023
  3. version=19.0.1068.0
  4. log=E:\android\selenium\test_wdng_java\chromedriver.log
  5. 获取.red_box的背景颜色属性值:rgb(255, 0, 0)</font>
复制代码


作者: 巴黎的灯光下    时间: 2017-7-14 15:08
棒！



欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2