2022软件测试技能 Web自动化测试框架之Selenium从入门到精通

系列文章目录

提示:阅读本文章之前,请先阅读目录



前言

对于Web自动化测试,Selenium是当前企业主流应用广泛的自动化测试框架,掌握它,可谓是,大势所趋,也是各大企业的硬性要求


一、什么是web自动化测试?

Web端测试:对网页的测试
UI测试:对web测试+app测试
web自动化测试:通过代码对网页进行测试
UI自动化测试=web自动化测试+APP自动化测试

简而言之,通过编写代码脚本,实现某个功能的自动化测试,在后续的版本更新迭代中,可以重复利用,无需再次手工进行功能测试,直接运行脚本,让脚本重复的测试功能,从而提升效率,对于回归测试,是非常重要的,因此,对于web自动化测试,只适用于,更新迭代频率低,项目周期长,否则,一个项目才2,3个月,要去耗费大量时间去编写代码脚本,实际用到的机会不多,这并不是web自动化的初衷,因此,还要求web自动化脚本不能频繁修改,否则,一样也会造成巨大成本,因为要去维护这些脚本。

二、Selenium 框架简介

selenium是企业主流应用广泛的web自动化测试框架,可以通过编程语言,编写代码,去驱动浏览器,替代手工点击,输入等操作,模拟人工使用浏览器。

selenium的三大组件:

  1. selenium IDE 浏览器插件,可以实现脚本录制
  2. webDriver 驱动包,可以实现对浏览器的各种操作(API包)
  3. Grid 分布式执行,用例可以同时在多个浏览器同时执行,提高测试效率

三、web自动化测试环境搭建

编程语言:python3(请提前下载好,并安装好python环境)
IDE编辑器:Pycharm
环境搭建步骤:

  1. 安装selenium
pip install selenium
  1. 选择测试的浏览器
    我这里选择,谷歌浏览器,Chrome
  2. 下载浏览器驱动
    谷歌浏览器驱动:chromedriver.exe
    IE浏览器驱动:ieserverdriver.exe
    Firefox火狐浏览器驱动:geckodriver.exe

注意:浏览器的版本要跟浏览器驱动版本一致(有的没有完全对应的版本,可以下载比较接近的版本即可,比如:浏览器版本是106.11.60,那么可以下载浏览器驱动:106.15.50,只要第一个版本号一样即可,后面的可以选择接近的版本号)

下载地址:http://npm.taobao.org/mirrors/chromedriver/

  1. 把浏览器驱动,放到python的主目录下

在这里插入图片描述

  1. pycharm项目的python要选择自己本地的,不要使用pycharm默认的
pycharm-settings-project:项目名-python:interpreter-选择自己本地安装好的python目录

在这里插入图片描述

四、Selenium 入门

1. 初步尝试

打开浏览器,加载项目
在这里插入图片描述
代码示例

# import selenium
from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('http://www.baidu.com')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

2. 基础操作

# import selenium
import time

from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('https://www.baidu.com')
driver.find_element_by_link_text('新闻').click()
# 设置窗口最大化
driver.maximize_window()
# 设置大小,宽,高
driver.set_window_size(100, 200)
# 前进
driver.forward()
# 后退
driver.back()
# 刷新
driver.refresh()
# 关闭当前标签页
driver.close()
# 退出浏览器
driver.quit()

五、Selenium 原理

在这里插入图片描述
三者的通信,实现了web自动化测试
原理拆解:

  1. selenium开启浏览器驱动(chromedriver.exe)服务
  2. selenium脚本与浏览器驱动建立连接
  3. selenium脚本发送指令(基于http通信)
    这里http请求为
    http://ip:端口号/路径+请求方式+请求参数
  4. 浏览器接收到参数之后,进行浏览器操作

六、八大元素定位

1. 八大类型

id,name,class_name,xpath,css_selector,tag_name,link_text,parial_link_text

# import selenium
from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('http://www.baidu.com')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 通过id定位
# <div id="password">xxxx</div>
driver.find_element_by_id('password')

# 通过name定位
# <div name="username">xxxx</div>
driver.find_element_by_name('username')

# 通过class定位
# <div class="system-style">xxxx</div>
driver.find_element_by_class_name('system-style')

# 通过xpath定位
#<input id="username" value="admin"></input>
driver.find_element_by_xpath('//input[@id="username"]')

# 通过css选择定位
# <div><span name="text"></span></div>
driver.find_element_by_css_selector('div>input span[@name="text"]')

# 通过tag标签定位
# <h2>大标题</h2>
driver.find_element_by_tag_name('h2')

# 通过link的a标签定位
# <a href="index.php">新闻中心</a>
driver.find_element_by_link_text('新闻中心')

