本文详细介绍了Selenium WebDriver中常用的API，包括定位一组元素、多层框架和窗口定位、层级定位、下拉框处理、alert、confirm、prompt的处理、DIV对话框的处理以及上传文件操作。讲解了在不同场景下如何使用这些API来实现自动化测试中的各种交互操作。
1.定位一组元素
定位一组对象一般用于以下场景：
- 批量操作对象，比如将页面上所有的checkbox 都勾上。
- 先获取一组对象，再在这组对象中过滤出需要具体定位的一些对象。比如定位出页面上所有的checkbox，然后选择最后一个。
示例：checkbox.html
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type"/>
<title>Checkbox</title>
</head>
<body>
<h3>checkbox</h3>
<div class="well">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="c1">checkbox1</label>
<div class="controls">
<input id="c1" type="checkbox"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="c2">checkbox2</label>
<div class="controls">
<input id="c2" type="checkbox"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="c3">checkbox3</label>
<div class="controls">
<input id="c3" type="checkbox"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="r">radio</label>
<div class="controls">
<input id="r1" type="radio"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="r">radio</label>
<div class="controls">
<input id="r2" type="radio"/>
</div>
</div>
</form>
</div>
</body>
</html>
脚本：勾选checkbox1、checkbox2、checkbox3
from selenium import webdriver
import time
import os
driver = webdriver.Chrome()
file_path='file:///'+os.path.abspath("D:/Bite/PycharmProjects/1/text/checkbox.html")
driver.get(file_path)
# 5个input标签
# 选择页面上所有的input，然后从中过滤出所有的 checkbox 并勾选之
inputs = driver.find_elements_by_tag_name("input")
for input in inputs:
if input.get_attribute('type') == "checkbox":
input.click()
time.sleep(10)
driver.quit()
get_attribute：获得属性值。
2.多层框架/窗口定位
多层框架或窗口的定位：
switch_to_frame()【备注：此方法已其弃用】- switch_to_window()
对于一个现代的web 应用，经常会出现框架（frame） 或窗口（window）的应用，这也就给我们的定位带来了一个难题。
有时候我们定位一个元素，定位器没有问题，但一直定位不了，这时候就要检查这个元素是否在一个frame 中，seelnium webdriver 提供了一个switch_to_frame 方法，可以很轻松的来解决这个问题。
switch_to_frame(name_or_id_or_frame_element)：
可以简单记忆一下，如果这个frame有name和id属性那么就用这两个属性就好，如果没有的话可以先用find_element_by_xxx方法找到这个frame元素，然后把这个元素传进去，这也是可行的。
switch_to_frame()把当前定位的主体切换了frame里。怎么理解这句话呢？我们可以从frame的实质去理解。
frame中实际上是嵌入了另一个页面，而webdriver每次只能在一个页面识别，因此才需要用switch_to_frame方法
去获取frame中嵌入的页面，对那个页面里的元素进行定位。
switch_to_default_content：从frame中嵌入的页面里跳出，跳回到最外面的原始页面中。
示例：frame.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>frame</title>
<link
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstra
p-combined.min.css" rel="stylesheet"/>
<script type="text/javascript">$(document).ready(function(){
});
</script>
</head>
<body>
<div class="row-fluid">
<div class="span10 well">
<h3>frame</h3>
<iframe id="f1" src="inner.html" width="800" ,
height="600"></iframe>
</div>
</div>
</body>
<script
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.
min.js"></script>
</html>
inner.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>inner</title>
</head>
<body>
<div class="row-fluid">
<div class="span6 well">
<h3>inner</h3>
<iframe id="f2" src="http://www.baidu.com"
width="700" height="500"></iframe>
<a href="javascript:alert('watir-webdriver better than
selenium webdriver;')">click</a>
</div>
</div>
</body>
</html>
脚本：通过switch_to_frame() 方法来进行定位
多层窗口定位
有可能嵌套的不是框架，而是窗口，还有真对窗口的方法：switch_to_window
用法与switch_to_frame 相同：driver.switch_to_window(“windowName”)
3.层级定位
示例：level_locate.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Level Locate</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
rel="stylesheet"/>
</head>
<body>
<h3>Level locate</h3>
<div class="span3">
<div class="well">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"
href="#">Link1</a>
<ul class="dropdown-menu" role="menu"
aria-labelledby="dLabel" id="dropdown1">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="span3">
<div class="well">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"
href="#">Link2</a>
<ul class="dropdown-menu" role="menu"
aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</body>
<script
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</html>
4.下拉框处理
下拉框是我们最常见的一种页面元素，对于一般的元素，我们只需要一次就定位，但下拉框里的内容需要进行两次定位，先定位到下拉框，再定位到下拉框内里的选项。
示例：drop_down.htm
<html>
<body>
<select id="ShippingMethod"
onchange="updateShipping(options[selectedIndex]);" name="ShippingMethod">
<option value="12.51">UPS Next Day Air ==> $12.51</option>
<option value="11.61">UPS Next Day Air Saver ==> $11.61</option>
<option value="10.69">UPS 3 Day Select ==> $10.69</option>
<option value="9.03">UPS 2nd Day Air ==> $9.03</option>
<option value="8.34">UPS Ground ==> $8.34</option>
<option value="9.25">USPS Priority Mail Insured ==> $9.25</option>
<option value="7.45">USPS Priority Mail ==> $7.45</option>
<option value="3.20" selected="">USPS First Class ==> $3.20</option>
</select>
</body>
</html>
5.alert、confirm、prompt 的处理
- text 返回alert/confirm/prompt 中的文字信息
- accept 点击确认按钮
- dismiss 点击取消按钮，如果有的话
- send_keys 输入值，这个alert\confirm 没有对话框就不能用了，不然会报错
注意：switch_to_alert()只能处理原生的alert
示例一：alert.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>alert</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrapcombined.min.css" rel="stylesheet"/>
<script type="text/javascript"> $(document).ready(function(){ $('#tooltip').tooltip({"placement":
"right"}); $('#tooltip').click(function(){ alert('watir-webdriver better than seleniumwebdriver') }); });
</script>
</head>
<body>
<div class="row-fluid">
<div class="span6 well">
<h3>alert</h3>
<a id="tooltip" href="#" data-toggle="tooltip" title="watir-webdriver better than seleniumwebdriver">hover to
see tooltip</a>
</div>
</div>
</body>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
</script>
</html>
示例二：send.html（输入值）
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function disp_prompt(){
var name=prompt("Please enter yourname","")
if (name!=null && name!=""){
document.write("Hello " +name + "!")
}
}
</script>
</head>
<body>
<input onclick="disp_prompt()" type="button" value="请点击"/>
</body>
</html>
6.DIV对话框的处理
更多的时候我们在实际的应用中碰到的并不是简单警告框，而是提供更多功能的会话框。
示例：modal.html（只有点击 Close ，才可以关闭对话框）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>modal</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
rel="stylesheet"/>
<script type="text/javascript">
$(document).ready(function(){
$('#click').click(function(){
$(this).parent().find('p').text('Click on the link to success!');
});
});
</script>
</head>
<body>
<h3>modal</h3>
<div class="row-fluid">
<div class="span6">
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn btn-primary"
data-toggle="modal" id="show_modal">Click</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>Congratulations, you open the window!</p>
<a href="#" id="click">click me</a>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal"
aria-hidden="true">Close
</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
<script
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</html>
7.上传文件操作
上传过程一般要打开一个本地窗口，从窗口选择本地文件添加。所以，一般会卡在如何操作本地窗口添加上传文件。故只要定位上传按钮，通过send_keys 添加本地文件路径就可以了。绝对路径和相对路径都可以，关键是上传的文件存在。
示例：upload.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>upload_file</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstra
p-combined.min.css" rel="stylesheet"/>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row-fluid">
<div class="span6 well">
<h3>upload_file</h3>
<input type="file" name="file"/>
</div>
</div>
</body>
<script
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.
min.js"></script>
</html>
扫一扫
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
