水豚选择单选按钮不起作用/元素点击被截获

Question

我无法 rspec/capybara 单击我的单选按钮。 SO上有很多类似的问题，但是找不到适合我的答案。

我的 HTML/CSS 直接来自 Bootstrap 网站：

<div class="form-group mb-3">
  <input autocomplete="off" checked="" class="btn-check" id="option1" name="options" type="radio">
  <label class="btn btn-secondary" for="option1">Vertrek</label>
  <input autocomplete="off" class="btn-check" id="option2" name="options" type="radio">
  <label class="btn btn-secondary" for="option2">Aankomst</label></div>

测试代码（迭代#25 ;-( 是

Capybara.default_driver = :selenium
visit "/route_goals/new"
element = page.find("#option1")
element.set(true)

（我也试过element.choose，结果一样）

我收到此错误消息：

   element click intercepted: Element <input autocomplete="off" checked="" class="btn-check" id="option1" name="options" type="radio"> is not clickable at point (295, 272). Other element would receive the click: <label class="btn btn-secondary" for="option1">...</label>

如果我理解正确，它表示标签拦截了单选按钮的点击。

Answer 1

你是不是刚好运行Capybara.ignore_hidden_elements设置为false？如果你是 - 不要。它会让这里发生的事情变得更加清楚。

如果您查看在浏览器控制台中呈现的实际页面，您可能会发现实际的单选输入元素被隐藏并出于样式原因替换为图像，或者标签元素被展开以覆盖无线电输入元素（同样出于样式原因）。这意味着用户永远无法真正点击输入元素，因此 Capybara 也不能。相反，您可以告诉 choose 通过类似

的方式点击标签

choose('option1', allow_label_click: true)

这将在可能的情况下单击复选框，否则单击关联的标签（也可以是 choose('Vertrek', allow_label_click: true) 等）

另一种选择是通过类似

的方式直接点击标签

find(:label, for: 'option1').click

或

find(:label, 'Vertrek').click

请注意，无论单选按钮是否已被选中，标签点击都会点击 - 选择只有在尚未被选中时才会点击

水豚选择单选按钮不起作用/元素点击被截获

Capybara Choose radio button not working / element click intercepted

rspec

radio-button

capybara