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

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

大家好，欢迎来到《刚刚问世》系列！今天我们要深入探讨一个在Web自动化测试中非常基础但又极其重要的知识点：如何使用Java+Playwright操作单选按钮（Radio Button）和多选按钮（Checkbox）。如果你觉得单选和多选只是简单的“点击一下”就完事了，那可就大错特错了——在实际项目中，按钮的状态、联动、回显等细节往往会让新手翻车。别担心，这篇教程会带你从原理到实战，彻底搞懂它们。### 一、为什么单选和多选按钮需要专门学？在HTML中，单选按钮通常用<input type="radio">表示，多选按钮用<input type="checkbox">表示。它们的核心区别是：-单选按钮：同一组（name属性相同）只能选一个，点击另一个会自动取消前一个。-多选按钮：每个独立，可以同时选中多个。Playwright作为新一代自动化测试工具，提供了非常优雅的API来操作这些元素。但很多初学者容易犯的错误是：直接用click()去点击，忽略了按钮是否可交互、是否被隐藏、是否已经选中。所以，我们不仅要学会“点”，还要学会“判断”和“等待”。### 二、环境准备与基础API首先，确保你已经在项目中引入了Playwright的Java依赖（Maven示例）：xml<dependency> <groupId>com.microsoft.playwright</groupId> <artifactId>playwright</artifactId> <version>1.40.0</version></dependency>Playwright操作单选/多选按钮的核心API主要有：-locator.check()：勾选按钮（适用于radio和checkbox）。-locator.uncheck()：取消勾选（仅适用于checkbox）。-locator.isChecked()：判断按钮是否被选中。-locator.click()：直接点击（不推荐用于按钮，因为可能触发意外行为）。### 三、实战：操作单选按钮假设我们有这样一个HTML页面（位于https://example.com/radio-demo）：html<form> <label><input type="radio" name="gender" value="male"> 男</label> <label><input type="radio" name="gender" value="female"> 女</label> <label><input type="radio" name="gender" value="other"> 其他</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[type='radio'][value='female']"); // 3. 先判断当前状态（确保初始未被选中） System.out.println("选中前状态：" + femaleRadio.isChecked()); // 输出 false // 4. 使用check()方法勾选（推荐，会自动等待元素可交互） femaleRadio.check(); // 5. 验证是否选中 System.out.println("选中后状态：" + femaleRadio.isChecked()); // 输出 true // 6. 额外验证：同组其他按钮是否被取消（例如“男”） Locator maleRadio = page.locator("input[type='radio'][value='male']"); System.out.println("男按钮状态：" + maleRadio.isChecked()); // 输出 false // 等待观察（非必须） page.waitForTimeout(2000); browser.close(); } }}注意点：- 使用check()而不是click()，因为check()会确保元素可见且可交互，而click()可能会因为元素被遮挡而失败。- 单选按钮同组互斥的特性由浏览器自动处理，我们只需要勾选目标按钮即可。### 四、实战：操作多选按钮多选按钮的HTML示例（假设URL为https://example.com/checkbox-demo）：html<form> <label><input type="checkbox" name="hobby" value="reading"> 阅读</label> <label><input type="checkbox" name="hobby" value="music"> 音乐</label> <label><input type="checkbox" name="hobby" value="sports"> 运动</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[type='checkbox'][value='reading']"); Locator musicCheckbox = page.locator("input[type='checkbox'][value='music']"); Locator sportsCheckbox = page.locator("input[type='checkbox'][value='sports']"); // 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[type='checkbox'][name='hobby']").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，能让你在编写测试用例时事半功倍。下一篇文章，我们将继续深入，探讨按钮的联动逻辑和参数化测试，敬请期待！如果你有任何疑问，欢迎在评论区留言，我会第一时间回复。别忘了点赞收藏，我们下期见！