# 通过parital_link的a标签定位,返回一个列表[]
# <a href="index.php">新闻中心</a>
# <a href="index.php">新闻简介</a>
link_list = driver.find_element_by_partial_link_text('新闻')

2. Xpath 专题

xpath定位,是常用的方法之一,功能非常强大,几乎可以定位所有的元素,所以,我们这里专门讲一下

绝对路径(以 / 开头)和相对路径(以 // 开头)

# 绝对路径,以 / 开头,会从页面的根路径开始,这个不建议,因为页面常常会变动,新增了一个元素,可能就失效了,非常不稳定
# 示例,百度首页的搜索按钮
driver.find_element_by_xpath('/html/body/div[1]/div[1]/div[5]/div/div/form/span[2]/input')

# 相对路径,以 // 开头,推荐,因为是根据相对定位来查找元素的,只要符合规则就能匹配到
# <input type="submit" id="su" value="百度一下" class="bg s_btn"> 搜索按钮的元素
# 那么,我们通过相对定位来查找,不管这个元素放到任何位置,都能查找到,前提是没有frame框架嵌套
driver.find_element_by_xpath('//input[@type="submit" and @value="百度一下"]')

在这里插入图片描述

通过索引定位 [索引]
案例,比如这里form下面有多个input,就可以通过[2],[3],选择不同的input

# 索引,选择第三个input
driver.find_element_by_xpath('//form/input[3]')

在这里插入图片描述

通过substring方法定位,substring(内容,起始,终止) 获取内容,起始值从1开始

例如:
内容= abcdef,那么要获取abc,就可以这样写,substring(内容,1, 3)
内容=abcdeboss,那么要获取boss,可以这样写,substring(内容,5),那么从5开始,后面全部获取

# 索引,选择第三个input
driver.find_element_by_xpath("//form/input[substring(@name, 5) = 'bp']")

同样的,我们要获取第三个,也可以这样写

在这里插入图片描述

通过contains 方法定位,contains表示包含的意思,用法:contains(内容,‘包含的内容’)

例如,我想找出所有name包含rsv

# 索引,rsv_list 是个列表[]
rsv_list = driver.find_element_by_xpath("//form/input[contains(@name, 'rsv')]")

在这里插入图片描述

通过 starts-with 开头包含,用法,starts-with(内容,开头包含的内容)

例如,我们也是要找到name的以rsv开头的

# 索引,rsv_list 是个列表[]
rsv_list = driver.find_element_by_xpath("//form/input[starts-with(@name, 'rsv')]")

在这里插入图片描述

3. css_selector 专题

通过 ID 定位,#ID名

# 通过ID
driver.find_element_by_css_selector('#aging-total-page')

在这里插入图片描述

通过 class定位 点 class名

# 通过class
driver.find_element_by_css_selector('.quickdelete-wrap')

在这里插入图片描述

通过层级关系

# 通过层级关系
driver.find_element_by_css_selector('form span input')

当然,也可以用 > 来代表层级关系,也可以不写

# 通过层级关系
driver.find_element_by_css_selector('form>span>input')

在这里插入图片描述

通过属性的方式

# 通过属性的方式
driver.find_element_by_css_selector("form input[name='rsv_idx']")

在这里插入图片描述

当然也可以用多个属性定位

# 通过属性的方式
driver.find_element_by_css_selector("form input[type='hidden'][name='tn']")

在这里插入图片描述

通过兄弟节点定位,first-child (第一个兄弟),last-child(最后一个兄弟),nth-child(值) (第几个兄弟)

# 通过兄弟节点定位
driver.find_element_by_css_selector("form input:first-child")
# 通过兄弟节点定位
driver.find_element_by_css_selector("form input:last-child")
# 通过兄弟节点定位
driver.find_element_by_css_selector("form input:nth-child(3)")

在这里插入图片描述

通过标签,和class和id进行组合

# 通过标签,和class和id进行组合
driver.find_element_by_css_selector("form.has-soutu.fm")

在这里插入图片描述

# 通过标签,和class和id进行组合
driver.find_element_by_css_selector("div#head_wrapper.head_wrapper")

在这里插入图片描述

七、元素四大操作

1.send_keys 输入

# import selenium
from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('http://www.baidu.com')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 通过ID = kw 设置搜索框的内容
driver.find_element_by_id('kw').send_keys('今天天气怎么样')

在这里插入图片描述

在这里插入图片描述

2. click 点击

# import selenium
from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('http://www.baidu.com')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 通过ID = kw 设置搜索框的内容
driver.find_element_by_id('kw').send_keys('今天天气怎么样')

# 再点击搜索按钮,进行搜索
driver.find_element_by_id('su').click()

在这里插入图片描述
在这里插入图片描述

3. text 获取文本

# import selenium
from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('http://www.baidu.com')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 通过ID = kw 设置搜索框的内容
text = driver.find_element_by_link_text('新闻').text
print(text)

在这里插入图片描述

输出:新闻

4. get_attribute 获取属性

# import selenium
from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('http://www.baidu.com')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 通过ID = kw 设置搜索框的内容
class_name = driver.find_element_by_link_text('新闻').get_attribute('class')
print(class_name)

在这里插入图片描述

输出:mnav c-font-normal c-color-t

八、三大切换

1. iframe / frame 切换

在这里插入图片描述
通过 id 切换

# import selenium
from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('xxxxx')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 通过 id 切换
driver.switch_to.frame('header-frame')

通过索引

# 通过 索引 切换,下标从0开始
driver.switch_to.frame(1)

通过定位元素的办法

# 通过 定位元素的办法
driver.switch_to.frame(driver.find_element_by_xpath("//frame[@name='drag-frame']"))

恢复 frame,回到默认状态,不进入任何frame

# 通过 恢复 frame,回到默认状态,不进入任何frame
driver.switch_to.default_content()

2. 标签页切换

# 先获取当前所有的标签页
handles = driver.window_handles

# 可以通过索引来切换,默认从0开始
# 不过我们经常用的,就是切换到最新的一个,使用-1即可
driver.switch_to.window(handles[-1])

在这里插入图片描述

3. 弹窗切换

from selenium import webdriver
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.wait import WebDriverWait


driver = webdriver.Chrome()
driver.get("my.html")

# 弹窗是否已出现,出现则返回弹窗对象
alert = WebDriverWait(driver, 10).until(EC.alert_is_present())

alert切换时,expected_conditions类也提供了一个切换方法alert_is_present

在这里插入图片描述
弹窗类型:alert,confiem,promot
对于弹窗,有四种处理方式

# 先获取弹窗
alert = driver.switch_to.alert

# 文本内容
t = alert.text

# 点击确定按钮
alert.accept()

# 点击取消按钮
alert.dismiss()

# 输入内容
alert.send_keys('测试数据')

九、下拉框处理

在这里插入图片描述

需要先导入Select包
from selenium.webdriver.support.select import Select

# import selenium
from selenium import webdriver
from selenium.webdriver.support.select import Select

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('http://www.baidu.com')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 先获取选择框
sele = driver.find_element_by_name('cat_id')
# 再 通过 Select 来选择
# 根据索引选择
Select(sele).select_by_index(1)
# 根据value值选择
Select(sele).select_by_value(26)
# 根据内容选择
Select(sele).select_by_visible_text('家用电器')

十、键盘操作

需要先导入包
from selenium.webdriver.common.keys import Keys

# import selenium
from selenium import webdriver
from selenium.webdriver.common.keys import Keys

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('http://www.baidu.com')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 先定位输入框
input = driver.find_element_by_name('keyword')
# 组合键,ctrl键 + A键,全选
input.send_keys(Keys.CONTROL, 'a')
# 组合键,ctrl键 + C键,复制
input.send_keys(Keys.CONTROL, 'c')
# 组合键,ctrl键 + V键,粘贴
input.send_keys(Keys.CONTROL, 'v')
# 使用空格键
input.send_keys(Keys.SPACE)
# 使用删除键
input.send_keys(Keys.BACKSPACE)
# 三个组合键 Ctrl键 + Alt键 + D键
input.send_keys(Keys.CONTROL, Keys.ALT, 'd')

十二、鼠标操作

需要引入模块ActionChains
from selenium.webdriver.common.action_chains import ActionChains

# import selenium
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('http://www.baidu.com')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 先获取一个元素
btn = driver.find_element_by_name('se')
btn2 = driver.find_element_by_name('sub')
# 先实例化鼠标,并传入driver
ac = ActionChains(driver)
# 双击
ac.double_click(btn)
# 鼠标右击
ac.context_click(btn)
# 点击鼠标左键不放开
ac.click_and_hold(btn)
# 从a元素拖动到b元素
ac.drag_and_drop(btn, btn2)
# 停留
ac.pause(btn)
# 释放鼠标
ac.release()
# 最后都要调用执行函数
ac.perform()

十三、日历,日期处理

对于普通的日期日历框,本质上是一个input,所以我们可以直接设置value

在这里插入图片描述

需要按照格式,进行赋值,这里是 — 作为分隔

在这里插入图片描述

# import selenium
from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('https://www.12306.cn/index/')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 定位到日期模块
datetime = driver.find_element_by_id('train_date')
# 先清除掉value
datetime.clear()
# 赋值
datetime.send_keys('2022-07-05')

而有的日期模块,设置了只读模式readonly,所以,我们就需要移除掉这个属性,需要通过js

在这里插入图片描述
在这里插入图片描述

# import selenium
import time

from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('https://www.12306.cn/index/')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 定位到日期模块
datetime = driver.find_element_by_id('train_date')
# 编写js代码
js = 'document.getElementById("train_date").removeAttribute("readonly")'
# 执行js代码
driver.execute_script(js)
# 先清除掉value
datetime.clear()
# 赋值
datetime.send_keys('2022-07-05')

十四、滚动条操作

1. 从顶部到底部

js代码:scrollTo(0, document.body.scrollHeight)

# import selenium
import time

from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('https://www.12306.cn/index/')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 滚动条从顶部到底部
js = 'scrollTo(0, document.body.scrollHeight)'
driver.execute_script(js)

2. 从底部到顶部

js代码:scrollTo(document.body.scrollHeight, 0)

# import selenium
import time

from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('https://www.12306.cn/index/')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 滚动条从底部到顶部
js = 'scrollTo(document.body.scrollHeight, 0)'
driver.execute_script(js)

3. 滚动到某个元素的位置

js代码:arguments[0].scrollIntoView(false);

# import selenium
import time

from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('https://www.12306.cn/index/')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 滚动条移动到某个元素的位置
ele = driver.find_element_by_xpath('//ul[@class="travel-train-list"]')
js = 'arguments[0].scrollIntoView(false);'
# 调用js代码
# 这里把ele元素传递进去的时候,js可以通过arguments[]接收到
driver.execute_script(js, ele)

十五、上传

1. 可以直接通过赋值方式

向value赋值文件路径即可实现上传

# import selenium
import time

from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('https://www.12306.cn/index/')
# 设置窗口最大化
driver.maximize_window()
# 下面进行浏览器的操作

# 先获取元素
ele = driver.find_element_by_id('file')
# 直接进行赋值
ele.send_keys('D:/smallmouse.jpg')
# 下面再点击上传按钮

2. 不能直接赋值

请参考以下资料
在这里插入图片描述
在这里插入图片描述

十六、截图

driver.get_screenshot_as_file

# import selenium
import time

from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('https://www.baidu.com')

# 截图,路径,图片格式是png
driver.get_screenshot_as_file('D:/a.png')

十七、三大等待

1. time.sleep 强制等待

# import selenium
import time

from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('https://www.baidu.com')

# 强制等待,以秒为单位,如果要半秒,即0.5
time.sleep(3)

2. 隐式等待

driver.implicitly_wait(秒数),即多少秒内,找到元素了就执行,如果超过了秒数即超时

# import selenium
import time

from selenium import webdriver

# 打开浏览器
driver = webdriver.Chrome()
# 打开网页
driver.get('https://www.baidu.com')

# 隐式等待
driver.implicitly_wait(30)

3. 显式等待

需要导入包
from selenium.webdriver.support.wait import WebDriverWait
即,在指定时间内找到元素,即返回

# import selenium
import time

from selenium import webdriver
from selenium.webdriver.support.wait import WebDriverWait

# 打开浏览器

driver = webdriver.Chrome()
# 打开网页
driver.get('https://www.baidu.com')

# 显式等待
ele = WebDriverWait(driver, timeout=30, poll_frequency=0.5).until(
    lambda x: x.find_element_by_id('kw')
)
ele.send_keys('hello')

十八、cookie操作

1. get_cookies 获取全部cookie

# import selenium
import time

from selenium import webdriver
from selenium.webdriver.support.wait import WebDriverWait

# 打开浏览器

driver = webdriver.Chrome()
# 打开网页
driver.get('https://www.baidu.com')

# 获得全部cookie
cookies = driver.get_cookies()

2. 增加cookie

# 获得全部cookie
cookies = driver.get_cookies()
# 增加cookie
driver.add_cookie({ 'name': 'token', 'value': '12345678' })

3. 删除cookie

# 获得全部cookie
cookies = driver.get_cookies()
# 增加cookie
driver.add_cookie({ 'name': 'token', 'value': '12345678' })
# 删除cookie
driver.delete_cookie('token')
# 删除全部cookie
driver.delete_all_cookies()

更新日志

提示:将会持续更新优化:

20220708,什么是web自动化测试?,Selenium 框架简介,web自动化测试环境搭建,Selenium第一个脚本,Selenium 原理,八大元素定位,元素四大操作,三大切换,下拉框处理,键盘操作,鼠标操作,日历日期处理,滚动条操作,上传处理,基础操作,截图,三大等待,cookie操作

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值