Selenium自动化测试[详细使用]

作者: 开心的小哈 | 来源:发表于2022-08-07 22:38 被阅读0次

WEB自动化简介

测试:

所有的项目都可以做自动化?1. 软件需求变更不频繁,2. 项目周期比较长,3. 自动化脚本能够重复利用
自动化测试介入点:系统测试
自动化项目的实施过程:可行性分析,框架的选择selenium,RF,需求分析,计划,测试用例设计,无人值守,提交报告,脚本维护

简介:
Selenium 是一套 Web网站的程序自动化操作解决方案。
通过它，我们可以写出自动化程序，像人一样在浏览器里操作web界面。比如点击界面按钮，在文本框中输入文字等操作。
而且还能从web界面获取信息。比如获取火车、汽车票务信息，招聘网站职位信息，财经网站股票价格信息等等，然后用程序进行分析处理。
Selenium 的自动化原理是这样的
(自动化程序-Selenium客户端库)->浏览器驱动:由浏览器厂商提供->浏览器比如:Chrom,Firefox
我们写的自动化程序需要使用客户端库。
我们程序的自动化请求都是通过这个库里面的编程接口发送给浏览器。
比如，我们要模拟用户点击界面按钮，自动化程序里面就应该调用客户端库相应的函数，就会发送点击元素的请求给下方的浏览器驱动。然后，浏览器驱动再转发这个请求给浏览器。
这个自动化程序发送给浏览器驱动的请求是HTTP请求。
客户端库从哪里来的？是Selenium组织提供的。
Selenium组织提供了多种编程语言的Selenium客户端库，包括 java，python，js， ruby等，方便不同编程语言的开发者使用。
我们只需要安装好客户端库，调用这些库，就可以发出自动化请求给浏览器咯。
浏览器驱动也是一个独立的程序，是由浏览器厂商提供的，不同的浏览器需要不同的浏览器驱动。比如 Chrome浏览器和火狐浏览器有各自不同的驱动程序。
浏览器驱动接收到我们的自动化程序发送的界面操作请求后，会转发请求给浏览器，让浏览器去执行对应的自动化操作。
浏览器执行完操作后，会将自动化的结果返回给浏览器驱动，浏览器驱动再通过HTTP响应的消息返回给我们的自动化程序的客户端库。
自动化程序的客户端库接收到响应后，将结果转化为数据对象返回给我们的代码。
我们的程序就可以知道这次自动化操作的结果如何了。

Python+Selenium环境搭建

selenium官方下载地址：http://selenium-release.storage.googleapis.com/index.html
访问上方下载地址下载或者使用python命令pip install selenium

Java+Selenium环境搭建

selenium官方下载地址：http://selenium-release.storage.googleapis.com/index.html
下载selenium后在项目中添加selenium-server-standalone-xx.xx.xx.jar\selenium-java-xxx.xxx.jar\selenium-java-xxx.xxx.srcs.jar
添加完毕后设置驱动地址

System.setProperty("webdriver.gecko.driver","D:\Program Files\geckodriver.exe");
WebDriver firefoxDriver = new FirefoxDriver();
        firefoxDriver.get("https://www.baidu.com");

下载浏览器对应驱动Chrome,如果是其他浏览器百度即可太简单了不说了驱动地址:http://chromedriver.storage.googleapis.com/index.html

