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

原创

北京-宏哥

修改于 2025-02-08 08:05:43

12600

代码可运行

运行总次数：0

代码可运行

1.简介

上一篇宏哥已经介绍了在实际自动化测试过程中，我们遇到下拉框选择的测试，playwright是如何处理的几种方法。今天跟随宏哥来看一下java语言中是如何通过playwright处理下拉选择框的另外的几种方法，给小伙伴或者同学们提供一种思路，仅供参考学习。

2.什么是下拉选择框

下拉选择框（Dropdown）‌是一种常见的表单元素，用于提供用户选择的选项。它允许用户从一个固定的选项列表中选择一个或多个值。下拉选择框通常由一个可点击的文本框和一个下拉箭头组成，当用户点击箭头或文本框时，会展开一个下拉列表，用户可以从中选择一个或多个选项。选择后，选项的值将显示在文本框中‌12。

下拉选择框的基本用法和功能

下拉选择框常用于网页表单中，用于收集用户输入的信息，例如国家、城市、日期等。它提供了用户友好的界面和灵活的选项设置，用户可以从预定义的选项中直接选择，而不需要手动输入数据，这不仅提高了用户的操作效率，还减少了输入错误的可能性‌1。

下拉选择框在不同平台和场景中的应用

‌Web开发‌：在下拉选择框中，用户可以通过点击或输入来展开选项列表，选择后选项的值会显示在文本框中。开发者可以通过设置下拉选择框的属性，如尺寸、颜色等，来满足不同的需求‌1。
‌Excel‌：在Excel中，下拉选择项可以显著提升数据录入的效率和准确性。用户可以通过“数据验证”功能设置下拉选择项，允许用户从预定义的选项中选择，避免了手动输入的繁琐和错误‌3。
‌Vue.js‌：在Vue.js中，下拉框通过内置的<select>标签和<option>标签创建。它节省空间、易于使用且确保用户输入的值在预定义范围内‌4。

下拉选择框的优缺点

‌优点‌：

‌节省空间‌：仅在用户点击时显示选项列表，不占用额外空间‌4。
‌易于使用‌：提供明确的选项，避免用户输入错误‌4。
‌提高效率‌：减少手动输入的时间和错误率‌1。

‌缺点‌：

‌自定义程度有限‌：虽然可以设置外观和选项，但相比其他输入方式，自定义程度较低‌1

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 label

element.selectOption("1");

# single selection matching the label

element.selectOption(label="山东");

# select_name selection for 0, 1 and second option

element.selectOption(value=["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通过page对象直接调用

1.首先宏哥准备一个测试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通过value定位

根据前边的理论知识通过value定位。

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.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-25- 操作Select下拉选择框 - 中篇（详细教程）
 *
 * 2025年02月07日
 */
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.定位
              List<String> option = page.selectOption("#select","3");
              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.运行代码后电脑端的浏览器的动作（下拉框选中value为3的山东）。如下图所示：

4.1.2通过索引定位

根据前边的理论知识通过索引（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.Page;
import com.microsoft.playwright.Playwright;
import com.microsoft.playwright.options.SelectOption;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-25- 操作Select下拉选择框 - 中篇（详细教程）
 *
 * 2025年02月07日
 */
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.定位
              List<String> option = page.selectOption("#select",new SelectOption().setIndex(5));
              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为5的河北）。如下图所示：

4.1.3通过label定位

根据前边的理论知识通过label定位。

4.1.3.1代码设计

4.1.3.2参考代码

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

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.Page;
import com.microsoft.playwright.Playwright;
import com.microsoft.playwright.options.SelectOption;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-25- 操作Select下拉选择框 - 中篇（详细教程）
 *
 * 2025年02月07日
 */
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.定位
              List<String> option = page.selectOption("#select_id",new SelectOption().setLabel("第三"));
              System.out.println(option);
              System.out.println("Test Pass");
              //关闭page
              page.close();
              //关闭browser
              browser.close();
        }
    }
}