《最新出炉》系列初窥篇-Python+Playwright自动化测试-22-处理select下拉框-上篇
1.简介
在实际自动化测试过程中，我们也避免不了会遇到下拉框选择的测试，因此宏哥在这里直接分享和介绍一下，希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助。今天，我们讲下playwright的下拉框怎么处理，在使用selenium定位的过程中，我们可以选择使用selenium的Select类定位操作选择框（比较复杂），但是在playwright中真的炒鸡方便。
2.什么是下拉选择框
下拉框是一种常见的用户交互界面控件，一般用于向用户显示多项可选项，并从中让用户选择一个最佳答案。用户可以从下拉框内的给定列表中选择一项，从而输入对应内容，可以让Web设计师快速实现可空白集成以及简便操作，简化用户输入。
下拉框可以有不同的布局和表现形式。例如，普通的下拉框由复选框和滚动条组成，可以用来让用户在多个选择项中进行选择。也可以使用下拉框来处理大数据，使搜索变得更快。还有一种下拉框布局容纳输入框，提高用户输入效率。
下拉框有很多种优点。首先，它可以美化Web界面和节省空间，将多项选择以垂直形式呈现，节省空间。其次，它可以帮助保护用户免受错误输入，只能从列表内选择，从而避免用户输入错误的数据，如拼写错误的文本。此外，下拉框可以简化用户C（Control）操作，提高操作效率，更容易操作和反映用户意图。
更重要的是，下拉框可以帮助减少用户输入时间，并减少干扰，避免用户在全部文本选项中搜索。特别是在输入大量资料时，可以减少完成这项任务所需的时间，从而提高用户对网页的使用体验。
总之，下拉框在网页设计中经常使用，它具有很多优点，可以美化Web界面，提高用户的输入效率，减少用户的输入时间，帮助用户更好地控制后台系统，并降低错误录入的可能性。
3.Select用法
在Playwright中使用locator.select_option()选择元素中的一个或多个选项。我们可以指定选项value，或label选择并且可以选择多个选项。官方使用示例如下：
# Single selection matching the value
page.get_by_label('Choose a color').select_option('blue') # Single selection matching the label
page.get_by_label('Choose a color').select_option(label='Blue') # Multiple selected items
page.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue'])
3.1select元素示例
1.准备测试练习select.html，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试Select</title>
<style type="text/css">
.button1 {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 28px;
margin-bottom: 100px;
text-decoration:none;
color: white;
}
#myAnchor
{
text-decoration:none;
color: white;
}
</style>
</head>
<body>
<button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>
快递邮寄地址：
<select id="select_id" name="select_name" class ="select_cls">
<option value="0">请选择</option>
<option value="1">山西</option>
<option value="2">陕西</option>
<option value="3">山东</option>
<option value="4">四川</option>
<option value="5">河北</option>
</select>省_XXX_市_ XXX_街道
</body>
</html>
2.页面效果，如下图所示：
3.2仿照官方示例
# single selection matching the value or label
element.select_option("1")
# single selection matching the label
element.select_option(label="山东")
# select_name selection for 0, 1 and second option
element.select_option(value=["0","1", "2", "3","4","5"])
3.3操作select选择框
3.3.1语法
第一种方法：通过page对象直接调用，如下：
page.select_option(selector,value) # 通过value选择
page.select_option(selector,index) # 通过index选择
page.select_option(selector,label) # 通过label选择
以上方法是：使用selector选择器，先定位元素
第二种方法：先定位select元素，再定位选项，如下：
select = page.get_by_label("选择:")
select.select_option(label="forth")
4.牛刀小试
4.1先定位select元素，再定位选项
首先宏哥准备一个测试demo的html，因为在线的不好找或者不满足要演示的要求。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试Select</title>
<style type="text/css">
.button1 {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 28px;
margin-bottom: 100px;
text-decoration:none;
color: white;
}
#myAnchor
{
text-decoration:none;
color: white;
}
</style>
</head>
<body>
<button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>
<label>快递邮寄地址：
<select id="select_id" name="select_name" class ="select_cls">
<option value="0">请选择</option>
<option value="1">山西</option>
<option value="2">陕西</option>
<option value="3">山东</option>
<option value="4">四川</option>
<option value="5">河北</option>
</select>省_XXX_市_ XXX_街道
</label>
</body>
</html>
4.1.1根据选项名称定位
1.参考代码
# coding=utf-8 # 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行 # 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2023-09-13
@author: 北京-宏哥 QQ交流群：705269076
公众号：北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-21-处理select下拉框
''' # 3.导入模块
from playwright.sync_api import sync_playwright with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("C:/Users/DELL/Desktop/test/select.html")
page.wait_for_timeout(3000)
select = page.get_by_label("快递邮寄地址：")
option = select.select_option("山西")
print(option)
page.pause()
browser.close()
2.运行代码
（1）运行代码，右键Run'Test'，控制台输出，如下图所示：
4.1.2根据index索引定位
1.参考代码
# coding=utf-8 # 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行 # 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2023-09-13
@author: 北京-宏哥 QQ交流群：705269076
公众号：北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-21-处理select下拉框
''' # 3.导入模块
from playwright.sync_api import sync_playwright with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("C:/Users/DELL/Desktop/test/select.html")
page.wait_for_timeout(3000)
select = page.get_by_label("快递邮寄地址：")
option = select.select_option(index=3)
print(option)
page.pause()
browser.close()
2.运行代码
（1）运行代码，右键Run'Test'，控制台输出，如下图所示：
4.1.3根据lable标签定位
1.参考代码
（1）select的html元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试Select</title>
<style type="text/css">
.button1 {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 28px;
margin-bottom: 100px;
text-decoration:none;
color: white;
}
#myAnchor
{
text-decoration:none;
color: white;
}
</style>
</head>
<body>
<button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>
<label>快递邮寄地址：
<select id="select_id" name="select_name" class ="select_cls">
<option value="0" label="零">请选择</option>
<option value="1" label="第一">山西</option>
<option value="2" label="第二">陕西</option>
<option value="3" label="第三">山东</option>
<option value="4" label="第四">四川</option>
<option value="5" label="第五">河北</option>
</select>省_XXX_市_ XXX_街道
</label>
</body>
</html>
（2）定位操作
# coding=utf-8 # 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行 # 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2023-09-13
@author: 北京-宏哥 QQ交流群：705269076
公众号：北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-21-处理select下拉框
''' # 3.导入模块
from playwright.sync_api import sync_playwright with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("C:/Users/DELL/Desktop/test/select.html")
page.wait_for_timeout(3000)
select = page.get_by_label("快递邮寄地址：")
option = select.select_option(label="第五")
print(option)
page.pause()
browser.close()
2.运行代码
（1）运行代码，右键Run'Test'，控制台输出，如下图所示：
4.2通过page对象直接调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试Select</title>
<style type="text/css">
.button1 {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 28px;
margin-bottom: 100px;
text-decoration:none;
color: white;
}
#myAnchor
{
text-decoration:none;
color: white;
}
</style>
</head>
<body>
<button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>
快递邮寄地址：
<select id="select" name="select_name" class ="select_cls">
<option value="0" >请选择</option>
<option value="1" >山西</option>
<option value="2" >陕西</option>
<option value="3" >山东</option>
<option value="4" >四川</option>
<option value="5" >河北</option>
</select>省_XXX_市_ XXX_街道 </body>
</html>
4.2.1通过value定位
1.参考代码
# coding=utf-8 # 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行 # 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2023-09-13
@author: 北京-宏哥 QQ交流群：705269076
公众号：北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-21-处理select下拉框
''' # 3.导入模块
from playwright.sync_api import sync_playwright with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("C:/Users/DELL/Desktop/test/select.html")
page.wait_for_timeout(3000) option = page.select_option("#select","3")
print(option)
page.pause()
browser.close()
2.运行代码
（1）运行代码，右键Run'Test'，控制台输出，如下图所示：
4.2.2通过索引定位
1.参考代码
# coding=utf-8 # 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行 # 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2023-09-13
@author: 北京-宏哥 QQ交流群：705269076
公众号：北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-21-处理select下拉框
''' # 3.导入模块
from playwright.sync_api import sync_playwright with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("C:/Users/DELL/Desktop/test/select.html")
page.wait_for_timeout(3000) option = page.select_option("#select",index=5)
print(option)
page.pause()
browser.close()
2.运行代码
（1）运行代码，右键Run'Test'，控制台输出，如下图所示：
4.2.3通过lable定位
1.参考代码
# coding=utf-8 # 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行 # 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2023-09-13
@author: 北京-宏哥 QQ交流群：705269076
公众号：北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-21-处理select下拉框
''' # 3.导入模块
from playwright.sync_api import sync_playwright with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("C:/Users/DELL/Desktop/test/select.html")
page.wait_for_timeout(3000) option = page.select_option("#select","山西")
print(option)
page.pause()
browser.close()
2.运行代码
（1）运行代码，右键Run'Test'，控制台输出，如下图所示：
5.小结
好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助。
5.1小坑
额，最后耽误大家一点时间处理上一篇宏哥给大家挖的坑。不知道你们有没有发现，自从运行了上一篇中的非无恒模式启动浏览器代码以后，再次运行无痕模式启动浏览器时，会一直（偶尔一次可能不报错）报如下错误：
playwright._impl._api_types.Error: spawn UNKNOWN
这个错误的原因就是：没有安装playwright的浏览器导致的。宏哥奇了怪了啊，之前早就搭建环境安装好了，这里又报错没有安装。
找了半天没有找到原因，宏哥直接暴力解决问题，将之前安装浏览器的目录全部删除，在Docs命令窗口运行以下命令重新安装一下，完美解决了。
playwright install
## 或者
python -m playwright install
《最新出炉》系列初窥篇-Python+Playwright自动化测试-22-处理select下拉框-上篇的更多相关文章
- 《手把手教你》系列技巧篇（三十二）-java+ selenium自动化测试-select 下拉框（详解教程）
1.简介 在实际自动化测试过程中,我们也避免不了会遇到下拉选择的测试,因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助. 2.select 下拉框 2.1Select ...
- Selenium系列（十） - 针对Select下拉框的操作和源码解读
如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...
- 自动化测试基础篇--Selenium select下拉框
摘自https://www.cnblogs.com/sanzangTst/p/7681523.html 一.什么是下拉框 下拉框是多项选择项,选择其中一种,类似下面(以百度搜索设置为例) 源代码如下所 ...
- python+webdriver,选取Select下拉框中的值
在选择下拉框中的值时遇到了困难,用driver.find_element_by_id("").send_keys("")进行赋值不能成功获取下拉框中的值. ...
- EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))
一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...
- Python+Selenium操作select下拉框
首先需要倒入Select模块: from selenium.webdriver.support.select import Select 常用方法: 通过索引定位:select_by_index() ...
- Element UI系列：Select下拉框实现默认选择
实现的主要关键点在于 v-mode 所绑定的值,必须是 options 数组中对应的 value 值
- Python + Selenium 定位非selected型下拉框的方法
最近在尝试给自己负责的模块写UI自动化的Demo 登录及切换页面比较顺利 但是遇到下拉框的选择时,遇到了一点困难 我负责的模块页面的下拉框并非Select类型,无法使用select_by_index ...
- Selenium2+python自动化15-select下拉框
前言 最近由于工作原因,更新慢了一点,今天终于抽出一点时间给大家继续更新selenium系列,学习的脚本不能停止,希望小伙伴能多多支持. 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关 ...
- Selenium2+python自动化15-select下拉框【转载】
前言最近由于工作原因,更新慢了一点,今天终于抽出一点时间给大家继续更新selenium系列,学习的脚本不能停止,希望小伙伴能多多支持. 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的 ...
随机推荐
- 谷歌语法的基础知识&FOFA
谷歌语法 谷歌语法基础符号: "xxx":表示完全匹配,即关键字不能分开,顺序也不能变 +:"xxx"+www.baidu.com 搜索xxx与baidu.c ...
- Elasticsearch日常开发
2020-08-12 14:51:37 每次遇到ES开发,一般都是查询es里面的数据,今天我教大家一个简单的es的查询.废话不多说,直接上代码. 在pom文件中引入 <dependency> ...
- 【ElasticSearch】大数据量情况下的前缀、中缀实时搜索方案
简述 业务开发中经常会遇到这样一种情况,用户在搜索框输入时要实时展示搜索相关的结果.要实现这个场景常用的方案有Completion Suggester.search_as_you_type.那么这两种 ...
- Smali语言
什么是Smali smali语言是Davlik的寄存器语言,语法上和汇编语言相似,DalvikVM与JVM的最大的区别之一就是DalvikVM是基于寄存器的.基于寄存器的意思是,在smali里的所有操 ...
- PE结构总览
pe文件经历了从16位系统到32位系统的过度.因此32系统下的每一个PE文件都可以在16位系统下运行. 16位系统下的PE结构 在16位系统下,PE结构可以大致分为两个部分:DOS头和一些其他数据 # ...
- 手摸手带你初探Vue 3.0
1 前言 距离Vue 3.0正式发布已经过去一段时间了,2月7日Vue团队正式宣布Vue 3正式成为新的默认版本.最近接触的新项目也使用Vue 3.0来开发,因此有必要对它进行一波总结和学习. 2 简 ...
- 文心一言 VS 讯飞星火 VS chatgpt （65）-- 算法导论6.5 4题
四.在 MAX-HEAP-INSERT 的第 2行,为什么我们要先把关键字设为 -∞ ,然后又将其增加到所需的值呢? 文心一言: 在 MAX-HEAP-INSERT 算法的第二行将关键字设为 -∞,是 ...
- 号外号外！首届开源 AI 游戏挑战赛圆满结束！
北京时间 7 月 8 日到 7 月 10 日, 我们举办了 首届开源 AI 游戏开发挑战赛.这是一场激动人心的赛事活动,游戏开发者在紧迫的 48 小时内使用 AI 创造.创新有创意的游戏. 本次赛事活 ...
- Nacos启动时报错No DataSource set排查
问题描述 最近在学习Nacos组件,使用的是最新版本:2.2.3. 在本地虚拟机CentOS 8.5.2111环境中安装Nacos,并使用standalone模式启动,同时配置使用外部MySQL数据库 ...
- Mysql 统计标签出现次数（一行变多行）
需求背景 需求 一张数据表 其中有sid字段,代表tag,每行数据可能有多个tag字段 统计全量数据中所有tag出现的次数(按tag分组,分别有多少数据) source table demo id s ...