WebUI 浏览器操作

浏览器操作

一、 selenium 与 webdriver

  • Selenium 是一个用于 Web 测试的工具,测试运行在浏览器中,就像真正的用户在手工操作一样。
    • 支持所有主流浏览器,包括 IE, Mozilla Firefox, Safari,Google Chrome, Opera 等。
  • WebDriver 就是对浏览器提供的原生 API 进行封装,使其成为一套更加面向对象的Selenium WebDriver API。
    • 使用这套 API 可以操控浏览器的开启、关闭,打开网页,操作界面元素,控制 Cookie,还可以操作浏览器截屏、安装插件、设置代理、配置证书等

使用 Selenium 实现自动化测试,主要需要 3 个东西:

  1. 测试脚本,可以是 python, java 编写的脚本程序(也可以叫做 client 端)
  2. 浏览器驱动, 这个驱动是根据不同的浏览器开发的,浏览器不同,对应的驱动也不同,甚至同一浏览器不同的版本也需要不同的驱动
  3. 浏览器,目前 selenium 支持市面上大多数浏览器,如:火狐,谷歌, IE 等脚本操作驱动,驱动操作浏览器;浏览器返回给驱动,驱动返回给脚本

1. 安装 selenium

1
pip install selenium

导入

1
from selenium import webdriver

2. 安装 浏览器驱动(chrome)

1. 查看 浏览器版本

image-20210816170441936

2. 驱动下载

驱动下载地址http://chromedriver.storage.googleapis.com/index.html

image-20210816170923649

3. 将驱动放在 python 跟目录

image-20210816171131571

二、设置元素等待

WebDriver 提供了两种类型的等待:强制等待显式等待隐式等待

  • 隐式等待: 设置一个超时时间,在这个时间内不断寻找这个元素,超时找不到就会抛出异常
  • 显示等待: 设置一个超时时间和一个元素查找条件,在这个时间内不断寻找这个元素,超时找不到就会抛出异常
  • 强制等待 : 设置一个事件,程序会在这个位置强制停留一段时间

1. 隐式等待 (页面全部加载)

1
driver.implicitly_wait(10)

优点:

  • 使用简单, 一次添加终生有效
  • 一般在创建 driver 之后设置一个隐式等待(创建 driver 之后设置,目的是让driver 的整个生命周期都有隐式等待的逻辑)
  • 设置后的元素查找全都会进入隐式等待的逻辑

缺点:

  • 无法对指定的元素进行等待
  • 需要等页面全部加载完成, 相对浪费时间, 降低脚本执行速度
1
2
3
4
5
6
7
8
9
10
11
from selenium import webdriver

driver = webdriver.Chrome()
# 隐式等待:设置一个超时时间,在这个时间内,不断的寻找元素,超时找不到就抛出异常
driver.implicitly_wait(10)


driver.get("http://127.0.0.1:8088/login")
driver.find_element_by_name("username").send_keys("libai")
driver.find_element_by_name("password").send_keys("opmsopms123")
driver.find_element_by_class_name("btn-login").click()

2. 显示等待 (页面部分加载)

1
webDriverWait(driver, 等待时间,检查间隔时间).until(EC.元素定位方法)

优点:

  • 不需要等待页面全部加载完成, 相对节省时间
  • 可以指定需要等待的元素, 对一些加载缓慢的元素, 可以为其增加等待时间

缺点:

  • 使用相对复杂, 代码量多

  • 每次等待都需要再写一遍代码

方法导入

1
2
3
from selenium.webdriver.support import expected_conditions as ec  # 提供等待条件
from selenium.webdriver.support.ui import WebDriverWait # 显示等待类
from selenium.webdriver.common.by import By

实例:

1
2
3
4
5
6
7
# 每隔 1 秒检查一次,最多等待 10 秒
ele = WebDriverWait(driver, 10, 1).until(
ec.visibility_of_element_located(
(
By.CSS_SELECTOR, "body > section > div.left-side.sticky-left-side > div.left-side-inner > ul > li:nth-child(2)")
)
)

