当前位置： 首页 > news >正文

《刚刚问世》系列初窥篇-Java+Playwright自动化测试-24- 操作Select下拉选择框 - 上篇（详细教程） - 北京

news 2025/9/6 22:54:49

1.简介

在实际自动化测试过程中，我们也避免不了会遇到下拉框选择的测试，因此宏哥在这里直接分享和介绍一下，希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助。今天，我们讲下playwright的下拉框怎么处理，在使用selenium定位的过程中，我们可以选择使用selenium的Select类定位操作选择框（比较复杂），但是在playwright中真的炒鸡方便,而且我们在Python语言中已经体验过其便利之处，今天跟随宏哥来看一下java语言中是如何通过playwright处理下拉选择框的。

2.什么是下拉选择框

下拉框是一种常见的用户交互界面控件，一般用于向用户显示多项可选项，并从中让用户选择一个最佳答案。用户可以从下拉框内的给定列表中选择一项，从而输入对应内容，可以让Web设计师快速实现可空白集成以及简便操作，简化用户输入。

下拉框可以有不同的布局和表现形式。例如，普通的下拉框由复选框和滚动条组成，可以用来让用户在多个选择项中进行选择。也可以使用下拉框来处理大数据，使搜索变得更快。还有一种下拉框布局容纳输入框，提高用户输入效率。

下拉框有很多种优点。首先，它可以美化Web界面和节省空间，将多项选择以垂直形式呈现，节省空间。其次，它可以帮助保护用户免受错误输入，只能从列表内选择，从而避免用户输入错误的数据，如拼写错误的文本。此外，下拉框可以简化用户C（Control）操作，提高操作效率，更容易操作和反映用户意图。

更重要的是，下拉框可以帮助减少用户输入时间，并减少干扰，避免用户在全部文本选项中搜索。特别是在输入大量资料时，可以减少完成这项任务所需的时间，从而提高用户对网页的使用体验。

总之，下拉框在网页设计中经常使用，它具有很多优点，可以美化Web界面，提高用户的输入效率，减少用户的输入时间，帮助用户更好地控制后台系统，并降低错误录入的可能性。

3.Select用法

 在Playwright中使用locator.selectOption()选择元素中的一个或多个选项。我们可以指定选项value，或label选择并且可以选择多个选项。官方使用示例如下：
// Single selection matching the value or label
page.getByLabel("Choose a color").selectOption("blue");// Single selection matching the label
page.getByLabel("Choose a color").selectOption(new SelectOption().setLabel("Blue"));// Multiple selected items
page.getByLabel("Choose multiple colors").selectOption(new String[] {"red", "green", "blue"});

3.1select元素demo

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 labelelement.selectOption("1");# single selection matching the labelelement.selectOption(new SelectOption().setLabel("山东"));# select_name selection for 0, 1 and second optionelement.selectOption(new String[] {"0", "1", "2","3", "4", "5"});

3.3操作select选择框

3.3.1语法

第一种方法：通过page对象直接调用，如下：

page.selectOption(selector,value);        # 通过value选择
page.selectOption(selector,index);        # 通过index选择
page.selectOption(selector,label);        # 通过label选择

以上方法是：使用selector选择器，先定位元素

第一种通过value选择，顾名思义，可以通过我们的选择框的value元素进行选择
第二种通过index选择，意思是我们可以通过下标来选择
第三种通过label选择，意思是我们可以通过选项值来选择

第二种方法：先定位select元素，再定位选项，如下：

