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

《刚刚问世》系列初窥篇-JavaPlaywright自动化测试-- 操作单选和多选按钮 - 下篇详细教程前言在上一篇文章中我们初步了解了如何使用 Java Playwright 进行单选和多选按钮的基本操作。今天我们将深入探讨更复杂的场景动态加载的单选按钮、联动选择、多选按钮的全选/反选以及如何处理非原生自定义样式的按钮。这些技巧在实际项目中非常实用能帮你应对大部分前端交互挑战。## 准备工作环境与依赖确保你的项目中已经导入 Playwright 的 Java 依赖Maven示例xmldependency groupIdcom.microsoft.playwright/groupId artifactIdplaywright/artifactId version1.40.0/version/dependency同时建议使用最新版本的浏览器驱动Playwright 会自动管理。## 技巧一操作动态加载的单选按钮很多现代应用如 React、Vue的单选按钮是在用户交互后才渲染的。例如一个“选择支付方式”的弹窗需要点击触发后才出现。### 场景模拟假设有一个【立即支付】按钮点击后出现一组选项微信支付、支付宝、银行卡。### 核心代码示例Javajavaimport com.microsoft.playwright.*;import org.junit.jupiter.api.*;public class DynamicRadioTest { static Playwright playwright; static Browser browser; static Page page; BeforeAll static void setup() { playwright Playwright.create(); browser playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false)); page browser.newPage(); page.navigate(https://example.com/payment); // 假设的测试页面 } Test void testDynamicRadio() { // 1. 点击触发按钮让单选按钮组出现 page.click(button#showPaymentOptions); // 2. 等待单选按钮渲染完成使用定位器等待 page.waitForSelector(input[namepayment][typeradio], new Page.WaitForSelectorOptions() .setTimeout(5000)); // 最多等5秒 // 3. 选择第二个选项支付宝 // 使用 nth() 定位第二个 radio page.locator(input[namepayment][typeradio]).nth(1).check(); // 4. 断言验证支付宝被选中 boolean isAlipayChecked page.locator(input[valuealipay]).isChecked(); Assertions.assertTrue(isAlipayChecked, 支付宝应该被选中); System.out.println(✅ 动态单选按钮操作成功); } AfterAll static void tearDown() { browser.close(); playwright.close(); }}注释解析-waitForSelector确保动态元素加载完成。-nth(1)选取第二个 radio索引从0开始。-isChecked()验证是否被选中返回布尔值。## 技巧二联动单选与多选在实际业务中经常遇到“如果选了某个选项就禁用其他选项”的逻辑。例如选择“学生”身份后学历选项自动禁用“博士”。### 场景模拟一个表单包含身份选择单选学生/职工和学历选择多选本科/硕士/博士。当身份为“学生”时学历中的“博士”不可选。### 代码示例javaTestvoid testCascadingSelection() { // 1. 选择身份为“学生” page.locator(label:has-text(学生)).click(); // 假设 radio 被 label 包裹 // 2. 等待联动效果生效通常需要短暂延迟或用 waitForFunction page.waitForFunction(!document.querySelector(input[value\博士\]).disabled); // 3. 尝试验证“博士”是否被禁用 Locator phdCheckbox page.locator(input[value博士]); boolean isDisabled phdCheckbox.isDisabled(); Assertions.assertTrue(isDisabled, 博士选项应该被禁用); // 4. 切换身份为“职工” page.locator(label:has-text(职工)).click(); // 5. 等待状态恢复 page.waitForFunction(!document.querySelector(input[value\博士\]).disabled); // 6. 现在博士应该可用选中它 phdCheckbox.check(); Assertions.assertTrue(phdCheckbox.isChecked(), 博士应该被选中); System.out.println(✅ 联动逻辑验证通过);}要点说明-waitForFunction用于等待 JavaScript 条件满足这里是等待disabled属性变化。- 使用label:has-text()选择器更贴近用户视角也避免直接依赖id或name。## 技巧三多选按钮的全选、反选与批量操作很多列表页会提供“全选/反选”功能例如购物车、权限管理。我们需要模拟用户点击全选、验证所有子项被选中再取消全选。### 高效批量操作代码javaTestvoid testSelectAllAndDeselectAll() { // 假设页面有5个多选框id 从 item1 到 item5以及一个全选框 idselectAll // 1. 点击全选 page.check(#selectAll); // 2. 验证所有子项都被选中 for (int i 1; i 5; i) { Locator item page.locator(#item i); Assertions.assertTrue(item.isChecked(), 项目 i 应该被选中); } // 3. 取消其中一个子项模拟用户手动取消 page.uncheck(#item3); // 4. 验证全选框状态变为未选中 boolean isAllChecked page.locator(#selectAll).isChecked(); Assertions.assertFalse(isAllChecked, 取消子项后全选框应取消); // 5. 重新选中所有子项 page.locator(input[typecheckbox]).check(); // 批量选中所有 checkbox // 6. 验证全选框又变回选中 isAllChecked page.locator(#selectAll).isChecked(); Assertions.assertTrue(isAllChecked, 所有子项选中后全选框应选中); System.out.println(✅ 全选/反选逻辑完美运行);}关键点- 使用check()和uncheck()方法直接操作比click()更明确。- 批量操作时page.locator(input[typecheckbox]).check()会选中页面上所有 checkbox谨慎使用建议加范围限制。- 注意业务逻辑全选通常需要监听子项的变化Playwright 的isChecked()可以实时反映状态。## 技巧四处理自定义样式的按钮有些项目使用 div、span 或第三方库如 Material-UI模拟单选/多选这些元素不是原生input标签无法直接使用check()方法。此时需要模拟点击并验证 CSS 类的变化。### 实战代码javaTestvoid testCustomRadioButton() { // 假设页面使用 div 模拟单选按钮选中时添加 classselected // div classradio-option>