对 显示等待函数 分装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

def webElementWait(driver, timeout, lo_time, by_locate, locate):
"""
:param driver: 浏览器驱动对象
:param timeout: 最大等待时间
:param lo_time: 轮询时间
:param by_locate: 元素定位方法
:param locate: 元素定位表达式
:return:
"""
# 每隔 0.5 秒检查一次,最多等待 10 秒
ele = WebDriverWait(driver, timeout, lo_time).until(
# 这里传入我们的期望条件
EC.visibility_of_element_located(
(by_locate, locate)
)
)
return ele

可将显示等待与隐式等待结合使用

  • 申明一个隐式等待, 全局通用
  • 对一些加载特别缓慢的元素,设置显示等待, 适当为其增加等待时间
  • 当显示等待与隐式等待一同出现的时候, 取时间更多的一个

三、 webdriver 常用方法

1. 元素操作

  • clear() : 清除文本
  • send_keys(value) : 模拟按键输入(被操作元素需要是文本输入框)
  • click() : 单击元素

实例 :

1
2
3
4
5
6
7
8
9
10
11
12
from selenium import webdriver

driver = webdriver.Chrome()

driver.get("https://www.baidu.com")

driver.find_element_by_id("kw").send_keys("selenium") # 输入内容
driver.find_element_by_id("kw").clear() # 清除内容
driver.find_element_by_id("kw").send_keys("python") # 输入内容
driver.find_element_by_id("su").click() # 点击内容

driver.quit()

2. 元素 返回

  • size :返回元素的尺寸
  • text :获取元素的文本
  • get_attribute(name) :获取属性值

实例 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
from selenium import webdriver

driver = webdriver.Chrome()
driver.get("http://www.baidu.com")

# 获得输入框的尺寸
size = driver.find_element_by_id('kw').size
print(size)

# 返回百度页面底部备案信息
text = driver.find_element_by_id("cp").text
print(text)

# 返回元素的属性值, 可以是 id、 name、 type 或其他任意属性
attribute = driver.find_element_by_id("kw").get_attribute('type')
print(attribute)

driver.quit()

3. 获取页面信息

  • title :获取当前页面的标题
  • current_url : 获取当前页面的 url
  • text : 获取标签对时间的文本信息

注意:

  • 标签元素如果不展示在页面上,获取结果为空
  • 标签对中间没有值,获取结果为空
  • 如 input 标签之类的标签,获取结果为空
  • get_attribute 方法,获取元素某个属性的值
    • ele.get_attribute(‘href’)
    • ele 这个元素的 href 属性的值

四、 控制浏览器操作

1. 控制浏览器大小

最大化 : maximize_window()
最小化 : minimize_window()
设置大小号 : set_window_size()

实例 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
from selenium import webdirver

driver = webdriver.Chrome()
driver.get("http://www.baidu.com")

# 设置浏览器最大化
driver.maximize_window()

# 设置浏览器 最小化
driver.minimize_window()

# 参数数字为 像素点
driver.set_window_size(600, 600)

driver.quit()

2. 控制浏览器操作

  • driver.bach() : 后退
  • driver.forward() : 前进
  • driver.refresh() : 刷新
  • driver.quit() : 退出

实例 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
from selenium import webdriver

driver = webdriver.Firefox()

# 访问百度首页
driver.get("http://www.baidu.com")

# 访问新闻页面
driver.get("http://news.baidu.com")

# 返回(后退)到百度首页
driver.back()

# 前进到新闻页
driver.forward()

# 刷新界面
driver.refresh()

driver.quit()

五、页面操作

1. 鼠标操作 —- ActionChains

用 selenium 做自动化,有时候会遇到需要模拟鼠标操作才能进行的情况,比如单击、双击、点击鼠标右键、拖拽等等。

