《最新出炉》系列初窥篇-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下拉框相关的 ...
随机推荐
- 多线程知识：三个线程如何交替打印ABC循环100次
本文博主给大家讲解一道网上非常经典的多线程面试题目.关于三个线程如何交替打印ABC循环100次的问题. 下文实现代码都基于Java代码在单个JVM内实现. 问题描述 给定三个线程,分别命名为A.B.C ...
- .NetCore3.1+微服务架构技术栈
目标 目标系统架构演变,单体-分布式-微服务-中台 微服务架构核心解决,横向对比1.0.2.0.3.0 践行微服务架构,全组件解读! 也谈中台 单体架构Monolithic 单体应用时代:应用程序就是 ...
- Java_Day17_作业
1:需求:递归删除带内容的目录 假设删除当前项目下的目录:demo,demo中可以有文件夹自己给出 2:需求:请大家把E:\JavaSE目录下所有的java结尾的文件的绝对路径给输出在控制台. 3:下 ...
- ChatGPT在工业领域的研究与应用探索-产品化部署及应用
<ChatGPT在工业领域的研究与应用探索-数据与工况认知> <ChatGPT在工业领域的研究与应用探索-AI助手实验应用> ChatGPT在工业领域的应用需要解决两个问题:( ...
- 好用的windows工具分享（20个）
1.截图.画图全屏截图快捷键:printSreen窗口截图快捷键:alt+printSreen自定义截图工具:win+shift+s画图快捷键:cmd - mspaint可配合画图工具实现图片的编辑, ...
- linux 查看进程使用的内存大小
你可以使用 ps 命令结合 grep 命令来查看进程使用的内存大小.以下是示例代码: ps aux | grep <进程名> 这个命令会列出所有匹配 <进程名> 的进程,并显示 ...
- ENVI、ERDAS计算Landsat 7地表温度：单窗算法实现
本文介绍基于ENVI与ERDAS软件,对Landsat 7遥感影像数据加以单窗算法的地表温度(LST)反演操作. 目录 1 原理部分与前期操作准备 1.1 图像预处理 1.2 植被指数反演 1.3 单 ...
- 使用 python 快速搭建http服务
python -m SimpleHTTPServer 8888 使用上面的命令可以把当前目录发布到8888端口. 直接浏览器访问 但是这条命令是当前运行的,不是后台运行的,也就是说如果Ctrl + C ...
- [shell]在curl测试的data参数中引用变量
在curl测试的data参数中引用变量 前言 在使用curl接口进行接口传参时,常会使用如下方法: #!/bin/bash url="http://192.168.0.10:8000/api ...
- 文心一言 VS 讯飞星火 VS chatgpt （82）-- 算法导论8.1 1题
一.如果用go语言,在一棵比较排序算法的决策树中,一个叶结点可能的最小深度是多少? 文心一言: 在一个排序决策树(如二叉搜索树)中,每个叶节点的最小深度等于输入数据中最大元素与最小元素之间的位距离.这 ...