学习编写自动化测试脚本——用脚本取代键盘鼠标操作浏览器

本文链接：https://blog.csdn.net/qq_44847147/article/details/108015180

说明：
1、下面有几张图由于电脑的原因真实的图显示不出来，缺少的部分是画上去的不影响观看！
2、贴进去的html代码只是其中的一部分，这部分用到了而已；
3、Python代码部分，若要运行，谨慎取舍！
4、由于html部分的代码较多，我放在网盘了，自取。
提取码：otb5

1、自动化测试基本概念及其工具——selenium
2、本文是第2篇
3、自动化测试框架——unittest

想看哪里点哪里^♢^

#首先先了解一个简单测试脚本的基础构成(python中#键后面是注释)：

# 可加可不加，防止乱码
# coding = utf-8
# 要想使用selenium里的webdriver里的函数，首先得用import把包导进去
from selenium import webdriver
# 导入时间模块
import time
# 获得浏览器驱动
browser = webdriver.Firefox()
# 在当前页面停止3秒钟
time.sleep(3)
# 用浏览器的驱动打开该网址
browser.get("http://www.baidu.com")
# 在当前页面停止3秒钟
time.sleep(3)
# 定位元素。find_element_by_id：通过id寻找元素(kw是百度输入框的id)，一个控件有多个属性id、name，百度输入框的id是kw，send.key：向输入框里输入括号里面的内容
browser.find_element_by_id("kw").send_keys("selenium")
# 在当前页面停止3秒钟
time.sleep(3)
# 同上，(su是搜索按钮的id)，需要点击该按钮进行页面跳转
browser.find_element_by_id("su").click()
# 退出并关闭窗口的每一个相关的驱动程序(彻底退出webdriver，释放与driver server之间的连接)。browser.close()：关闭当前窗口(不彻底)
browser.quit()

1、元素的定位

想要操作一个对象，首先应该了解这个对象的属性，然后根据其特有的属性(保证唯一性)定位到这个对象。
比如一个百度的对话框：<input id="kw" class="s_ipt" type="test" name="wd" maxlength="100" autocomliete="off">这是它的源代码，可以看到里面有id class type name等属性，就根据这些属性来定位对象。webdriver提供了一系列用来定位对象的属性，常用的有如下几种：id、name、class name、link text、partial link text、tag name、xpath、css selector

# conding = utf-8
from selenium import
import time
browser=webdriver.Firefox()
browser.get("http://www.baidu.com")
# 百度输入框的定位方式---------------------------------------------------------
# 用id方式定位(常用)
browser.find_element_by_id("kw").send_keys("selenium")
# 用name方式定位(常用)
browser.find_element_by_name("wd").send_keys("selenium")
# 用tag name(标签名)方式定位（input不唯一，故不能成功定位对象）
browser.find_element_by_tag_name("input").send_keys("selenium")
# 用class name方式定位，若有多个class name则定位不成功
browser.find_element_by_class_name("s_ipt").send_keys("selenium")
# 用css方式定位。css是一种语言，它使用选择器来为页面元素绑定属性，它可以选择控件的任一属性
browser.find_element_by_css_selector("#kw").send_keys("selenium")
# 用xpath方式定位。xpath是一种在xml文档中定位元素的语言扩展了id和name定位方式，提供了多种可能性
browser.find_element_by_xpath("//*[@id='kw']").send_keys("selenium")
#-----------------------------------------------------------------------------
# 定位到搜索框按钮并进行“点击“操作
browser.find_element_by_id("su").click() 
# 用link text方式定位。link text不是一个按钮，而是一个文字连接
browser.find_element_by_link_text("hao123").click()
# 用partial link text方式定位。通过部分链接定位
browser.find_element_by_partial_link_text("hao").click()
time.sleep(3)
browser.quit()

2、操作被定位对象

定位到对象之后要对对象进行操作，是进行键盘输入还是鼠标点击，取决于被定位的对象是输入框还是按钮。webdriver中较常用的操作对象方法有：
click 点击定位到的对象(用于点击一个按钮)
submit 和click是一样的功能(提交表单)
send_keys 对定位到的对象进行键盘输入
clear 清除对象的内容，如果有的话
text 获取元素的文本信息，只能是文本的信息，百度页面的“百度一下”属于value值