select = page.getByLabel("选择:");
select.selectOption(new SelectOption().setLabel("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根据选项名称定位

根据前边的理论知识进行选项名称定位。

4.1.1.1代码设计

4.1.1.2参考代码
package com.bjhg.playwright;import java.util.List;import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;/*** @author 北京-宏哥* * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）* * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-24- 操作Select下拉选择框 - 上篇（详细教程）** 2024年10月25日*/
public class Test_Select {public static void main(String[] args) {try (Playwright playwright = Playwright.create()) {//1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000));//2.创建contextBrowserContext context = browser.newContext();//创建pagePage page = context.newPage();//3.浏览器访问demopage.navigate("file:///E:/Desktop/test/select.html");//4.选项名称定位Locator select = page.getByLabel("快递邮寄地址：");List<String> option = select.selectOption("山西");System.out.println(option);System.out.println("Test Pass");//关闭page
              page.close();//关闭browser
              browser.close();}}
}
4.1.1.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（下拉选择框选择了“山西”）。如下图所示：

4.1.2根据index索引定位
 根据前边的理论知识进行index索引定位。
4.1.2.1代码设计

4.1.2.2参考代码
package com.bjhg.playwright;import java.util.List;import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import com.microsoft.playwright.options.SelectOption;/*** @author 北京-宏哥* * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）* * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-24- 操作Select下拉选择框 - 上篇（详细教程）** 2024年10月25日*/
public class Test_Select {public static void main(String[] args) {try (Playwright playwright = Playwright.create()) {//1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000));//2.创建contextBrowserContext context = browser.newContext();//创建pagePage page = context.newPage();//3.浏览器访问demopage.navigate("file:///E:/Desktop/test/select.html");//4.根据index索引定位Locator select = page.getByLabel("快递邮寄地址：");List<String> option = select.selectOption(new SelectOption().setIndex(3));System.out.println(option);System.out.println("Test Pass");//关闭page
              page.close();//关闭browser
              browser.close();}}
}
4.1.2.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（下拉选择框选择index=3，也就是“山东”）。如下图所示：

4.1.3根据label标签定位
 根据前边的理论知识进行label标签定位。
4.1.3.1代码设计

4.1.3.2参考代码

（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）定位操作

package com.bjhg.playwright;import java.util.List;import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import com.microsoft.playwright.options.SelectOption;/*** @author 北京-宏哥* * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）* * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-24- 操作Select下拉选择框 - 上篇（详细教程）** 2024年10月25日*/
public class Test_Select {public static void main(String[] args) {try (Playwright playwright = Playwright.create()) {//1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000));//2.创建contextBrowserContext context = browser.newContext();//创建pagePage page = context.newPage();//3.浏览器访问demopage.navigate("file:///E:/Desktop/test/select.html");//4.根据label标签定位Locator select = page.getByLabel("快递邮寄地址：");List<String> option = select.selectOption(new SelectOption().setLabel("第五"));System.out.println(option);System.out.println("Test Pass");//关闭page
              page.close();//关闭browser
              browser.close();}}
}
4.1.3.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作。如下图所示：

5.小结

好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助。

http://www.sczhlp.com/news/1031.html

相关文章：

  • delphi7 中文企业版编译minipad2
  • 【PCIE725-1 】基于 PCIe x16 总线架构的 JFM9VU9P FPGA 高性能数据预处理平台（100%国产化）
  • Prometheus源码专题【左扬精讲】—— 监控系统 Prometheus 3.4.0 源码解析：Discovery 动态服务发现机制
  • 在运维工作中，Docker的运行状态有哪些?
  • BZOJ 4641 题解
  • APP UI自动化元素定位高频问题
  • 通义灵码保姆级教程：从数据读取、清洗、结合大模型分析、可视化、生成报告全链路
  • 在运维工作中，docker file 用什么构建容器的？
  • 一维光栅结构严格耦合波分析(RCWA)求解器
  • rust学习笔记之基础：类型系统和类型转换
  • 在运维工作中，Docker的基本命令有哪些？
  • 云原生周刊：2025年的服务网格
  • 故障处理：troubleshooting Cluster Time Synchronization Service
  • 在运维工作中，镜像启动一个容器的命令的什么？
  • python命令行解析模块argparse
  • 学习笔记：一次RMAN还原慢的分析
  • 抖音Next-User Retrieva：生成式冷启动召回
  • 求两个自然数a和b的最大公约数(递归算法)
  • nginx压缩字体ttf的有关配置
  • 如何选择工业电脑？
  • 教你创业SUS
  • 使用 nacos-sdk-csharp 服务订阅机制动态更新Yarp配置的简易Demo
  • Three.js 的第一个工程-创建一个场景
  • nginx配置文件生产环境优化
  • 贪心随笔
  • ubuntu系统ufw开放端口教程
  • 基础算法随笔
  • 技术跃迁！DVP AirCAMERA _1020摄像头小板赋能开发者构建顶级视觉系统
  • 小工具
  • Ubuntu20.04 安装gcc11 g++11, Ubuntu18.04