如何在RSpec中选中不可见radio按钮？解决ElementNotInteractableError

问题场景 #

我编写了如下ERB代码：

<%= form_with model: @car, remote: true do |form| %>
  <%= form.radio_button :color, "red", style: "visibility: hidden" %>
<% end %>

在RSpec场景中尝试点击这个不可见单选按钮时，使用了以下代码：

choose("car[color]", option: "red", visible: :hidden)

但触发了报错：

Selenium::WebDriver::Error::ElementNotInteractableError:
element not interactable
(Session info: headless chrome=116.0.5845.140)

解决办法 #

方法1：通过JavaScript直接设置选中状态

绕过Selenium的交互限制，用JS直接修改单选按钮的checked属性：

page.execute_script("document.querySelector('input[name=\"car[color]\"][value=\"red\"]').checked = true")

方法2：使用Capybara的find + set组合

相对于choose方法，set(true)可以直接修改元素状态，无需模拟用户点击：

find('input[name="car[color]"][value="red"]', visible: :hidden).set(true)

方法3：模拟真实用户交互（推荐）

如果这个隐藏单选按钮对应了可见的<label>（实际场景中用户会点击标签触发选择），优先选择点击标签而非直接操作隐藏按钮。例如ERB代码补充标签后：

<%= form.label :color, "红色", value: "red" %>
<%= form.radio_button :color, "red", style: "visibility: hidden" %>

测试代码可以写成：

click_label("红色")

或者通过标签的for属性定位：

find('label[for="car_color_red"]').click

报错原因说明 #

choose方法即使指定了visible: :hidden，底层仍会尝试模拟真实用户的点击动作，而Selenium会严格限制对visibility: hidden元素的交互（因为真实用户无法直接点击到这类元素）。而JS设置或set(true)是直接修改元素属性，绕过了交互检查。

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