# coding=utf-8
from selenium import webdriver
import time
driver = webdriver.Firefox()
driver.get("http://www.baidu.com")
time.sleep(2)
# ------------------------------------------------------------
# 在输入框里输入test，停顿两秒钟
driver.find_element_by_id("kw").send_keys("test")
time.sleep(2)
# 将输入框里的内容清除
driver.find_element_by_id("kw").clear()
# 再往输入框里输入selenium，停顿两秒钟
driver.find_element_by_id("kw").send_keys("selenium")
time.sleep(2)
# 相当与点击回车了，同【driver.find_element_by_id("su").click()】
driver.find_element_by_id("su").submit()
# 输出页面上的 **文本** 信息
dr=driver.find_element_by_id("s-bottom-layer-right").text
print(dr)
# -------------------------------------------------------------
time.sleep(3)
driver.quit()

3、添加等待及打印信息

（1）添加等待：（原因：防止下一步的页面加载不出来）
import time //导入时间模块
time.sleep(3) //停顿3秒
智能等待 browser.implicitily_wait(30)在一个时间范围内智能的等待，隐式的等待一个元素被发现或一个命令完成。即在智能等待的时间里只要某个命令完成很快就继续下一个命令，不用等到等待时间全部结束。
普通等待和智能等待的区别：普通等待是你必须要等够规定的时间长度，而智能等待是只要你的命令完成了就可以继续下一个命令，不用等到规定的时间结束
（2）打印信息(打印title及url)
print driver.title //把页面title打印出来
print driver.current_url //打印url

# coding = utf-8
from selenium import webdriver
import time
browser = webdriver.Chrome()
browser.get("http://www.baidu.com")
# 智能等待------------------------------------------------
#智能等待5秒
browser.implicitly_wait(5) 
browser.find_element_by_id("kw").send_keys("selenium")
browser.find_element_by_id("su").click()
timp.sleep(3)
# 打印信息-------------------------------------------------
# 把页面title打印出来
dr=driver.title
print(dr)
# 打印url
url=driver.current_url
print(url)
time.sleep(3)
# ---------------------------------------------------------
browser.quit()

4、操作浏览器

（1）浏览器最大化。启动浏览器时一般不是全屏的，虽说不会影响脚本的执行，但会影响人的视觉感受。
（2）设置浏览器的宽、高。可以随意的设置浏览器启动时窗口的大小。
（3）操作浏览器的前进、后退。这样返回到前一个网页或者前进到后一个网页比较方便。
（4）控制浏览器滚动条。(js操作)

# coding = utf-8
from selenium import webdriver
import time
browser=webdriver.Firefox()
browser.get("http://www.baidu.com")
# （1）将浏览器最大化显示--------------------------------------------------
print "浏览器最大化"
browser.maximize_window()
time.sleep(2)
# （2）设置浏览器的宽，高--------------------------------------------------
print "设置浏览器宽480，高800显示"
browser.set_window_size(480,800)
time.sleep(3)
# ------------------------------------------------------------------
browser.find_element_by_id("kw").send_keys("selenium")
browser.find_element_by_id("su").click()
time.sleep(3)
browser.quit()

# （3）操作浏览器的前进、后退------------------------------------
# coding = utf-8
from selenium import webdriver
import time
browser=webdriver.Firefox()
# 访问百度网页
first_url='http://www.baidu.com'
browser.get(first_url)
time.sleep(2)
# 访问新闻页面
second_url='http://news.baidu.com'
browser.get(second_url)
time.sleep(2)
# 返回(后退)到百度网页
browser.back()
time.sleep(2)
# 前进到新闻页面
browser.forward()
time.sleep(2)
browser.quit()

