如何智能的等待页面加载完成
web的自动化测试中,我们经常会遇到这样一种情况:点击1个按钮,页面上会弹出1个iframe,这时候脚本就需要去等待iframe加载完毕才能进行后续的操作。
在这种情况下,我们一般的处理思路是等待被等待对象上的某个子元素出现,当这个子元素出现时我们就认为该对象已经加载完毕,代码可以继续往下执行了。
selenium-webdriver为我们提供了一个Wait类来完成类似的等待功能。
下面的html代码实现了这样的一种效果:点击click按钮5秒钟后,页面上会出现一个红色的div块。我们需要写一段自动化脚本去捕获这个出现的div,然后高亮之。
set_timeout.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块的功能:
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类进行等待了。
还是需要等待时间来判断的,如果超时则退出。