第一阶段——Python测试之Web自动化测试

发布时间:2026/7/4 4:22:52

第一阶段——Python测试之Web自动化测试 全面掌握基于PythonSelenium的WebUl自动化测试能够独立搭建一套完整自动化UI测试框架一 相关概念Selenium集成的客户端库之一是Web浏览器自动化方案自动完成界面操作获取信息Selenium支持多种常见的编程语言请求通过库中的编程接口发送浏览器安装pip install Selenium,python 3.7以上才支持Selenium 4客户端库原理示例模拟用户点击界面按钮流程:自动化程序--调用库函数发送点击元素请求------浏览器驱动-------转发请求给浏览器| |—— —— —— —— 浏览器驱动获取结果 —— 浏览器执行 ——利用selenium自动打开Eedge浏览器下的CSDN官网示例代码[1]from selenium import webdriver #创建webdriver对象其中浏览器名首字母大写 wd webdriver.Edge() # 指定 Edge 浏览器会自动下载驱动 #调用webdriver对象的get方法打开CSDN网址 wd.get(https://www.csdn.net/?spm1001.2101.3001.4476) #程序运行完毕后会自动关闭浏览器即闪退故加入input等待用户输入防止闪退 input(按回车退出) #有时候程序还没运行完毕想提前关闭窗口以此替代input即可 wd.quit()二 选择和操控元素基本方法操控元素一般包含1.点击2.输入字符串3.获取元素信息等等前先定位界面元素一般浏览器中F12在开发者工具栏elements中查看。 以Edge为例如图可定位相应的元素​1.元素定位相关法则元素法则id一般不会重复类似于人类ID cardcss selector万金油基于class属性定位xpath万金油基于树状结构定位link tsxt元素的文本定位仅用于a标签的元素定位partial link text元素的文本定位模糊查找的方式类似SQL中like %s%仅用于a标签的元素定位name可能重复类似于人名tag_name一定重名自动化几乎不用爬虫使用居多class_nameclass属性定位因class值较长故不推荐2.以上文CSDN网址为例进行相应实操浏览器CSDN网址tasks编程软件EdgeCSDN_专业开发者社区1.定位元素获取定位信息2.输入信息点击PyCharm. 2023from selenium import webdriver from selenium.webdriver.common.by import By #创建webdriver对象其中浏览器名首字母大写 wd webdriver.Edge() # 指定 Edge 浏览器会自动下载驱动 #调用webdriver对象的get方法打开指定网址 wd.get(https://www.csdn.net/?spm1001.2101.3001.4476) #xpath定位元素对应的webelement对象,输入内容 bc wd.find_element(By.XPATH, //*[idtoolbar-search-input]).send_keys(codex安装教程) #定位搜索按钮#点击 bco wd.find_element(By.ID, toolbar-search-button).click() #程序运行完毕后会自动关闭浏览器即闪退故加入input等待用户输入防止闪退 input(按回车退出)注如果element指代一类元素class需用elements少s只会返回第一个元素WebDriver 对象选择元素的范围是整个 web页面 而WebElement 对象选择元素的范围是该元素的内部。元素也可以有多个class类型类型的值之间用空格隔开比如span classchinese animal熊猫/span用代码选择这个元素指定任一个class 属性值即chineseh or animal均可选择到此元素如下element wd.find_elements(By.CLASS_NAME,chinese) orelement wd.find_elements(By.CLASS_NAME,animal)Selenium 的 Webdriver 对象 有个方法叫implicitly_wait可以称之为隐式等待或者全局等待该方法接受一个参数 用来指定最大等待时长。使用情况有时候我们的代码执行的速度比网站响应的速度快。网站还没有来得及返回搜索结果。from selenium import webdriverfrom selenium.webdriver.common.by import Bywd webdriver.Chrome()wd.implicitly_wait(10)wd.get(https://www.byhy.net/cdn2/files/selenium/stock1.html)element wd.find_element(By.ID, kw)element.send_keys(通讯\n)# 返回页面 ID为1 的元素element wd.find_element(By.ID,1)print(element.text)input(按回车退出)三 CSS selector(选择器)表达式选择的 元素 没有id、class 属性或者选择的元素有相同的 id、class属性值HTML中常要为某些元素指定显示效果如 前景文字颜色是红色 背景颜色是黑色 字体是微软雅黑等。CSS必须告诉浏览器要选择哪些元素 来使用这样的显示风格。根据class属性 选择元素的语法是在 class 值 前面加上一个点.class值elements wd.find_elements(By.CSS_SELECTOR, .animal)1.元素选择原理CSS可以根据tag名、id 属性和class属性来选择元素css 选择器支持通过任何属性来选择元素通用语法是用一个方括号[]。CSS 还可以选择属性值包含某个字符串 的元素比如 要选择a节点里面的href属性包含了 miitbeian 字符串就可以这样写a[href*miitbeian]还可以 选择 属性值 以某个字符串开头的元素比如 要选择a节点里面的href属性以 http 开头 就可以这样写a[href^http]还可以 选择 属性值 以某个字符串结尾的元素比如 要选择a节点里面的href属性以 gov.cn 结尾 就可以这样写a[href$gov.cn]如果一个元素具有多个属性div classmisc ctypegun沙漠之鹰/divCSS 选择器 可以指定 选择的元素要 同时具有多个属性的限制像这样div[classmisc][ctypegun]最好养成加引号的习惯div[classmisc][ctypegun]CSS 选择器 可以限定选择的上级范围也就是选择某个元素的子元素和后代元素。Example图中红色边框中的均为直接子元素简称子元素子元素下面就是均为后代元素显然蓝色底层的是红色边框中的父元素----如果元素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最终选择的元素是元素4CSS 支持 大于号和 空格 混合使用比如元素1 元素2 元素3 元素4其中每个元素的写法 可以是复合写法比如span.date // 选择 class 值有 date 的 span 元素 div#bottom // 选择 id 为 bottom 的 div 元素 div#bottom.date // 选择 id 为 bottom, class 值有 date, 的 div 元素2.验证CSS选择器做自动化开发的时有大量选择元素的语句浏览器直接支持CSS Selector 故可在浏览器开发者工具栏CtrlF中搜索验证,在搜索框中输入任何 CSS Selector 表达式整个位置会高亮显示。3.组选择同时选择所有class 为 plant和class 为 animal 的元素css选择器可以 使用逗号称之为组选择.plant , .animal同时选择所有tag名为div的元素和id为BYHY的元素div,#BYHY对应的selenium代码如下elements wd.find_elements(By.CSS_SELECTOR, div,#BYHY) for element in elements: print(element.text)​#t1 span,p---选择所有id 为 t1 里面的 span和所有的 p 元素选择所有 id 为t1 里面的span 和 p 元素------#t1 span , #t1 p四 按次序选择子节点1.父元素的第n个子节点使用nth-child------格式元素类型nth-child(n) ,无类型限制则去除“元素类型”即可 eg.span:nth-child(2)元素类型nth-of-type(n) ,无类型限制则去除“元素类型”即可 eg.span:nth-of-type(2)2.父元素的倒数第n个子节点使用nth-last-child------格式元素类型nth-last-child(n) ,无类型限制则去除“元素类型”即可 eg.span:nth-last-child(2)元素类型nth-last-of-type(n) ,无类型限制则去除“元素类型”即可 eg.span:nth-last-of-type(2)3.奇偶节点如果要选择的是父元素的偶数节点使用nth-child(even)p:nth-child(even)如果要选择的是父元素的奇数节点使用nth-child(odd)p:nth-child(odd)如果要选择的是父元素的某类型偶数节点使用nth-of-type(even)如果要选择的是父元素的某类型奇数节点使用nth-of-type(odd)4.兄弟节点选择相邻兄弟节点选择--元素类型元素类型最终找的是相邻的弟后续所有兄弟节点选择---元素类型~元素类型最终找的是后面所有的弟五 frame切换/窗口切换1.frame切换在html语法中frame 元素 或者iframe元素的内部 会包含一个被嵌入的另一份html文档使用selenium打开一个网页时我们的操作范围是当前的最外层的 html 并不包含被嵌入的html文档里面的内容。如果我们要操作被嵌入的 html 文档中的元素 就必须切换操作范围到被嵌入的文档中。使用 WebDriver 对象的 switch_to 属性wd.switch_to.frame(frame_reference)其中 frame_reference 可以是 frame 元素的属性name 或者 ID。示例代码from selenium import webdriver from selenium.webdriver.common.by import By wd webdriver.Edge() wd.implicitly_wait(10) wd.get(https://www.byhy.net/cdn2/files/selenium/sample2.html) element wd.find_element(By.ID, outerbutton) print(element.text) wd.switch_to.frame(innerFrame) elements wd.find_elements(By.CLASS_NAME, plant) for els in elements: print(els.text) wd.switch_to.default_content()#切回主HTML cl1 wd.find_element(By.CSS_SELECTOR, outerbutton).click() ##outerbutton button#outerbutton可与outerbutton进行替换 input(回车退出)2.切换到新窗口用Selenium写自动化程序在新窗口里面 打开一个新网址 并且去自动化操作新窗口里面的元素前需验证WebDriver对象是否指向的还是老窗口经验证还是老窗口。#验证 from selenium import webdriver from selenium.webdriver.common.by import By wd webdriver.Edge() wd.implicitly_wait(10) wd.get(https://www.csdn.net/?spm1001.2101.3001.4476) # 点击打开新窗口的链接 link wd.find_element(By.CSS_SELECTOR, a[href*162342247]).click() # wd.title属性是当前窗口的标题栏 文本 print(wd.title) 结果CSDN_专业开发者社区SOLVE使用Webdriver对象的switch_to属性的 window方法WebDriver对象有window_handles 属性这是一个列表对象 里面包括了当前浏览器里面所有的窗口句柄即窗口ID。wd.switch_to.window(handle)以CSDN示例from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep as sl wd webdriver.Edge() wd.implicitly_wait(10) wd.get(https://www.csdn.net/?spm1001.2101.3001.4476) # mainWindow变量保存当前窗口的句柄 mainWindow wd.current_window_handle win1 wd.window_handles[0] #方法2 # 点击打开新窗口的链接 # 方式一通过>input(回车退出)六 选择框----常见的选择框包括 radio框、checkbox框、select框1.radio框(点选单选框)#RADIO选择框 from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep as sl wd webdriver.Edge() wd.implicitly_wait(10) wd.get(https://www.byhy.net/cdn2/files/selenium/test2.html) ele wd.find_element(By.CSS_SELECTOR, input[nameteacher][checked]) print(当前选中的, ele.get_attribute(value)) sl(5) wd.find_element(By.CSS_SELECTOR, #s_radio input[value小江老师]).click() sl(5) ele wd.find_element(By.CSS_SELECTOR, input[nameteacher]:checked) print(ele.get_attribute(value))注checked表示当前选中的2.checkbox框勾选框--要选中checkbox的一个选项必须先获取当前该复选框的状态如果该选项已经勾选了就不能再点击。否则反而会取消选择。#checkbox选择框 from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep as sl wd webdriver.Edge() wd.implicitly_wait(10) wd.get(https://www.byhy.net/cdn2/files/selenium/test2.html) eles wd.find_elements(By.CSS_SELECTOR, #s_checkbox input[nameteachers1]:checked) values [ele.get_attribute(value) for ele in eles] print(当前选中的, values) for ele in eles: ele.click() sl(5) wd.find_element(By.CSS_SELECTOR, #s_checkbox input[value小江老师]).click() wd.find_element(By.CSS_SELECTOR, #s_checkbox input[value小雷老师]).click() sl(5) eles wd.find_elements(By.CSS_SELECTOR, input[nameteachers1]:checked) for ele in eles: print(最终选中的, ele.get_attribute(value))3.Select框radio框及checkbox框都是input元素只是type不同。select框 则是一个新的select标签可以对照https://www.byhy.net/cdn2/files/selenium/test2.html查看对于Select 选择框 Selenium 专门提供了一个Select类进行操作更加简便from selenium.webdriver.support.select import Select这个类实例化时传入 Select元素对应的 WebElement 对象比如select Select(wd.find_element(By.ID, ss_single))Select类 提供了如下常用的 属性 和 方法all_selected_options返回所有当前选中的option元素对应的 WebElement 对象比如for ele in select.all_selected_options: print(ele.text)select_by_value根据选项的value属性值选择元素。比如下面的HTMLoption valuefooBar/option就可以根据 foo 这个值选择该选项select.select_by_value(foo)select_by_index根据选项的次序选择元素现在Selenium 4 是从0开始, 第一个选项 index 为0select_by_index(0)选择的是 第1个选项select_by_index(1)选择的是 第2个选项 依此类推老版本的 Seleium是从1开始select_by_visible_text根据选项的可见文本选择元素。比如下面的HTMLoption valuefooBar/option就可以根据 Bar 这个内容选择该选项select.select_by_visible_text(Bar)deselect_by_value根据选项的value属性值去除选中元素deselect_by_index根据选项的次序去除选中元素deselect_by_visible_text根据选项的可见文本去除选中元素deselect_all去除选中所有元素1Select单选框直接用Select方法选择即可。例如选择示例里面的小雷老师示例代码如下fromseleniumimportwebdriverfromselenium.webdriver.supportimportselectfromselenium.webdriver.support.selectimportSelectfromselenium.webdriver.common.byimportByfromtimeimportsleepassl wd webdriver.Edge() wd.implicitly_wait(10) wd.get(https://www.byhy.net/cdn2/files/selenium/test2.html)#创建select对象sel Select(wd.find_element(By.ID,ss_single))#通过对象选择sel.select_by_value(小江老师) sl(5)2Select多选框要选中某几个选项要注意去掉原来已经选中的选项然后再选择示例代码如下fromseleniumimportwebdriverfromselenium.webdriver.support.selectimportSelectfromselenium.webdriver.common.byimportByfromtimeimportsleepassl wd webdriver.Edge() wd.implicitly_wait(10) wd.get(https://www.byhy.net/cdn2/files/selenium/test2.html)#创建select对象sel Select(wd.find_element(By.ID,ss_multi))#取消已选中的sel.deselect_all()#通过对象选择sel.select_by_value(小江老师) sel.select_by_value(小雷老师) sl(5)七 XPath选择器XPath (XML Path Language) 是由国际标准化组织W3C指定的用来在 XML 和 HTML 文档中选择节点的语言。目前主流浏览器 (chrome、firefoxedgesafari) 都支持XPath语法Xpath有多个版本目前浏览器支持的是xpath 1.0的语法。Xpath 语法中整个HTML文档根节点用/表示选择根节点下面的html节点可以在搜索框输入/html如果输入下面的表达式/html/body/div这个表达式表示选择html下面的body下面的div元素。‘/’类似于 CSS中的, 表示直接子节点关系。1.使用场景有些场景 用 css 选择web 元素 很麻烦而xpath 却比较方便。另外 Xpath 还有其他领域会使用到比如爬虫框架 Scrapy手机App框架 Appium2.绝对路径选择绝对路径从根节点开始的到某个节点每层都依次写下来每层之间用/分隔的表达式自动化程序要使用Xpath来选择web元素使用By.XPATH像这样elements driver.find_elements(By.XPATH, /html/body/div/select)3.相对路径选择选择网页中某个元素不管它在什么位置。xpath需要前面加//, 表示从当前节点往下寻找所有的后代元素,不管它在什么位置。// 符号也可以继续加在后面,比如要选择 所有的 div 元素里面的 所有的 p 元素 不管div 在什么位置也不管p元素在div下面的什么位置则可以这样写//div//p对应的自动化程序如下elements driver.find_elements(By.XPATH, //div//p)如果使用CSS选择器对应代码如下elements driver.find_elements(By.CSS_SELECTOR,div p)如果要选择 所有的 div 元素里面的 直接子节点 p xpath就应该这样写了//div/p4.通配符选择所有div节点的所有直接子节点可以使用表达式//div/**是一个通配符对应任意节点名的元素类似 CSS选择器div *代码如下elements driver.find_elements(By.XPATH, //div/*) for element in elements: print(element.get_attribute(outerHTML))5.根据属性选择根据属性来选择元素 是通过[属性名属性值]注意属性名注意前面有个属性值一定要用引号 可以是单引号也可以是双引号1)根据id属性选择选择 id 为 west 的元素可以这样//*[idwest]2)根据class属性选择选择所有 select 元素中 class为 single_choice 的元素可以这样//select[classsingle_choice]如果一个元素class 有多个p idbeijing classcapital huge-city 北京 /p如果要选它 对应的 xpath 就应该是//p[classcapital huge-city]不能只写一个属性像这样//p[classcapital]则不行3)根据其他属性比如选择具有multiple属性的所有页面元素可以这样//*[multiple]4)属性值包含字符串要选择 style属性值 包含 color 字符串的 页面元素//*[contains(style,color)]要选择 style属性值 以 color 字符串开头的 页面元素//*[starts-with(style,color)]要选择 style属性值 以 某个 字符串 结尾 的 页面元素 可以推测是//*[ends-with(style,color)]这是xpath 2.0 的语法 目前浏览器都不支持6.按次序选择xpath也可以根据次序选择元素。语法比css更简洁直接在方括号中使用数字表示次序1)某类型 第几个 子元素要选择 p类型第2个的子元素就是//p[2]注意选择的是p类型第2个的子元素 不是第2个子元素并且是p类型。再比如要选取父元素为div 中的 p类型 第2个 子元素//div/p[2]2)第几个子元素也可以选择第2个子元素不管是什么类型采用通配符比如 选择父元素为div的第2个子元素不管是什么类型//div/*[2]3)某类型 倒数第几个 子元素选取p类型倒数第1个子元素//p[last()]选取p类型倒数第2个子元素//p[last()-1]选择父元素为div中p类型倒数第3个子元素//div/p[last()-2]4)范围选择xpath还可以选择子元素的次序范围。选取option类型第1到2个子元素//option[position()2]或者//option[position()3]选择class属性为multi_choice的前3个子元素//*[classmulti_choice]/*[position()3]选择class属性为multi_choice的后3个子元素//*[classmulti_choice]/*[position()last()-2]7.组选择、父节点、兄弟节点1)组选择css有组选择可以同时使用多个表达式多个表达式选择的结果都是要选择的元素css 组选择表达式之间用逗号隔开xpath也有组选择 是用竖线隔开多个表达式比如要选所有的option元素 和所有的 h4 元素//option | //h4等同于CSS选择器option , h4再比如要选所有的 class 为 single_choice 和 class 为 multi_choice 的元素可以使用//*[classsingle_choice] | //*[classmulti_choice]等同于CSS选择器.single_choice , .multi_choice2)选择父节点xpath可以选择父节点 这是css做不到的。某个元素的父节点用/..表示比如要选择 id 为 china 的节点的父节点可以这样写//*[idchina]/..。当某个元素没有特征可以直接选择但是它有子节点有特征 就可以采用这种方法先选择子节点再指定父节点。还可以继续找上层父节点比如//*[idchina]/../../..3)兄弟节点选择前面学过 css选择器要选择某个节点的后续兄弟节点用波浪线xpath也可以选择 后续 兄弟节点用这样的语法following-sibling::比如要选择 class 为 single_choice 的元素的所有后续兄弟节点//*[classsingle_choice]/following-sibling::*等同于CSS选择器.single_choice ~ *如果要选择后续节点中的div节点 就应该这样写//*[classsingle_choice]/following-sibling::divxpath还可以选择前面的兄弟节点用这样的语法preceding-sibling::比如要选择 class 为 single_choice 的元素的所有前面的兄弟节点这样写//*[classsingle_choice]/preceding-sibling::*要选择 class 为 single_choice 的元素的前面最靠近的兄弟节点 , 这样写//*[classsingle_choice]/preceding-sibling::*[1]前面第2靠近的兄弟节点 , 这样写//*[classsingle_choice]/preceding-sibling::*[2]而 CSS选择器 目前还没有方法选择前面的兄弟节点了解更多Xpath选择语法可以点击这里打开Xpath选择器参考手册8.注意*# 先寻找id是china的元素 china wd.find_element(By.ID, china) # 再选择该元素内部的p元素 elements china.find_elements(By.XPATH, //p) # 打印结果 for element in elements: print(----------------) print(element.get_attribute(outerHTML))运行发现打印的 不仅仅是 china内部的p元素 而是所有的p元素。要在某个元素内部使用xpath选择元素 需要在xpath表达式最前面加个点elements china.find_elements(By.XPATH, .//p)...................................................................书接下回.........................................................................注[1] B站博主白月黑羽编程http://【Python Selenium Web自动化 - 2024 更新版 - 自动化测试 爬虫】https://www.bilibili.com/video/BV1Z4411o7TA?vd_sourcea94a2e7a699eae782e68e7e73ed12ff4[2] B站博主测试干货铺https://www.byhy.net/cdn2/files/selenium/test2.html

相关新闻