# （4）控制浏览器的滚动条----------------------------------------
# coding = utf-8
from selenium import webdriver
import time
driver=webdriver.Firefox()
driver.get("http://www.baidu.com")  #访问百度
driver.find_element_by_id("kw").send_keys("selenium")
driver.find_element_by_id("su").click()  #搜索
time.sleep(3)
# 将页面滚动条拖到底部-------------------------------------------
js="var q=document.documentElement.scrollTop=10000"
driver.execute_script(js)
time.sleep(3)
# 将滚动条移动到页面的顶部---------------------------------------
js="var q=document.documentElement.scrollTop=0"
driver.execute_script(js)
time.sleep(3)
driver.set_window_size(400,800)
time.sleep(3)
# 同时控制浏览器滚动条的左右，上下(先要把窗口缩小，上面已操作完毕)---------------------------------------------
js="window.scrollTo(100,0);" # 前面的参数是控制浏览器左右移动的距离，后面的参数是控制浏览器上下移动的距离，目前的参数表示浏览器偏移100个像素，上下不动
driver.execute_script(js)
time.sleep(3)
driver.quit()

5、浏览器中键盘的使用

# （1）键盘按键用法
# coding = utf-8
from selenium import webdriver
# 要用到键盘时需要引入keys包
from selenium.webdriver.common.keys import keys
import os,time
driver=webdriver.Firefox()
driver.get("http://www.baidu.com")
time.sleep(3)
driver.find_element_by_id("account").send_keys("demo")
time.sleep(3)
# tab的定位相当于清除了密码框的默认提示信息，相当于由用户名输入框跳转到密码输入框
driver.find_element_by_id("account").send_keys(keys.TAB)
time.sleep(3)
# 通过定位密码框，enter(回车)来代替登录按钮
driver.find_element_by_name("password").send_keys(keys.ENTER)
...
# 也可以定位到登录按钮，通过enter(回车)代替click()
driver.find_element_by_id("login").send_keys(keys.ENTER)
...
time.sleep(3)
driver.quit()

# （2）键盘组合键用法
# coding = utf-8
from selenium import webdriver
from selenium.webdriver.common.keys import keys
import time
driver=webdriver.Firefox()
driver.get("http://www.baidu.com")
# 输入框输入内容
driver.find_element_by_id("kw").send_keys("selenium")
time.sleep(3)
# ctrl+a 全选输入框内容
driver.find_element_by_id("kw").send_keys(keys.CONTROL, 'a')
time.sleep(3)
# ctrl+x 剪切输入框内容
driver.find_element_by_id("kw").send_keys(keys.CONTROL,  'x')
time.sleep(3)
# ctrl+v 黏贴剪切的内容
# driver.find_element_by_id("kw").send_keys(keys.CONTROL,'v')
# time.sleep(3)
# 输入框重新输入内容，搜索
driver.find_element_by_id("kw").send_keys("webdriver")
driver.find_element_by_id("su").click()
time.sleep(3)
driver.quit()

6、鼠标事件

ActionChains类
● context_click() 右击
● double_click() 双击
● drag_and_drop() 拖动
● move_to_element() 移动
ActionChains(driver) 生成用户的行为。所有行动都存储在actionchains对象，通过perform()存储的行为。

# coding = utf-8
from selenium import webdriver
from slennium.webdriver.common.keys import keys
from selenium.webdriver.common.action_chains import ActionChains
import time
driver = webdriver.Firefox()
driver.get("http://news.baidu.com")
qqq=driver.find_element_by_id("su")
# 右击
ActionChains(driver).context_click(qqq).perform()
# 双击
ActionChains(driver).double_click(qqq).perform()
# 定位元素的原位置
element=driver.find_element_by_id("s_btn_wr")
# 定位元素要移动到的目标位置
target=driver.find_element_by_class_name("btn")
# 执行元素的拖动操作
ActionChains(driver).drag_and_drop(element,target).perform()
# 执行元素的移动操作
ActionChains(driver).move_to_element(element,target).perform()

7、定位一组元素

webdriver使用find_element方法来定位某个特定的对象，使用find_elements来定位一组对象。
定位一组对象通常用于批量操作对象，比如页面上的选项需要全部勾选；或者是先获取一组对象，再在这组对象中过滤出需要具体定位的对象，比如定位页面上的所有选项，然后在所有选项里选出一项。
get_attribute： 获得属性值
checkbox.html文件打开的界面如下图所示：

