前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >《刚刚问世》系列初窥篇-Java+Playwright自动化测试-26- 操作Select下拉选择框 - 下篇(详细教程)

《刚刚问世》系列初窥篇-Java+Playwright自动化测试-26- 操作Select下拉选择框 - 下篇(详细教程)

原创
作者头像
北京-宏哥
发布2025-02-08 13:48:12
发布2025-02-08 13:48:12
11400
代码可运行
举报
运行总次数:0
代码可运行

1.简介

上一篇中宏哥主要讲解和分享了一下,我们常见或者传统的select下拉框的操作,处理起来非常简单,但是近几年随着技术的进步以及对网站的性能要求的提高,随之又出现了了一种新的操作类似select下拉框,其和我们传统的select下拉框完全不一样,那么我们如何使用playwright对其进行定位操作了。宏哥今天就来讲解和分享一下仅供大家参考,不喜勿喷。

2.新的select

宏哥发现随着技术的更新换代,现在好多下拉选择都很少用以前那种的方式,而是采用一种类似pop弹出的效果,直接弹出一个一个页面选择,如下图所示:

12306网站:

快递:

2.1操作select选择框

2.1.1语法

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

代码语言:javascript
代码运行次数:0
复制
page.selectOption(selector,value);        # 通过value选择
page.selectOption(selector,index);        # 通过index选择
page.selectOption(selector,label);        # 通过label选择

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

第一种通过value选择,顾名思义,可以通过我们的选择框的value元素进行选择

第二种通过index选择,意思是我们可以通过下标来选择

第三种通过label选择,意思是我们可以通过选项值来选择

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

代码语言:javascript
代码运行次数:0
复制
select = page.getByLabel("选择:");
select.selectOption(new SelectOption().setLabel("forth"));

3.牛刀小试

宏哥这里就宏哥这里就以12306网站为例查询北京到上海的列车信息。给小伙伴们或者童鞋们来打个样。但是实际操作中发现利用select操作的方法有点繁琐,还是用常规方法非常简单。

具体步骤: 1.首先访问12306网站。

2.定位到出发地,点击,弹出选项,定位要选择的选项,点击即可。

3.定位到到达地,点击,弹出选项,定位要选择的选项,点击即可。

4.日期默认查询当天的,宏哥这里不定位,后期会专门讲解定位日期控件的。

5.点击查询按钮,查询车次信息。

3.1代码设计

3.2参考代码

代码语言:javascript
代码运行次数:0
复制
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下拉选择框 - 中篇(详细教程)
 *
 * 2025年02月08日
 */
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("[data='BJP']").click();
              //5.定位到达地
              page.locator("#toStationText").click();
              page.locator("ul").locator("[data='SHH']").click();
              //6.定位查询按钮
              page.locator("#search_one").click();
              //System.out.println(option);
              System.out.println("Test Pass");
              //关闭page
              page.close();
              //关闭browser
              browser.close();
        }
    }
}

3.3运行代码

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

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

4.小结

 今天分享这种新的select下拉选择和传统的select下拉不同,因此用Playwright提供的处理方法就会有问题也比较复杂,因此宏哥在处理时候,没有用其提供的处理方法,反而用常规的处理方法非常简单。所以在实际工作中我们要灵活的运用各种方法,不要一味地死搬硬套、要懂得变通。好了,今天时间也不早了,宏哥就讲解和分享到这里,感谢您耐心的阅读,希望对您有所帮助。当然了,有兴趣地可以参考宏哥的文章,自己实践一下那个快递的下拉选择框。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.简介
  • 2.新的select
    • 2.1操作select选择框
      • 2.1.1语法
  • 3.牛刀小试
    • 3.1代码设计
    • 3.2参考代码
    • 3.3运行代码
  • 4.小结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档