ActionChains 类提供了鼠标操作的常用方法:

  • perform() : 执行操作
  • click() : 左键单击
  • context_click() : 右键单击
  • double_click() : 双击
  • drag_and_drop() : 拖拽
  • move_to_element() : 鼠标悬停

实例 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 要想使用鼠标事件,得导入鼠标事件类
from selenium.webdriver.common.action_chains import ActionChains
from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://www.baidu.com/")

# 定位到要悬停的元素
ele = driver.find_element_by_name("tj_briicon")

# 对元素进行鼠标悬停的操作,当代码中有鼠标事件的时候,自己就不能动鼠标了
ActionChains(driver).move_to_element(ele).perform()

# 右键操作
ActionChains(driver).context_click(ele).perform()

# 单击操作
ActionChains(driver).click(ele).perform()

# 双击
ActionChains(driver).double_click(ele).perform()

# 拖拽, 将元素1 拖动到元素2上面
ActionChains(driver).drag_and_drop(ele1, ele2).perform()

driver.quit()

2. 键盘事件

Keys()类提供了键盘上几乎所有按键的方法。

send_keys()方法可以用来模拟键盘输入,还可以用它来输入键盘上的按键,如Ctrl+A、 Ctrl+C 等

Keys() 常用 的键盘操作:

  • send_keys(Keys.BACK_SPACE) : 删除键 (BackSpace)
  • send_keys(Keys.SPACE) : 空格键 (Space)
  • send_keys(Keys.TAB) : 制表键 (Tab)
  • send_keys(Keys.ESCAPE) : 回退键( Esc)
  • send_keys(Keys.ENTER) : 回车键( Enter)
  • send_keys(Keys.CONTROL,'a') : 全选( Ctrl+A)
  • send_keys(Keys.CONTROL,'c') : 复制( Ctrl+C)
  • send_keys(Keys.CONTROL,'x') : 剪切( Ctrl+X)
  • send_keys(Keys.CONTROL,'v') : 粘贴( Ctrl+V)
  • send_keys(Keys.F1) : 键盘 F1
  • ……
  • send_keys(Keys.F12) : 键盘 F12
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
from selenium import webdriver
# 引入 Keys 模块
from selenium.webdriver.common.keys import Keys

driver = webdriver.Chrome()
driver.get("http://www.baidu.com")

# 输入框输入内容
driver.find_element_by_id("kw").send_keys("seleniumm")

# 删除多输入的一个 m
driver.find_element_by_id("kw").send_keys(Keys.BACK_SPACE)

# 输入空格键+“教程”
driver.find_element_by_id("kw").send_keys(Keys.SPACE)
driver.find_element_by_id("kw").send_keys("教程")

# ctrl+a 全选输入框内容
driver.find_element_by_id("kw").send_keys(Keys.CONTROL, 'a')

# ctrl+x 剪切输入框内容
driver.find_element_by_id("kw").send_keys(Keys.CONTROL, 'x')

# ctrl+v 粘贴内容到输入框
driver.find_element_by_id("kw").send_keys(Keys.CONTROL, 'v')

# 通过回车键来代替单击操作
driver.find_element_by_id("su").send_keys(Keys.ENTER)

driver.quit()

3. 文件上传

1. input 标签

对于 input 标签实现的文件上传功能,可以将其看做是一个输入框

直接 send_keys 指定 本地文件的路径 就可以实现文件上传

1
driver.find_element_by_id("albumUpload").send_keys("D:\\day4\qwe.png")
上传多个文件 :
1
driver.find_element_by_id("albumUpload").send_keys(   "D:\\day4\qwe.png\nD:\\day4\qwe1.png")

2. 非 imput 标签

对于非 input 标签实现的文件上传功能

我们可以用模拟键盘敲击的方式实现

安装 pypiwin32
1
python -m pip install pypiwin32
1
2
3
4
5
6
ActionChains(driver).click(driver.find_element_by_id("albumUpload")).perform()

