《刚刚问世》系列初窥篇-Java+Playwright自动化测试-29- 操作单选和多选按钮 - 下篇（详细教程）
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.创建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自动化测试-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.创建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自动化测试-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.创建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年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.创建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(); } } }
6.3运行代码
1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：
2.运行代码后电脑端的浏览器的动作（可以看到复选框全部选中，因为默认选中没有点击，也是选中的，如果点击了，就会变成未选中）。如下图所示：
6.小结
今天主要是讲解了如何遍历单选和多选按钮，掌握了其实非常简单主要秘诀就是：要找到其共同属性，然后挨个遍历出来，缺点就是单选只能选中最后一个。多选就全部选中。
好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助。
感谢您花时间阅读此篇文章,如果您觉得这篇文章你学到了东西也是为了犒劳下博主的码字不易不妨打赏一下吧，让博主能喝上一杯咖啡，在此谢过了！
如果您觉得阅读本文对您有帮助，请点一下左下角 “推荐” 按钮，您的 将是我最大的写作动力！另外您也可以选择 【 关注我 】 ，可以很方便找到我！
本文版权归作者和博客园共有，来源网址： https://www.cnblogs.com/du-hong 欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利！
公众号(关注宏哥) 微信群(扫码进群) 客服微信
浙公网安备 33010602011771号