《最新出炉》系列初窥篇-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下拉框相关的 ...
随机推荐
- Codeforces Round #883 (Div. 3) A-G
比赛链接 A 代码 #include <bits/stdc++.h> using namespace std; using ll = long long; bool solve() { i ...
- hexo博客yilia主题_缺失模块_解决方案
hexo博客yilia主题,左侧栏目有一个全部文章的按钮,刚开始开始报错缺失模块,如下图: 我解决了这个问题着实不容易饶了弯路,但是跟着提示步骤,其实很简单,走起: 1.查看node版本 win键+R ...
- Istio 入门（五）：访问控制和流量管理
本教程已加入 Istio 系列:https://istio.whuanle.cn 目录 4, 流量管理 基于版本的路由配置 基于 Http header 的路由配置 故障注入 两种故障注入 比例分配流 ...
- Linux下手工编译libiconv库的小问题
我的电脑是 Ubuntu 14.04 LTS, 自己手工编译 php5.6, 打开 ZEND_EXTRA_LIBS='-liconv' 时, 发现没有安装 libiconv, 也就是编码转换的库, 所 ...
- FireflySoft.LeaderElection增加基于ZooKeeper的Leader选举
FireflySoft.LeaderElection的第一个版本实现了基于Consul的Leader选举,考虑到ZooKeeper的一个常见用途也是选主,所以此类库把ZooKeeper也集成了进来.并 ...
- Linux 问题：普通用户（non-root）无法ssh登录
vi /etc/pam.d/sshd ## 将下面那行注释,保存文件即可. # Disallow non-root logins when /etc/nologin exists. account r ...
- 学习狂神Spring5_课堂笔记（更新中）
Spring 简介 spring,英文单词为春天,表示为软件行业带来了春天. 2002年,首次推出了Spring框架的雏形:interface21框架.官网为:www.interface21.io但是 ...
- 修改启动配置文件更改root密码
第二种:修改启动配置文件 (1)进入救援模式 开机选择第一个系统内核,键入e (2)修改配置文件 将光标移动linux 开始的行,添加内核参数 rd.break 按ctrl-x启动 光标放在linux ...
- Prism报错
Rules.Default..WithoutFastExpressionCompiler()报错 说没有找到容器 1.查看Prism.Wpf源码 获取DryIoc容器规则 2.证明项目中出现了另外一个 ...
- Airtest的iOS实用接口介绍
1. 前言 前段时间Airtest更新了1.3.0.1版本,里面涉及非常多的iOS功能新增和改动,今天想详细跟大家聊一下里面的iOS设备接口. PS:本文示例均使用本地连接的iOS设备,Airtest ...