该页面的核心代码：checkbox.html


<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 type="checkbox" id="c1" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="c2">checkbox2</label>
<div class="controls">
<input type="checkbox" id="c2" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="c3">checkbox3</label>
<div class="controls">
<input type="checkbox" id="c3" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="r">radio</label>
<div class="controls">
<input type="radio" id="r1" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="r">radio</label>
<div class="controls">
<input type="radio" id="r2" />
</div>

# 用浏览器打开上面的脚本文件，我们可以看到三个复选框和两个单选框，下面试着定位三个复选框
# coding = utf-8
from selenium import webdriver
import time
import os
driver=webdriver.Firefox()
file_path= 'file:///' + os.path.abspath('D:/0Programs/测试网页/checkbox.html') # 绝对路径
driver.get(file_path) # 跳转到上面的界面
# 选择页面上所有的input，然后从中过滤出所有的checkbox，并勾选它
inputs=driver.find_elements_by_tag_name('input')
time.sleep(3)
for input in inputs:
    if input.get_attribute('type')=='checkbox':
        input.click()
time.sleep(2)
driver.quit()

8、多层框架/窗口定位

演示窗口打开的界面如下图所示：

该页面的核心代码：frame.html 和 inner.html：
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()
（1）多层框架定位： switch_to.frame(name_or_id_or_frame_element)：即如果这个frame有name和id属性，那么就可以用这两个属性进行定位，没有的话可以先用find_element_by_xxx方法找到这个frame元素，然后把这个元素传进去。switch_to.frame()把当前定位的主体切换到了frame里。即frame里其实嵌入了另一个页面，而webdriver每次只能在一个页面识别，因此需要switch_to.frame方法去获取frame中嵌入的页面，然后对页面里的元素进行定位。
switch_to.default_content：从frame中嵌入的页面里跳出，跳回最外面的原始页面中
（2）多层窗口定位：switch_to.window。用法与switch_to_frame相同：driver.switch_to.window(“windowName”)

# coding=utf-8
from selenium import webdriver
import time
import os
browser=webdriver.Firefox()
file_path='file:///'+os.path.abspath('D:/0Programs/测试网页/frame.html')
browser.get(file_path)
browser.implicitly_wait(6)
# 先定位到iframe1(id=f1)
browser.switch_to.frame("f1")
# 再找到其下面的iframe2(id=f2)
browser.switch_to.frame("f2")
# 然后就可以正常的操作元素了
browser.find_element_by_id("kw").send_keys("selenium")
browser.find_element_by_id("su").click()
time.sleep(3)
browser.quit()

9、层级定位

演示的结果如下图所示：

该页面的核心代码：level_locate.html：

 <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>
 
 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>

# 定位的思路是：先点击一个链接，然后再定位到点击该链接出现的下拉菜单中的某个link
# coding = utf-8
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.action_chains import ActionChains
import time
import os
dr=webdriver.Firefox()
file_path='file:///'+os.path.abspath('D:/0Programs/测试网页/level_locate.html')
dr.get(file_path)
# 点击Link1链接(弹出下拉列表)
dr.find_element_by_link_text('Link1').click()
# 再定位到Action这个链接
action=driver.find_element_by_link_text("Action")
# 将此行为进行存储
ActionChains(driver).move_to_element(action).perform()
time.sleep(3)
dr.quit()

10、下拉框处理

演示界面如下图所示：

该页面的核心代码：drop_down.html：

<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>

