《刚刚问世》系列初窥篇-Java+Playwright自动化测试-29- 操作单选和多选按钮 - 下篇（详细教程）

原创

北京-宏哥

发布于 2025-09-09 16:16:56

710

1.简介

我们可能会遇到一直测试单选和复选按钮的测试场景，如果就十几道选择题，那就手工点击，马上完事，但是如果是让你测试题库呢？那不得那鼠标点击冒烟了，手指点到抽筋了。尤其是做教育类的软件测试，这些就是家常便饭了。因此今天这一篇宏哥主要是讲解一下，如何使用Playwright来遍历单选和多选按钮。让电脑自己点击，让机器干活。大致内容：宏哥在本地弄的一个小demo，然后遍历demo里的单选和多选按钮进行实战。

2.demo准备

2.1demo页面的HTML代码

1.这里宏哥为了省事节约时间就直接用上一篇中那个radio.html。如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试单选</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: 20px 300px 50px 300px;
            text-decoration:none;
            color: white;
        }
        #myAnchor
        {
          text-decoration:none;
          color: white;
        }
        #hg
        {
            margin: 20px 300px 50px 300px;
        }
    </style>
</head>
<body>
    <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>
    <div id="hg">
        <div>
        <h3>复选框 checkbox</h3> 请选择喜欢的打野英雄：<br>
        <label><input name="checkbox1" type="checkbox" value="李白"/>李白 </label><br>
        <label><input name="checkbox2" type="checkbox" value="韩信"/>韩信 </label><br>
        <label><input name="checkbox3" type="checkbox" value="公孙离" checked="checked"/>公孙离 </label><br>
        <label><input name="checkbox4" type="checkbox" value="露娜"/>露娜 </label><br>
        </div>
        <div>
            <h3>单选框 radio</h3> 选择喜欢的打野英雄：<br>
            <label><input name="radio" type="radio" value="0" checked="checked"/>李白 </label><br>
            <label><input name="radio" type="radio" value="1"/>韩信 </label><br>
            <label><input name="radio" type="radio" value="2"/>露娜 </label><br>
            <label><input name="radio" type="radio" value="3"/>孙尚香 </label><br>
        </div>
    </div>
</body>
</html>

2.页面效果，如下图所示：

3.遍历单选框

遍历思路：

1.首先找到所有单选按钮的共同点。

2.使用共同点来定位单选按钮，将其放在变量中List<Locator> radios。

3.利用for循环将其从容其中一一遍历出来，并且挨个点击。

3.1代码设计

根据上边的遍历思路进行代码设计。如下图所示：

3.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自动化测试-29- 操作单选和多选按钮 - 下篇（详细教程）
 *
 * 2025年09月09日
 */
public class Test_Radio {
    
    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:///C:/Users/duhon/Desktop/radio.html");
              //4.定位所有单选按钮
              List<Locator> radios = page.locator("[name='radio']").all();
              //遍历单选按钮
              for(Locator radio:radios){
                  //点击选中单选按钮
                  radio.click(); 
              }
              System.out.println("Test Pass");
              //5.关闭page
              page.close();
              //6.关闭browser
              browser.close();
        }
    }
}

3.3运行代码

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

2.运行代码后电脑端的浏览器的动作（可以看到所有单选按钮，都点了，包括默认选中的）。如下图所示：

4.遍历单选按钮（默认选中不点击）

细心地小伙伴或者童鞋们，可能会发现上边的代码将默认选中的单选按钮，也点击了。那么如何让其不点击呢？加判断呗。

遍历思路：

1.首先找到所有单选按钮的共同点。

2.使用共同点来定位单选按钮，将其放在变量中List<Locator> radios。

3.利用for循环将其从容其中一一遍历出来，并且挨个点击默认不选中的单选按钮。

4.1代码设计

根据上边的遍历思路进行代码设计。如下图所示：

4.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自动化测试-29- 操作单选和多选按钮 - 下篇（详细教程）
 *
 * 2025年09月09日
 */
public class Test_Radio {
    
    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:///C:/Users/duhon/Desktop/radio.html");
              //4.定位所有单选按钮
              List<Locator> radios = page.locator("[name='radio']").all();
              //遍历单选按钮
              for(Locator radio:radios){
                  //判断未选中才点击
                  if(!radio.isChecked()){
                    //点击选中单选按钮
                      radio.click(); 
                  }
              }
              System.out.println("Test Pass");
              //5.关闭page
              page.close();
              //6.关闭browser
              browser.close();
        }
    }
}

4.3运行代码

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

2.运行代码后电脑端的浏览器的动作（可以看到所有单选按钮，都点了，不包括默认选中的）。如下图所示：

5.遍历复选框

遍历思路：

1.首先找到所有复选按钮的共同点。

2.使用共同点来定位复选按钮，将其放在变量中List<Locator> radios。

3.利用for循环将其从容其中一一遍历出来，并且挨个点击。

5.1代码设计

根据上边的遍历思路进行代码设计。如下图所示：

5.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自动化测试-29- 操作单选和多选按钮 - 下篇（详细教程）
 *
 * 2025年09月09日
 */
public class Test_Radio {
    
    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:///C:/Users/duhon/Desktop/radio.html");
              //4.定位所有单选按钮
              List<Locator> checkboxs = page.locator("[type='checkbox']").all();
              //遍历单选按钮
              for(Locator checkbox:checkboxs){
                //点击复选按钮
                  checkbox.click();
              }
              System.out.println("Test Pass");
              //5.关闭page
              page.close();
              //6.关闭browser
              browser.close();
        }
    }
}

5.3运行代码

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

2.运行代码后电脑端的浏览器的动作（可以看到复选框默认选中“公孙离”，之后会因为点击而变成未选中）。如下图所示：

6.遍历复选按钮（默认选中不点击）

遍历思路：

1.首先找到所有复选按钮的共同点。

2.使用共同点来定位复选按钮，将其放在变量中List<Locator> radios。

3.利用for循环将其从容其中一一遍历出来，并且挨个点击默认不选中的单选按钮。

6.1代码设计

根据上边的遍历思路进行代码设计。如下图所示：

6.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自动化测试-28- 操作单选和多选按钮 - 中篇（详细教程）
 *
 * 2025年09月09日
 */
public class Test_Radio {
    
    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:///C:/Users/duhon/Desktop/radio.html");
              //4.定位所有单选按钮
              List<Locator> checkboxs = page.locator("[type='checkbox']").all();
              //遍历单选按钮
              for(Locator checkbox:checkboxs){
                  //判断未选中才点击
                  if(!checkbox.isChecked()){
                    //点击选中单选按钮
                      checkbox.click(); 
                  }
              }
              System.out.println("Test Pass");
              //5.关闭page
              page.close();
              //6.关闭browser
              browser.close();
        }
    }
}