Rails Capybara点击含链接label无法勾选复选框问题咨询

问题场景 #

在Capybara驱动的RSpec功能测试中，复选框input为隐藏状态，尝试通过点击关联label完成勾选时，因label内部包含<a>链接标签，执行对应代码均不会成功勾选复选框，反而会触发label内链接的跳转逻辑，但浏览器中手动点击label交互正常：

• ERB生成的视图代码：

<p class="col boolean required user_agree_terms">
  <input name="user[agree_terms]" type="hidden" value="0">
  <input class="boolean required" required="required" aria-required="true" type="checkbox" value="1" name="user[agree_terms]" id="user_agree_terms">
  <label class="boolean required" for="user_agree_terms">
    <abbr title="required">*</abbr>
    J'ai accepté les <a target="_blank" href="https://somelink">Conditions Générales d'Utilisation</a> et la <a target="_blank" href="https://somelink">Politique de Confidentialité</a>
  </label>
</p>

• 原有失效的测试代码：

# 两种写法效果一致，都会触发<a>标签跳转
find('label[for="influencer_agree_terms"]').click
check('influencer[agree_terms]', allow_label_click: true)

问题原因 #

Capybara执行点击操作时默认会命中目标元素的中心点位置，当前label内的链接元素刚好覆盖了默认点击坐标区域，所以实际触发的是链接的点击事件而非label的复选框勾选行为；手动操作时通常不会精准点在链接文字上，因此交互正常。
另外需要先修正选择器错误：测试代码中使用的选择器为influencer_agree_terms，和视图中实际的复选框id、label的for属性值user_agree_terms不匹配，会导致额外的定位异常。

可行解决方案 #

• 直接操作复选框设置选中状态，稳定性最高，不受元素可见性、子元素布局干扰：

# 直接通过id找到复选框设置为选中状态，Capybara会自动处理隐藏元素的交互
find('#user_agree_terms').set(true)

# 如果上述方法因元素隐藏报错，可以通过JS直接设置选中状态
page.execute_script("document.getElementById('user_agree_terms').checked = true")

• 点击label内非链接区域，避开<a>标签的命中范围：

# 点击label开头的必填星号元素，不会触发链接跳转
find('label[for="user_agree_terms"] abbr').click

# 指定点击label的左上角偏移位置，避开链接所在的文本区域
find('label[for="user_agree_terms"]').click(x: 5, y: 5)

• 先阻止链接默认跳转行为，再执行常规勾选操作，适合需要完全模拟用户点击label场景的用例：

# 注入JS阻止label内所有链接的默认跳转行为
page.execute_script(<<~JS)
  document.querySelectorAll('label[for="user_agree_terms"] a').forEach(link => {
    link.addEventListener('click', e => e.preventDefault())
  })
JS
# 后续执行常规check操作即可正常勾选
check('user[agree_terms]', allow_label_click: true)

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