《刚刚问世》系列初窥篇-JavaPlaywright自动化测试-- 操作单选和多选按钮 - 中篇详细教程大家好欢迎来到《刚刚问世》系列今天我们要深入探讨一个在Web自动化测试中非常基础但又极其重要的知识点如何使用JavaPlaywright操作单选按钮Radio Button和多选按钮Checkbox。如果你觉得单选和多选只是简单的“点击一下”就完事了那可就大错特错了——在实际项目中按钮的状态、联动、回显等细节往往会让新手翻车。别担心这篇教程会带你从原理到实战彻底搞懂它们。### 一、为什么单选和多选按钮需要专门学在HTML中单选按钮通常用input typeradio表示多选按钮用input typecheckbox表示。它们的核心区别是-单选按钮同一组name属性相同只能选一个点击另一个会自动取消前一个。-多选按钮每个独立可以同时选中多个。Playwright作为新一代自动化测试工具提供了非常优雅的API来操作这些元素。但很多初学者容易犯的错误是直接用click()去点击忽略了按钮是否可交互、是否被隐藏、是否已经选中。所以我们不仅要学会“点”还要学会“判断”和“等待”。### 二、环境准备与基础API首先确保你已经在项目中引入了Playwright的Java依赖Maven示例xmldependency groupIdcom.microsoft.playwright/groupId artifactIdplaywright/artifactId version1.40.0/version/dependencyPlaywright操作单选/多选按钮的核心API主要有-locator.check()勾选按钮适用于radio和checkbox。-locator.uncheck()取消勾选仅适用于checkbox。-locator.isChecked()判断按钮是否被选中。-locator.click()直接点击不推荐用于按钮因为可能触发意外行为。### 三、实战操作单选按钮假设我们有这样一个HTML页面位于https://example.com/radio-demohtmlform labelinput typeradio namegender valuemale 男/label labelinput typeradio namegender valuefemale 女/label labelinput typeradio namegender valueother 其他/label/form我们的目标选中“女”这个单选按钮并验证它是否被选中。#### 代码示例1操作单选按钮javaimport com.microsoft.playwright.*;import org.junit.jupiter.api.Test;public class RadioButtonDemo { Test public void testRadioButton() { // 1. 启动浏览器 try (Playwright playwright Playwright.create()) { Browser browser playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false)); Page page browser.newPage(); page.navigate(https://example.com/radio-demo); // 假设的URL // 2. 定位到“女”这个单选按钮根据value属性 Locator femaleRadio page.locator(input[typeradio][valuefemale]); // 3. 先判断当前状态确保初始未被选中 System.out.println(选中前状态 femaleRadio.isChecked()); // 输出 false // 4. 使用check()方法勾选推荐会自动等待元素可交互 femaleRadio.check(); // 5. 验证是否选中 System.out.println(选中后状态 femaleRadio.isChecked()); // 输出 true // 6. 额外验证同组其他按钮是否被取消例如“男” Locator maleRadio page.locator(input[typeradio][valuemale]); System.out.println(男按钮状态 maleRadio.isChecked()); // 输出 false // 等待观察非必须 page.waitForTimeout(2000); browser.close(); } }}注意点- 使用check()而不是click()因为check()会确保元素可见且可交互而click()可能会因为元素被遮挡而失败。- 单选按钮同组互斥的特性由浏览器自动处理我们只需要勾选目标按钮即可。### 四、实战操作多选按钮多选按钮的HTML示例假设URL为https://example.com/checkbox-demohtmlform labelinput typecheckbox namehobby valuereading 阅读/label labelinput typecheckbox namehobby valuemusic 音乐/label labelinput typecheckbox namehobby valuesports 运动/label/form我们要实现先勾选“阅读”和“运动”然后取消“运动”最后验证状态。#### 代码示例2操作多选按钮javaimport com.microsoft.playwright.*;import org.junit.jupiter.api.Test;public class CheckboxDemo { Test public void testCheckbox() { try (Playwright playwright Playwright.create()) { Browser browser playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false)); Page page browser.newPage(); page.navigate(https://example.com/checkbox-demo); // 定位三个多选按钮 Locator readingCheckbox page.locator(input[typecheckbox][valuereading]); Locator musicCheckbox page.locator(input[typecheckbox][valuemusic]); Locator sportsCheckbox page.locator(input[typecheckbox][valuesports]); // 1. 初始状态全部未选中 System.out.println(初始状态); System.out.println(阅读: readingCheckbox.isChecked()); System.out.println(音乐: musicCheckbox.isChecked()); System.out.println(运动: sportsCheckbox.isChecked()); // 2. 勾选“阅读”和“运动” readingCheckbox.check(); sportsCheckbox.check(); System.out.println(\n勾选后状态); System.out.println(阅读: readingCheckbox.isChecked()); // true System.out.println(音乐: musicCheckbox.isChecked()); // false System.out.println(运动: sportsCheckbox.isChecked()); // true // 3. 取消“运动”的勾选 sportsCheckbox.uncheck(); System.out.println(\n取消运动后状态); System.out.println(运动: sportsCheckbox.isChecked()); // false // 4. 批量操作示例一键全选如果需求需要 // 注意这里只是演示思路实际项目可能需要遍历 page.locator(input[typecheckbox][namehobby]).all().forEach(checkbox - { checkbox.check(); }); System.out.println(\n全选后状态); System.out.println(阅读: readingCheckbox.isChecked()); // true System.out.println(音乐: musicCheckbox.isChecked()); // true System.out.println(运动: sportsCheckbox.isChecked()); // true page.waitForTimeout(2000); browser.close(); } }}关键点-uncheck()只对多选按钮有效对单选按钮使用会报错因为单选不能取消勾选。- 批量操作时使用all()方法获取所有匹配的locator列表然后遍历处理。### 五、常见坑与最佳实践1.不要用click()代替check()click()可能触发按钮的额外事件如页面跳转而check()更安全。2.等待元素可见Playwright的check()和uncheck()默认会等待元素可交互但如果你先用了click()记得加等待。3.处理动态加载的按钮如果按钮是异步加载的可以用page.waitForSelector()确保元素存在。4.验证状态每次操作后务必用isChecked()验证避免测试假通过。### 总结通过今天的学习我们掌握了- 单选按钮和多选按钮的本质区别以及Playwright的对应API。- 使用check()和uncheck()安全操作按钮避免click()的陷阱。- 结合isChecked()进行状态验证确保测试的准确性。- 批量操作的技巧和常见注意事项。单选和多选按钮虽然简单但却是自动化测试中频繁出现的元素。熟练运用这些API能让你在编写测试用例时事半功倍。下一篇文章我们将继续深入探讨按钮的联动逻辑和参数化测试敬请期待如果你有任何疑问欢迎在评论区留言我会第一时间回复。别忘了点赞收藏我们下期见