《最新出炉》系列初窥篇-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下拉框相关的 ...
随机推荐
- python3.8下安装robotframework历险记
首先非常感谢本文章博主,极大的给与我可以装好的信心(差点要重装python)https://blog.csdn.net/qq_21583077/article/details/107848409?sp ...
- 详解在Linux中修改Tomcat使用的jdk版本
问题分析 由于部署个人项目使用了openjdk11,但是我之前安装的是jdk1.8,jdk版本升级的后果就是,tomcat运行的时候报一点小bug(因为之前安装tomcat默认使用了系统的jdk版本) ...
- 2023年郑州轻工业大学校赛邀请赛zxy
第一次组队和大家去外校打比赛,真的是一次很棒的体验,尽管结果不尽人意,但总之收获颇丰,也认识到自身更多的不足. 本次比赛是三人一队,一台电脑,一分纸质试题,我们三人开始先从第一题开始,这题看起来还行, ...
- React:如何在普通函数中使用Hook
解决方案
- 利用选项卡提高Visual Studio 2022开发效率
设计器作为软件开发的必要工具,其效率的提高显得尤为重要.Visual Studio 2022作为一款功能强大的设计器,通过选项卡提高了工作效率,让开发者在使用过程中更加便捷. 在Visual Stud ...
- [nginx]定制http头信息
前言 修改http响应头信息,相关Nginx模块:ngx_http_headers_module expires 语法: expires [modified] time; expires [modif ...
- [Lua][Love] "图块集与地图" 加载显示功能 TileMap
效果 安装库 安装两个库,分别用来读xml和csv,如果有luarocks,执行下列命令 luarocks install xml2lua luarocks install ftcsv manoelc ...
- Java NIO 图解 Netty 服务端启动的过程
一.启动概述 了解整体Netty常用的核心组件后,并且对比了传统IO模式.在对比过程中,找到了传统IO对应Netty中是如何实现的.最后我们了解到在netty中常用的那些组件. 本文在了解下这些核心组 ...
- dotnet SemanticKernel 入门 自定义变量和技能
本文将告诉大家如何在 SemanticKernel 框架内定义自定义的变量和如何开发自定义的技能 本文属于 SemanticKernel 入门系列博客,更多博客内容请参阅我的 博客导航 自定义变量是一 ...
- EXE一机一码加密大师1.3.0更新
EXE一机一码打包加密大师可以打包加密保护EXE文件,同时给EXE文件添加上一机一码认证,或者静态密码,不同的电脑打开加密后的文件需要输入不同的激活码才能正常使用,保护文件安全,方便向用户收费. 1. ...