如何智能的等待页面加载完成

如何智能的等待页面加载完成

 

web的自动化测试中，我们经常会遇到这样一种情况：点击1个按钮，页面上会弹出1个iframe，这时候脚本就需要去等待iframe加载完毕才能进行后续的操作。

在这种情况下，我们一般的处理思路是等待被等待对象上的某个子元素出现，当这个子元素出现时我们就认为该对象已经加载完毕，代码可以继续往下执行了。

selenium-webdriver为我们提供了一个Wait类来完成类似的等待功能。

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

set_timeout.html



        Set Timeout
        </code> </div> <div class="line number7 index6 alt2"> <code class="ruby spaces">            </code> <code class="ruby plain">.red_box {background-color: red; width = </code> <code class="ruby constants">20</code> <code class="ruby plain">%; height: 100px; border: none;}</code> </div> <div class="line number8 index7 alt1"> <code class="ruby spaces">        </code> <code class="ruby plain">
        </code> </div> <div class="line number10 index9 alt1"> <code class="ruby spaces">            </code> <code class="ruby plain">function show_div(){</code> </div> <div class="line number11 index10 alt2"> <code class="ruby spaces">                </code> <code class="ruby plain">setTimeout(</code> <code class="ruby string">"create_div()"</code> <code class="ruby plain">, </code> <code class="ruby constants">5000</code> <code class="ruby plain">);</code> </div> <div class="line number12 index11 alt1"> <code class="ruby spaces">            </code> <code class="ruby plain">}</code> </div> <div class="line number13 index12 alt2"> <code class="ruby spaces"> </code>  </div> <div class="line number14 index13 alt1"> <code class="ruby spaces">            </code> <code class="ruby plain">function create_div(){</code> </div> <div class="line number15 index14 alt2"> <code class="ruby spaces">                </code> <code class="ruby plain">d = document.createElement(</code> <code class="ruby string">'div'</code> <code class="ruby plain">);</code> </div> <div class="line number16 index15 alt1"> <code class="ruby spaces">                </code> <code class="ruby plain">d.className = </code> <code class="ruby string">"red_box"</code> <code class="ruby plain">;</code> </div> <div class="line number17 index16 alt2"> <code class="ruby spaces">                </code> <code class="ruby plain">document.body.appendChild(d);</code> </div> <div class="line number18 index17 alt1"> <code class="ruby spaces">            </code> <code class="ruby plain">}</code> </div> <div class="line number19 index18 alt2"> <code class="ruby spaces">        </code> <code class="ruby plain">


        "b" onclick = "show_div()" >click

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

require 'rubygems'
require 'selenium-webdriver'

dr = Selenium::WebDriver. for :firefox
select_file = 'file:///' .concat File .expand_path( File .join( File .dirname( __FILE__ ), 'set_timeout.html' ))
dr.navigate.to select_file

dr.find_element( :id => 'b' ).click
wait = Selenium::WebDriver::Wait. new ({ :timeout => 30 })
box = wait. until {dr.find_element( :css => '.red_box' )}
dr.execute_script( 'arguments[0].style.border = "5px solid yellow"' , box) #div will be highlight

Wait类的构造方法Wait.new接收1个hash参数。上面代码中使用:timeout这个key值表示最长等待时间。

Wait类的until方法接收1个block代码块，如果代码块返回值不为true的话，该方法将一直等待直到达到最长等待时间为止。如果一旦代 码块中的值为true了，则返回该代码块的返回值。 box = wait.until {dr.find_element(:css => '.red_box')}的作用就是等待class为red_box的div出现并返回该div对象。

进一步的思想下，如果某些页面在加载完成后会执行一些js函数，这些函数会延迟对dom树进行一些操作或者进行一些异步请求的处理，那么 webdriver目前是无法智能的等待这些函数执行完毕的，所以有时候就会出现页面在没有加载完毕的情况下(实际上dom已经加载完毕，只是异步请求或 延迟函数正在执行)，webdriver继续进行后续代码的执行情况。这时候我们就需要灵活的使用Wait类进行等待了。

还是需要等待时间来判断的，如果超时则退出。