Java+Playwright自动化测试-24- 操作Select下拉选择框
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，如下：
测试Select 北京-宏哥
快递邮寄地址： 请选择 山西 陕西 山东 四川 河北
请选择
山西
陕西
山东
四川
河北
省_XXX_市_ XXX_街道
2.页面效果，如下图所示：
https://img2024.cnblogs.com/blog/1232840/202410/1232840-20241021145542158-552335053.gif
3.2仿照官方示例
# single selection matching the value or label element.selectOption("1"); # single selection matching the label element.selectOption(new SelectOption().setLabel("山东")); # select_name selection for 0, 1 and second option element.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，因为在线的不好找或者不满足要演示的要求。
测试Select 北京-宏哥
快递邮寄地址： 请选择 山西 陕西 山东 四川 河北
请选择
山西
陕西
山东
四川
河北
省_XXX_市_ XXX_街道
4.1.1根据选项名称定位
根据前边的理论知识进行选项名称定位。
4.1.1.1代码设计
https://img2024.cnblogs.com/blog/1232840/202410/1232840-20241021152035719-1676090585.png
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.创建context BrowserContext context = browser.newContext(); //创建page Page page = context.newPage(); //3.浏览器访问demo page.navigate("file:///E:/Desktop/test/select.html"); //4.选项名称定位 Locator select = page.getByLabel("快递邮寄地址："); List 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，就可以看到控制台输出，如下图所示：
https://img2024.cnblogs.com/blog/1232840/202410/1232840-20241021152521921-1812186005.png
2.运行代码后电脑端的浏览器的动作（下拉选择框选择了“山西”）。如下图所示：
https://img2024.cnblogs.com/blog/1232840/202410/1232840-20241021152715109-597202504.gif
4.1.2根据index索引定位
根据前边的理论知识进行index索引定位。
4.1.2.1代码设计
https://img2024.cnblogs.com/blog/1232840/202410/1232840-20241021155842002-1052211115.png
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.创建context BrowserContext context = browser.newContext(); //创建page Page page = context.newPage(); //3.浏览器访问demo page.navigate("file:///E:/Desktop/test/select.html"); //4.根据index索引定位 Locator select = page.getByLabel("快递邮寄地址："); List 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，就可以看到控制台输出，如下图所示：
https://img2024.cnblogs.com/blog/1232840/202410/1232840-20241021161700330-1767265879.png
2.运行代码后电脑端的浏览器的动作（下拉选择框选择index=3，也就是“山东”）。如下图所示：
https://img2024.cnblogs.com/blog/1232840/202410/1232840-20241021161830025-275789072.gif
4.1.3根据label标签定位
根据前边的理论知识进行label标签定位。
4.1.3.1代码设计
https://img2024.cnblogs.com/blog/1232840/202410/1232840-20241021162207381-2091937990.png
4.1.3.2参考代码
（1）select的html元素
测试Select 北京-宏哥
快递邮寄地址： 请选择 山西 陕西 山东 四川 河北
请选择
山西
陕西
山东
四川
河北
省_XXX_市_ XXX_街道
（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.创建context BrowserContext context = browser.newContext(); //创建page Page page = context.newPage(); //3.浏览器访问demo page.navigate("file:///E:/Desktop/test/select.html"); //4.根据label标签定位 Locator select = page.getByLabel("快递邮寄地址："); List 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，就可以看到控制台输出，如下图所示：
https://img2024.cnblogs.com/blog/1232840/202410/1232840-20241021162057899-1034728337.png
2.运行代码后电脑端的浏览器的动作。如下图所示：
https://img2024.cnblogs.com/blog/1232840/202410/1232840-20241021163714943-1718877946.gif
5.小结
好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助。
公众号(关注宏哥) 微信群(扫码进群) 客服微信
https://img2018.cnblogs.com/common/1741949/201911/1741949-20191119095948011-608816619.png https://img2024.cnblogs.com/blog/1232840/202506/1232840-20250610113707419-637869921.png https://img2018.cnblogs.com/common/1741949/201911/1741949-20191106101257091-849954564.png
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]