如何在不依赖实现细节的情况下点击Selenium中隐藏底层输入的样式化单选框

使用antd实现的单选按钮，底层input元素处于隐藏状态（保留以满足可访问性要求），需要在Selenium中点击该单选按钮，但不想依赖ant-radio这类UI库的类名或DOM层级结构，避免测试用例因前端实现变更而失效。

通过data-test-id选中隐藏的input元素后无法执行点击操作，因为Selenium的elementToBeClickable条件要求元素可见，且不想通过JavaScript强制触发点击。

当前自动化代码：

ExpectedConditions::elementToBeClickable.apply(
  By.cssSelector("[data-test-id='my-input']")
)
  .apply(driver)
  .click();

对应的单选按钮核心实现：

HTML结构

<div class="box">
  <h1>Click the radio button</h1>
  <label id="wrapper" class="ant-radio-wrapper">
    <span class="ant-radio ant-wave-target">
      <input type="radio" class="ant-radio-input" data-test-id="my-input">
      <span class="ant-radio-inner"></span>   
    </span>
  </label>
</div>

交互逻辑（JS）

const wrapper = document.querySelector('.ant-radio-wrapper');
const radioButton = document.querySelector('.ant-radio');
const underlyingInput = document.querySelector('input');

wrapper.addEventListener("click", (e) => {
  radioButton.classList.toggle("ant-radio-checked");
  const shouldBeChecked = radioButton.classList.contains('ant-radio-checked');
  underlyingInput.checked = shouldBeChecked;
});

关键样式（CSS）

.ant-radio-wrapper {
  cursor: pointer;
}
.ant-radio-wrapper .ant-radio-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
  opacity: 0; /* 元素隐藏 */
}

核心思路是点击用户实际可见、可交互的容器元素，而非隐藏的input，同时通过data-test-id关联目标，不依赖UI库的实现细节。

方案1：通过input关联可见点击容器 #

先通过data-test-id找到隐藏的input，再定位到它的外层可见可点击容器（比如label），点击该容器：

// 方式1：通过XPath定位祖先容器
WebElement input = driver.findElement(By.cssSelector("[data-test-id='my-input']"));
WebElement clickableContainer = input.findElement(By.xpath("./ancestor::label[1]"));
new WebDriverWait(driver, Duration.ofSeconds(10))
  .until(ExpectedConditions.elementToBeClickable(clickableContainer))
  .click();

// 方式2：使用CSS :has选择器（需Chrome 101+支持）
By clickableSelector = By.cssSelector("label:has([data-test-id='my-input'])");
new WebDriverWait(driver, Duration.ofSeconds(10))
  .until(ExpectedConditions.elementToBeClickable(clickableSelector))
  .click();

方案2：给可见容器添加专属data-test-id #

如果有权限修改前端代码，直接给用户实际点击的容器（比如外层label）添加独立的data-test-id，这是最稳定的方案：
修改后的HTML：

<label id="wrapper" class="ant-radio-wrapper" data-test-id="radio-click-container">
  <span class="ant-radio ant-wave-target">
    <input type="radio" class="ant-radio-input" data-test-id="my-input">
    <span class="ant-radio-inner"></span>   
  </span>
</label>

测试代码：

new WebDriverWait(driver, Duration.ofSeconds(10))
  .until(ExpectedConditions.elementToBeClickable(By.cssSelector("[data-test-id='radio-click-container']")))
  .click();

这种方式完全脱离antd的DOM结构依赖，即使前端更新UI库实现，只要data-test-id保留，测试用例就不会失效。

为什么不直接操作隐藏input？ #

Selenium的elementToBeClickable条件要求元素同时满足：

• 存在于DOM中
• 可见（opacity:0、display:none等状态会判定为不可见）
• 无遮挡可交互

隐藏的input不满足可见性要求，因此无法通过该条件；而用JavaScript强制点击虽然能生效，但不符合用户真实操作路径，测试用例的参考价值会降低。

内容的提问来源于stack exchange，提问作者Raz Luvaton