其中，下面这行代码，就会运行浏览器驱动，并且运行Edge浏览器
```python
Edge(r'C:\Users\sj176\Downloads\edgedriver_win64\msedgedriver.exe')

这样写的话每次我们都需要指定一下才能生效,所以还可以不指定,但是要将驱动放入到环境变量中
我们可以把浏览器驱动所在目录加入环境变量 Path ，写代码时，就可以无需指定浏览器驱动路径了，像下面这样

driver=webdriver.Edge()

置完环境变量后，重启IDE新的环境变量才会生效。

定位

如果元素定位不到如何分析?

元素没有加载完成
Frame中
元素不可用,不可读,不可见
动态元素,动态加载出来的DIV层

定位方式-Xpath:

ID:
NAME
CLASS_NAME
XPATH
CSS
TAG_NAME
LINK_TEXT
PARTAIL_LINK_TEXT

示例代码

 self.driver.get('https://www.baidu.com')
        # ID定位id属性定位
        # driver.find_element(By.ID,'kw').send_keys('小明')
        # NAME定位 name属性定位
        # driver.find_element(By.NAME,'wd').send_keys('dddd')
        # LINK_TEXT 匹配完全text字符
        # self.driver.find_element(By.LINK_TEXT, '新闻').click()
        # elements = wd.find_elements(By.TAG_NAME, 'div')
        # PARTIAL_LINK_TEXT 匹配符合任意一个字符
        # self.driver.find_element(By.PARTIAL_LINK_TEXT, '闻').click()
        # XPATH
        # 绝对路径开头是/相对路径是//,相对路径+索引定位//from/span[1]input这里的索引是从1开始的,相对路径+属性定位://input[@*='no'] 相对路径+部分属性值定位以开头//*[starts-with(@autocomplete,'of)],以结尾//*[substring(@autocomplete,2)='tf'],包含//*[contains(@autocomplete,'of')],相对路径+文本定位//span[text()='图片']
        self.driver.find_element(By.XPATH,'//*[@id="kw"]').send_keys('111')

定位方式-css:

绝对路径-不用
通过ID和Class定位
通过属性定位
通过部分属性定位
查询子元素定位
查询兄弟元素定位

操控元素的基本方法

点击元素:调用 WebElement 对象的 click 方法去点击元素的时候，浏览器接收到自动化命令，点击的是该元素的中心点位置。
输入元素: 把输入框中已经有的内容清除掉，可以使用WebElement对象的clear方法

element = wd.find_element(By.ID, "input1")
element.clear() # 清除输入框已有的字符串
element.send_keys('xiaobai') # 输入新字符串

获取文本元素: WebElement 对象的 text
获取属性元素: WebElement 对象的get_attribute('class')
获取整个元素对应的HTML可以使用要获取整个元素对应的HTML文本内容，可以使用 element.get_attribute('outerHTML')如果，只是想获取某个元素内部的HTML文本内容，可以使用 element.get_attribute('innerHTML')
获取输入框的文字:对于input输入框的元素，要获取里面的输入文本，用text属性是不行的，这时可以使用 element.get_attribute('value')
获取输入框的文本内容2:可以尝试使用 element.get_attribute('innerText') ，或者 element.get_attribute('textContent')使用 innerText 和 textContent 的区别是，前者只显示元素可见文本内容，后者显示所有内容（包括display属性为none的部分）

睡眠

隐式等待:
Selenium提供了一个更合理的解决方案，是这样的：
当发现元素没有找到的时候，并不立即返回找不到元素的错误。
而是周期性（每隔半秒钟）重新寻找该元素，直到该元素找到，
或者超出指定最大等待时长，这时才抛出异常（如果是 find_elements 之类的方法，则是返回空列表）
Selenium 的 Webdriver 对象有个方法叫 implicitly_wait ，可以称之为隐式等待，或者全局等待。
该方法接受一个参数，用来指定最大等待时长。
如:

driver.implicitly_wait(10)

那么后续所有的 find_element 或者 find_elements 之类的方法调用都会采用上面的策略：
如果找不到元素，每隔半秒钟再去界面上查看一次，直到找到该元素，或者过了10秒最大时长。
那么是不是有了 implicitwait ，可以彻底不用sleep了呢？
不是的，有的时候我们等待元素出现，仍然需要sleep。

强制等待:
sleep(10)python程序中的强制等待,不管遇到什么情况都会强制等待10秒接着执行;

显示等待:

WebDriverWait(driver,20).until(EC.visibility_of_element_located((By.XPATH,'//a[text()=" - Web Browser Automation"]')))
driver.find_element_by_xpath('//a[text()=" - Web Browser Automation"]').click()

WebDriverWait,配合该类的until()和until_not()方法,就能够根据判断条件而进行灵活地等待了.它主要的意思就是:程序每隔x秒看一眼,如果条件成立了,则执行下一步,否则继续等待,直到超过设置的最长时间,然后抛出TimeoutException

css选择器

通过 CSS Selector 选择单个元素的方法是

find_element(By.CSS_SELECTOR, CSS Selector参数)

选择所有元素的方法是

find_elements(By.CSS_SELECTOR, CSS Selector参数)

要选择所有的tag名为div的元素，就可以是这样

elements = wd.find_elements(By.CSS_SELECTOR, 'div')

等价于

elements = wd.find_elements(By.TAG_NAME, 'div')

根据ID如下方:

<input  type="text" id='searchtext' />

就可以使用#searchtext

element = wd.find_element(By.CSS_SELECTOR, '#searchtext')
element.send_keys('你好')

根据class如下方:

elements = wd.find_elements(By.CLASS_NAME, 'animal')

使用css这样写

elements = wd.find_elements(By.CSS_SELECTOR, '.animal')

选择子元素和后代元素

<div id='container'>
    
    <div id='layer1'>
        <div id='inner11'>
            <span>内层11</span>
        </div>
        <div id='inner12'>
            <span>内层12</span>
        </div>
    </div>

    <div id='layer2'>
        <div id='inner21'>
            <span>内层21</span>
        </div>
    </div>
    
</div>

如果元素2 是元素1 的直接子元素， CSS Selector 选择子元素的语法是这样的

元素1 > 元素2

最终选择的元素是元素2，并且要求这个元素2 是元素1 的直接子元素
也支持更多层级的选择，比如

元素1 > 元素2 > 元素3 > 元素4

就是选择元素1 里面的子元素元素2 里面的子元素元素3 里面的子元素元素4 ，最终选择的元素是元素4
如果元素2 是元素1 的后代元素， CSS Selector 选择后代元素的语法是这样的

元素1   元素2

中间是一个或者多个空格隔开
最终选择的元素是元素2 ，并且要求这个元素2 是元素1 的后代元素
也支持更多层级的选择，比如

元素1   元素2   元素3  元素4

最终选择的元素是元素4

根据属性选择

如:

<a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>

css 选择器支持通过任何属性来选择元素，语法是用一个方括号 [] 。

# 根据属性选择元素
element = wd.find_element(By.CSS_SELECTOR, '[href="http://www.miitbeian.gov.cn"]')

当然，前面可以加上标签名的限制，比如 div[class='SKnet'] 表示选择所有标签名为div，且class属性值为SKnet的元素
属性值用单引号，双引号都可以。
根据属性选择，还可以不指定属性值，比如 [href] ，表示选择所有具有属性名为href 的元素，不管它们的值是什么
CSS 还可以选择属性值包含某个字符串的元素
比如，要选择a节点，里面的href属性包含了 miitbeian 字符串，就可以这样写

a[href*="miitbeian"]

还可以选择属性值以某个字符串开头的元素
比如，要选择a节点，里面的href属性以 http 开头，就可以这样写

a[href^="http"]

还可以选择属性值以某个字符串结尾的元素
比如，要选择a节点，里面的href属性以 gov.cn 结尾，就可以这样写

a[href$="gov.cn"]

如果一个元素具有多个属性

<div class="misc" ctype="gun">沙漠之鹰</div>

CSS 选择器可以指定选择的元素要同时具有多个属性的限制，像这样 div[class=misc][ctype=gun]

语法联合使用

CSS selector的另一个强大之处在于：选择语法可以联合使用
比如，我们要选择网页 html 中的元素 <span class='copyright'>版权</span>

<div id='bottom'>
    <div class='footer1'>
        <span class='copyright'>版权</span>
        <span class='date'>发布日期：2018-03-03</span>
    </div>
    <div class='footer2'>
        <span>备案号
            <a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>
        </span>
    </div>        
</div>

CSS selector 表达式可以这样写：

div.footer1 > span.copyright

就是选择一个class 属性值为 copyright 的 span 节点，并且要求其必须是 class 属性值为 footer1 的 div节点的子节点
也可以更简单：

.footer1 > .copyright

就是选择一个class 属性值为copyright 的节点（不限类型），并且要求其必须是 class 属性值为 footer1 的节点的子节点
当然这样也是可以的：

.footer1  .copyright

组选择

如果我们要同时选择所有class 为 plant 和 class 为 animal 的元素。怎么办？
这种情况，css选择器可以使用逗号，称之为组选择，像这样

class.plant , class.animal

再比如，我们要同时选择所有tag名为div的元素和 id为BYHY的元素，就可以像这样写

div,#BYHY

#t1 > span , #t1 > p

选择所有 id 为 t1 里面的 span 和所有的 p 元素
另外注意：组选择结果列表中，选中元素排序，不是组表达式的次序，而是符合这些表达式的元素，在HTML文档中的出现的次序
父元素的第n个子节点,选择的是第2个子元素，并且是span类型

span:nth-child(2)

直接这样写 :nth-child(2)也可以就是选择所有位置为第2个的所有元素，不管是什么类型
父元素的倒数第n个子节点

p:nth-last-child(1)

是选择第倒数第1个子元素，并且是p元素
父元素的第几个某类型的子节点
我们可以指定选择的元素是父元素的第几个某类型的子节点
使用 nth-of-type
比如，
我们要选择唐诗和宋词的第一个作者，
可以像上面那样思考：选择的是第2个子元素，并且是span类型
所以这样可以这样写 span:nth-child(2) ，
还可以这样思考，选择的是第1个span类型的子元素
所以也可以这样写 span:nth-of-type(1)
父元素的倒数第几个某类型的子节点
当然也可以反过来，选择父元素的倒数第几个某类型的子节点
使用 nth-last-of-type
像这样

p:nth-last-of-type(2)

如果要选择的是父元素的偶数节点，使用 nth-child(even)
比如

p:nth-child(even)

如果要选择的是父元素的奇数节点，使用 nth-child(odd)

p:nth-child(odd)

如果要选择的是父元素的某类型偶数节点，使用 nth-of-type(even)
如果要选择的是父元素的某类型奇数节点，使用 nth-of-type(odd)
兄弟节点选择
还有一种思考方法，就是选择 h3 后面紧跟着的兄弟节点 span。
这就是一种相邻兄弟关系，可以这样写 h3 + span
表示元素紧跟关系的是加号
后续所有兄弟节点选择
h3 ~ span
还有更多用法具体参考:https://www.w3school.com.cn/cssref/css_selectors.asp

frame切换

wd.switch_to.frame(frame_reference)

其中， frame_reference 可以是 frame 元素的属性 name 或者 ID
也可以填写frame 所对应的 WebElement 对象。

wd.switch_to.frame(wd.find_element(By.TAG_NAME, "iframe"))

切换回去到主html

wd.switch_to.default_content()

切换到新的窗口

我们经常遇到，点击一个链接或者按钮，就会打开一个新窗口。
可以使用Webdriver对象的switch_to属性的 window方法，如下所示

wd.switch_to.window(handle)

WebDriver对象有window_handles 属性，这是一个列表对象，里面包括了当前浏览器里面所有的窗口句柄。
所谓句柄，大家可以想象成对应网页窗口的一个ID，
那么我们就可以通过类似下面的代码
方式一

for handle in wd.window_handles:
    # 先切换到该窗口
    wd.switch_to.window(handle)
    # 得到该窗口的标题栏字符串，判断是不是我们要操作的那个窗口
    if 'Bing' in wd.title:
        # 如果是，那么这时候WebDriver对象就是对应的该该窗口，正好，跳出循环，
        break

方式二

# mainWindow变量保存当前窗口的句柄
mainWindow = wd.current_window_handle
切换到新窗口操作完后，就可以直接像下面这样，将driver对应的对象返回到原来的窗口
#通过前面保存的老窗口的句柄，自己切换到老窗口
wd.switch_to.window(mainWindow)

打开新窗口

打开新标签页并切换进入

driver.switch_to_window('tab')
driver.get('https://www.baidu.com')
print(driver.title)

打开新窗口,切换并进入

driver.switch_to_window('window')
driver.get('https://www.baidu.com')
print(driver.title)

选择框

常见的选择框包括： radio框、checkbox框、select框

radio框

radio框选择选项，直接用WebElement的click方法，模拟用户点击就可以了

checkbox框

对checkbox进行选择，也是直接用 WebElement 的 click 方法，模拟用户点击选择。
需要注意的是，要选中checkbox的一个选项，必须先获取当前该复选框的状态，如果该选项已经勾选了，就不能再点击。否则反而会取消选择

<div id="s_checkbox">
  <input type="checkbox" name="teacher" value="小江老师">小江老师<br>
  <input type="checkbox" name="teacher" value="小雷老师">小雷老师<br>
  <input type="checkbox" name="teacher" value="小凯老师" checked="checked">小凯老师
</div>

先把已选中的取消选中,确保都是未选状态
再点击小雷老师

# 先把 已经选中的选项全部点击一下
elements = wd.find_elements(By.CSS_SELECTOR, 
  '#s_checkbox input[checked="checked"]')

for element in elements:
    element.click()

# 再点击 小雷老师
wd.find_element(By.CSS_SELECTOR, 
  "#s_checkbox input[value='小雷老师']").click()

select框

radio框及checkbox框都是input元素，只是里面的type不同而已
select框则是一个新的select标签
对于Select 选择框， Selenium 专门提供了一个 Select类进行操作

from selenium.webdriver.support.ui import Select
s = Select(wd.find_element(By.ID, "ss_single"))

<option value="foo">Bar</option>

方式一:根据value值选择
s.select_by_value('foo')
方式二:根据index值选择
s.select_by_index(1)
方式三:根据可见文本选择元素
s.select_by_visible_text('Bar')
去除选择元素
deselect_by_value
deselect_by_index
deselect_by_visible_text
deselect_all

Select单元框

原来选的是什么，直接用Select方法选择即可
s.select_by_value('foo')

Select多选框

可以用select类的deselect_all方法，清除所有已经选中的选项
然后再通过 select_by_visible_text方法选中想要的值

# 导入Select类
from selenium.webdriver.support.ui import Select

# 创建Select对象
select = Select(wd.find_element(By.ID, "ss_multi"))

# 清除所有 已经选中 的选项
select.deselect_all()

select.select_by_visible_text("1")
select.select_by_visible_text("2")

ActionChains 模拟鼠标点击,双击,移动鼠标到某个元素,鼠标拖拽

ActionChains 类里面提供了一些特殊的动作的模拟，我们可以通过 ActionChains 类的代码查看到

from selenium.webdriver.common.action_chains import ActionChains

鼠标移移动到某个元素上方

move_to_element

from selenium.webdriver.common.action_chains import ActionChains

ac = ActionChains(driver)

# 鼠标移动到 元素上
ac.move_to_element(
    driver.find_element(By.CSS_SELECTOR, '[name="tj_briicon"]')
).perform()

直接执行JavaScript

我们可以直接让浏览器运行一段javascript代码，并且得到返回值，如下

# 直接执行 javascript，里面可以直接用return返回我们需要的数据
nextPageButtonDisabled = driver.execute_script(
    '''
    ele = document.querySelector('.soupager > button:last-of-type');
    return ele.getAttribute('disabled')
    ''')

# 返回的数据转化为Python中的数据对象进行后续处理
if nextPageButtonDisabled == 'disabled': # 是最后一页
    return True
else: # 不是最后一页
    return False

有时，自动化的网页内容很长，或者很宽，超过一屏显示
如果我们要点击的元素不在窗口可见区内，新版本的selenium协议，浏览器发现要操作（比如点击操作）的元素，不在可见区内，往往会操作失败
这时就可以，可以调用 execute_script 直接执行js代码，让该元素出现在窗口可见区正中

driver.execute_script("arguments[0].scrollIntoView({block:'center',inline:'center'})", job)

其中 arguments[0] 就指代了后面的第一个参数 job 对应的js对象，
js对象的 scrollIntoView 方法，就是让元素滚动到可见部分
block:'center' 指定垂直方向居中
inline:'center' 指定水平方向居中
滚动页面
方式一:纵向滚动

js="var q=document.documentElement.scrollTop=10000"
driver.execute_script(js)

方式二:横向滚动

js = "window.scrollTo(100,400);"
driver.execute_script(js)

冻结界面

如果遇到页面鼠标悬浮触发的操作,则可以使用断点然后冻结页面来定位元素
在开发者工具中输入如下代码即可

setTimeout(function(){debugger}, 5000)

含义表示5000毫秒后浏览器会进入debug状态,此时页面都是静止的;

弹出对话框

弹出的对话框有三种类型，分别是 Alert（警告信息）、confirm（确认信息）和prompt（提示输入）
alert点击ok按钮操作
driver.switch_to.alert.accept()

Confirm
点击ok
driver.switch_to.alert.accept()
点击dismiss
driver.switch_to.alert.dismiss()

prompt
输入:driver.switch_to.alert.send_keys()
点击ok:driver.switch_to.alert.accept()
点击dismiss:driver.switch_to.alert.dismiss()

窗口大小

获取窗口大小
driver.get_window_size()
设置窗口大小
driver.set_window_size(x, y)
获取当前窗口的标题
driver.title
获取当前窗口URL地址
driver.current_url

截屏

以使用 WebDriver 的 get_screenshot_as_file方法来截屏并保存为图片

# 截屏保存为图片文件
driver.get_screenshot_as_file('1.png')
ele = driver.find_element_by_id('s4612')
ele.screenshot('ele.png')    #元素截图

上传文件

<input type="file" multiple="multiple">

# 先定位到上传文件的 input 元素
ele = wd.find_element(By.CSS_SELECTOR, 'input[type=file]')

# 再调用 WebElement 对象的 send_keys 方法
ele.send_keys(r'h:\g02.png')

但是，有的网页上传，是没有 file 类型的 input 元素的。
如果是Windows上的自动化，可以采用 Windows 平台专用的方法：
执行

pip install pypiwin32

确保 pywin32 已经安装，然后参考如下示例代码

# 找到点击上传的元素，点击
driver.find_element(By.CSS_SELECTOR, '.dropzone').click()

sleep(2) # 等待上传选择文件对话框打开

# 直接发送键盘消息给 当前应用程序，
# 前提是浏览器必须是当前应用
import win32com.client
shell = win32com.client.Dispatch("WScript.Shell")

# 输入文件路径，最后的'\n'，表示回车确定，也可能时 '\r' 或者 '\r\n'
shell.Sendkeys(r"h:\a2.png" + '\n')
sleep(1)

手机模式

我们可以通过 desired_capabilities 参数，指定以手机模式打开chrome浏览器
参考代码，如下

from selenium import webdriver

mobile_emulation = { "deviceName": "Nexus 5" }

chrome_options = webdriver.ChromeOptions()

chrome_options.add_experimental_option("mobileEmulation", mobile_emulation)

driver = webdriver.Chrome( desired_capabilities = chrome_options.to_capabilities())

driver.get('http://www.baidu.com')

input()
driver.quit()

Xpath定位

借鉴:实战技巧 | 白月黑羽 (byhy.net)

模拟键盘操作

from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.keys import Keys
from selenium import webdriver

ActionChains(self.driver).key_down(Keys.CONTROL).perform()
self.driver.find_element_by_class_name("chartContainer").click()
self.driver.find_element_by_class_name("dropdown").click()
ActionChains(self.driver).key_up(Keys.CONTROL).perform()