# coding = utf-8
from selenium import webdriver
import os,time
driver=webdriver.Firefox()
file_path='file:///'+os.path.abspath('drop_down.html')
driver.get(file_path)
time.sleep(2)
# 第一种：xpath 定位
driver.find_element_by_xpath("//*[@value='10.69']").click()
# 第二种：先定位一组元素，然后遍历，使value值为10.69
lists=driver.find_elements_by_tag_name(option")
for list in lists:
	if list.get_attribute('value')=="10.69":
		list.click()
time.sleep(3)
# 第三种：通过下标定位
lists=driver.find_elements_by_tag_name("option")
lists[2].click()
time.sleep(3)
driver.quit()

11、弹出窗口的处理(alter、confirm、prompt)

text：返回弹出窗口中的文字信息
accept：点击确认按钮
dismiss：点击取消按钮
send_keys：输入值，若没出现对话框则不能使用
#接受警告信息
alert = dr.switch_to.alert()
alert.accept()
#得到文本信息打印
alert = dr.switch_to.alert()
print alert.text
#取消对话框（如果有的话）
alert = dr.switch_to.alert()
alert.dismiss()
#输入值
alert = dr.switch_to.alert()
alert.send_keys(“hello word”)
演示界面如下图所示：点击该链接出现如图所示的弹窗

该页面的核心代码：alert.html：

<body> 
<div class="row-fluid"> 
<div class="span6 well"> 
<h3>alert</h3> 
<a id="tooltip" href="#" data-toggle="tooltip" title="hello word!">hover to see tooltip</a> 
</div> 
</div> 
</body>

# coding = utf-8
from selenium import webdriver
import time
import os
dr=webdriver.Firefox()
file_path='file:///'+os.path.abspath('alert.html')
dr.get(file_path)
# 点击链接，弹出窗口
driver.find_element_by_id("tooltip").click()
time.sleep(3)
# 定位到弹出的窗口
alert=driver.switch_to.alert()
# 打印出弹出窗口的内容
print("text: "+alert.text)
# 因为有“确定”按钮，所以可以用accept
alert,accept()
time.sleep(3)
driver.quit()

当有输入框，需要输入信息时的界面如下：
在这里插入图片描述
该页面的核心代码：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 type="button" onclick="disp_prompt()" 
value="请点击"/> 
</body> 
</html>

# coding = utf-8
from selenium import webdriver
import time
import os
driver=webdriver.Firefox()
driver.implicitly_wait(10)
file_path='file:///'+os.path.abspath('D:/0Programs/测试网页/send.html')
driver.get(file_path)
driver.maxmize_window()   #窗口最大化
time.sleep(3)
# 先点击页面出现的按钮
driver.find_element_by_xpath("//html//body//input").click()
time.sleep(3)
# 定位到弹出的窗口
alert=driver.switch_to.alert
# 输入信息
alert.send_keys("白敬亭")
time.sleep(3)
# 点击确定
alert.accept()
time.sleep(3)
driver.quit()

12、DIV模块的处理

演示界面如下图所示：

该页面的核心代码：modal.html：

<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>

# coding = utf-8
from selenium import webdriver
import time
import os
driver=webdriver.Firefox()
file_path='file:///'+os.path.abspath("D:/0Programs/测试网页/modal.html")
driver.get(file_path)
driver.maximize_window()
# 点击click，弹出窗口
driver.find_element_by_id("show_modal").click()
time.sleep(3)
# 定位到弹出的窗口，点击click me(在第2个div模块,虽然该窗口中有3个div模块，但不用具体定位到某一个模块，只要定位到这个窗口即可)
ddiv=driver.find_element_by_class_name("modal-body")
ddiv.find_element_by_id("click").click()
time.sleep(3)
# 关闭alert框
button=driver.find_elements_by_tag_name("button")
buttons[0].click()  # 运用下标的方式定位到close
time.sleep(3)
driver.quit()

13、上传文件操作

演示的界面如下图所示：点击“浏览…”后出现本地文件，然后选择一个文件上传即可。

该页面的核心代码：upload.html：

<input type="file" name="file" />

# 思路：定位到上传按钮，通过send_keys添加本地文件路径(绝对路径或相对路径)即可
# coding = utf-8
from selenium import webdriver
import time
import os
driver=webdriver.Firefox()
file_path='file:///'+os.path.abspath("D:/0Programs/测试网页/upload.html")
driver.get(file_path)
time.sleep(3)
# 定位上传按钮，添加本地文件
driver.find_element_by_name("file").send_keys("D:/0Programs\\测试网页\\send.txt") # /=\\
time.sleep(3)
driver.quit()