当前位置：首页 > news >正文

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

news 2025/9/20 14:59:01

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自动化测试-28- 操作单选和多选按钮 - 中篇（详细教程）** 2025年01月26日*/
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.创建contextBrowserContext context = browser.newContext();//创建pagePage page = context.newPage();//3.浏览器访问demopage.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自动化测试-28- 操作单选和多选按钮 - 中篇（详细教程）** 2025年01月26日*/
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.创建contextBrowserContext context = browser.newContext();//创建pagePage page = context.newPage();//3.浏览器访问demopage.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自动化测试-28- 操作单选和多选按钮 - 中篇（详细教程）** 2025年01月26日*/
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.创建contextBrowserContext context = browser.newContext();//创建pagePage page = context.newPage();//3.浏览器访问demopage.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年01月26日*/
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.创建contextBrowserContext context = browser.newContext();//创建pagePage page = context.newPage();//3.浏览器访问demopage.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();}}
}