用于 HTML5 输入范围的 Capybara fill_in答案

【问题标题】：Capybara fill_in for HTML5 input range用于 HTML5 输入范围的 Capybara fill_in
【发布时间】：2014-03-03 19:28:58
【问题描述】：

我正在使用新的 HTML5 输入类型 Range 实现一个基本滑块。
不涉及 javascript 或 CSS。

这是一个例子HTML5 input-type Range

它曾经是一个文本框，所以在 Capybara 我只能说

fill_in "rating_scale", with: "57"

现在我需要一种方法来告诉它填充范围或单击并移动范围的拇指。

有人成功过吗？

【问题讨论】：

不一定是个好方法，但您可以直接修改输入的值以假装它正在使用。
如果这最终奏效，您应该将其设置为答案，以便其他人知道如何解决问题。

标签： ruby-on-rails html rspec capybara

【解决方案1】：

这就是我最终做的......

find(:xpath, "//input[@id='rating_scale']").set 57

【讨论】：

如果您需要触发更改事件，则在调用.set(57) 后，再调用.trigger('input')。添加此评论是因为 google 不断提出此线程，我在这里尝试了所有方法，但它从未奏效，因为我正在尝试测试通过更改滑块值触发的操作（例如去抖动保存）。
trigger('input') 对 phantomjs 不起作用，说 未知事件
find(".some-css-class").set(57).trigger('input') 在我的 ReactJS 组件中完美运行。它会导致onChange() 事件监听器实际触发

【解决方案2】：

我假设滑块正在使用 Javascript，因此您需要 Capybara 的驱动程序来与 Javascript 交互，例如 Poltergeist。

【讨论】：

通过DOM api设置输入元素的值不需要js。

【解决方案3】：

这里有一个 capybara 助手，可以根据名称更改输入范围，假设您使用Poltergeist： def range_select(name, value) selector = %-input[type=range][name=\\"#{name}\\"]- script = %-$("#{selector}").val(#{value})- page.execute_script(script) end

【讨论】：

【解决方案4】：

如果您使用 javascript 范围滑块，有一个 monkey-patched drag_by implementation 可以很好地解决此问题（尽管不幸的是它没有设置特定值，只是拖动特定数量）。

【讨论】：