Capybara选择单选按钮不起作用/元素点击被拦截

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

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