《刚刚问世》系列初窥篇-Java+Playwright自动化测试-26-
1.简介上一篇中宏哥主要讲解和分享了一下，我们常见或者传统的select下拉框的操作，但是近几年又出现了了一种新的select下拉框，其和我们传统的select下拉框完全不一样，那么我们如何使用playwright对其进行定位操作了。宏哥今天就来讲解和分享一下仅供大家参考，不喜勿喷。
2.新的select
宏哥发现随着技术的更新换代，现在好多下拉选择都很少用以前那种的方式，而是采用一种类似pop弹出的效果，直接弹出一个一个页面选择，如下图所示：
12306网站：
快递：
3.1操作select选择框
3.1.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.牛刀小试
宏哥这里就宏哥这里就以12306网站为例查询北京到上海的列车信息。给小伙伴们或者童鞋们来打个样。但是实际操作中发现利用select操作的方法有点繁琐，还是用常规方法非常简单。
具体步骤：
1.首先访问12306网站。
2.定位到出发地，点击，弹出选项，定位要选择的选项，点击即可。
3.定位到到达地，点击，弹出选项，定位要选择的选项，点击即可。
4.日期默认查询当天的，宏哥这里不定位，后期会专门讲解定位日期控件的。
5.点击查询按钮，查询车次信息。
4.1代码设计
4.2参考代码
package com.bjhg.playwright; import com.microsoft.playwright.Browser; import com.microsoft.playwright.BrowserContext; import com.microsoft.playwright.BrowserType; import com.microsoft.playwright.Page; import com.microsoft.playwright.Playwright; /** * @author 北京-宏哥 * * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货） * * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-25- 操作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("https://www.12306.cn"); //4.定位出发地 page.locator("#fromStationText").click(); page.locator("ul").locator("").click(); //5.定位到达地 page.locator("#toStationText").click(); page.locator("ul").locator("").click(); //6.定位查询按钮 page.locator("#search_one").click(); //System.out.println(option); System.out.println("Test Pass"); //关闭page page.close(); //关闭browser browser.close(); } } }
4.3运行代码
1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：
2.运行代码后电脑端的浏览器的动作。如下图所示：
5.小结
今天分享这种新的select下拉选择和传统的select下拉不同，因此用Playwright提供的处理方法就会有问题也比较复杂，因此宏哥在处理时候，没有用其提供的处理方法，反而用常规的处理方法非常简单。所以在实际工作中我们要灵活的运用各种方法，不要一味地死搬硬套、要懂得变通。好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助。当然了，有兴趣地可以参考宏哥的文章，自己实践一下那个快递的下拉选择框。
公众号(关注宏哥) 微信群(扫码进群) 客服微信
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 喜欢鼓捣这些软件，现在用得少，谢谢分享！
页:
[1]