sh = win32com.client.Dispatch("WScript.shell")
time.sleep(3)

sh.Sendkeys("D:\\qwe.png\r\n")
上传多个文件
1
sh.Sendkeys('"D:\\day4\qwe.png" "day4\qwe1.png"\r\n')

1、代码不联想

2、输入法要保持英文输入状态

3、无法处理中文

实例 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
from selenium import webdriver
import win32com.client
import time

driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://tinypng.com/")

# 触发上传文件的操作
driver.find_element_by_css_selector("#top .icon").click()
sh = win32com.client.Dispatch("WScript.shell")
time.sleep(3)

sh.Sendkeys("D:\\day6\qqjt.png\n")

driver.quit()

WebDriver 提供了操作 Cookie 的相关方法,可以读取、添加和删除 cookie 信息

WebDriver 操作 cookie 的方法:

  • get_cookies(): 获得所有 cookie 信息

  • get_cookie(name): 返回字典的 key 为“name” 的 cookie 信息

  • add_cookie(cookie_dict) : 添加 cookie。

    • cookie_dict指字典对象,必须有 name 和 value 值
  • delete_cookie(name,optionsString):删除 cookie 信息。

    • name” 是要删除的 cookie 的名称,
    • optionsString” 是该 cookie 的选项,目前支持的选项包括 “路径” , “域”
  • delete_all_cookies(): 删除所有 cookie 信息

实例 :

1
2
3
4
5
6
7
8
9
10
11
12
from selenium import webdriver

driver = webdriver.Chrome()
driver.get("http://www.youdao.com")

# 获得 cookie 信息
cookie = driver.get_cookies()

# 将获得 cookie 的信息打印
print(cookie)

driver.quit()

5. 内嵌网页切换 —- iframe

iframe,又叫浮动帧标记,是内嵌的网页元素,可以将一个 html 文件嵌入到另一个 html 文件中显示

对 iframe 进行操作,需要用到以下三种方法:

  • switch_to_iframe() 切换到 iframe 上 ( 未来会被删除,不建议使用 )
  • switch_to.frame() : 切换到 iframe 上
  • switch_to.default_content() : 切换回原主页面

切入内嵌网页后,若想再操作内嵌网页外的元素,需要再切出来

实例 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
from selenium import webdriver

driver = webdriver.Chrome()
driver.implicitly_wait(5) # 隐式等待
driver.get("http://127.0.0.1:8088/login")

driver.find_element_by_name("username").send_keys("libai")
driver.find_element_by_name("password").send_keys("opmsopms123")
driver.find_element_by_class_name("btn-login").click()

driver.find_element_by_css_selector("[href=\"/project/manage\"] > i").click()
driver.find_element_by_css_selector("[class=\"pull-right\"]").click()

# 定位到内嵌网页
ele = driver.find_element_by_css_selector("[class=\"ke-edit-iframe\"]")

# 切入内嵌网页中
driver.switch_to.frame(ele)
driver.find_element_by_css_selector("[class=\"ke-content\"]").send_keys("123")

# 切入内嵌网页后,若想再操作内嵌网页外的元素,需要再切出来
driver.switch_to.default_content()
driver.find_element_by_css_selector("input + [class=\"btn btn-primary\"]").click()

6. 多标签页切换

在页面操作过程中点击某个链接会弹出新的窗口,这时就需要切换到新打开的窗口上进行操作。

WebDriver 提供了以下方法 :

  • current_window_handle:获得当前标签页句柄

  • window_handles:返回所有便签页的句柄

  • switch_to.window(标签页句柄):切换到对应的标签页

  • 关闭标签页使用 close 方法

实例 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
from selenium import webdriver

# 创建浏览器驱动对象
driver = webdriver.Chrome()
# 访问网址
driver.get("http://www.baidu.com")

# 找到搜索按钮
input_element = driver.find_element_by_id("kw")

# 输入搜索内容
input_element.send_keys("成龙\n")

# 点击松勤教育官网
driver.find_element_by_css_selector("#content_left [tpl='se_com_default']:nth-child(3) .c-title [target]").click()

# 获得当前所有打开的窗口的句柄
all_handles = driver.window_handles
print(all_handles)
for handle in all_handles:
driver.switch_to.window(handle)
print(driver.title)

# 退出浏览器
driver.quit()

7. 页面滚动

如果 web 页面过长,而我们需要的元素并不在当前可视页面中,那么 selenium 就无法对其进行操作;

此时,我们就需要像平时操作浏览器一样来滚动页面,使我们需要操作的对象可见!

window.scrollBy()

  • window.scrollBy(0,500) : 向下滚动 500 个像素
  • window.scrollBy(0,-500) : 向上滚动 500 个像素
  • window.scrollBy(500,0) : 向右滚动 500 个像素
  • window.scrollBy(-500,0) : 向左滚动 500 个像素

Selenium 中实现滚动页面

  • driver.execute_script("window.scrollBy(0,500)")
  • driver.execute_script("arguments[0].scrollIntoView();", ele) 滚动至元素 ele 可见

如果页面中的某个元素 有滚动条 :

竖向滚动 :

1
2
3
4
js="document.querySelector("这里填 css 表达式").scrollTop=100"

# 修改这个元素的 scrollTop 就可以
dr.execute_script(js)

控制横向滚动

1
js="document.querySelector("这里填 css 表达式").scrollLeft=100"  

六、 高级元素处理

1. 窗口截图

截屏,整个页面 :

1
driver.get_screenshot_as_file("./all.png")

截屏,某个元素

1
2
ele = driver.find_element_by_id("form")
ele.screenshot("./ele.png")

实例 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
from selenium import webdriver

# 创建浏览器驱动对象
driver = webdriver.Chrome()

# 访问网址
driver.get("https://www.baidu.com/")

# 截屏,截取整个页面
driver.get_screenshot_as_file("./all.png")

# 截屏,截取单个元素
ele = driver.find_element_by_id("form")
ele.screenshot("./ele.png")

driver.quit()

2. 警告处理

在 WebDriver 中处理 JavaScript 所生成的 alert、 confirm 以及 prompt 十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confirm/prompt,然后使用 text/accept/dismiss/ send_keys 等方法进行操作

  • text :返回 alert/confirm/prompt 中的文字信息
  • accept() :接受现有警告框
  • dismiss() :取消现有警告框
  • send_keys(“haha”) :发送文本至警告框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
from selenium import webdriver

driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("file:///D:/Users/lenovo/PycharmProjects/script/seleniumStu/test.html")

# 触发对话框
driver.find_element_by_id("bu1").click()
# 获取对话框对象
al = driver.switch_to.alert
# 确认对话框
al.accept()


# 触发确认框
driver.find_element_by_id("bu2").click()
# 获取确认框对象
al = driver.switch_to.alert
# 取消
al.dismiss()

# 触发提示框
driver.find_element_by_id("bu3").click()
# 获取提示框对象
al = driver.switch_to.alert
# 输入内容
al.send_keys("123")

al.accept()

3. 下拉框选择

WebDriver 提供了 Select 类来处理下拉框。注意,只有当下拉框是 select 标签的时候使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
from selenium import webdriver
from selenium.webdriver.support.select import Select
import time

# 实例化一个浏览器对象
driver = webdriver.Chrome("D:\\tool\...\chromedriver")
# 访问网址
driver.get("D:\\test\...\selectStu.html")

# 定位到下拉框元素
ele = driver.find_element_by_id("bc288089-c52d-497b-aa4d-71f81b24faa3")

# # 根据 value 属性选择
Select(ele).select_by_value("3")

# 根据下拉框文本选择
Select(ele).select_by_visible_text("3333333")

time.sleep(3)
driver.quit()