如何使用 Capybara 和 ChromeDriver 在输入字段中模拟输入？答案

【问题标题】：How do I simulate hitting enter in an input field with Capybara and ChromeDriver?如何使用 Capybara 和 ChromeDriver 在输入字段中模拟输入？
【发布时间】：2012-06-07 16:17:12
【问题描述】：

我有以下帮助方法将字符串输入到输入字段并按回车键，但似乎从未按下回车键。我看到输入字段中输入了字符串，但是在按 Enter 时发生的事件从未发生过。

我已经在一个实际的浏览器中测试了 enter 键正确地触发了预期的事件。我不确定我错过了什么。

def fill_and_trigger_enter_keypress(selector, value)
  page.execute_script %Q(
                          var input = $('#{selector}');
                          input.val('#{value}');
                          input.trigger("keypress", [13]);
                         )
end

编辑：

我也尝试了以下方法，但无济于事：

find('#q_name').native.send_keys(:return)
find('#q_name').native.send_keys(:enter)

它们不会导致任何错误，但仍然没有按下回车键。

【问题讨论】：

标签： javascript jquery ruby-on-rails capybara selenium-chromedriver

【解决方案1】：

find('#q_name').native.send_keys(:return)

为我工作。我的字段没有名称或 ID，但类型是输入，所以我使用了类似

find('.myselector_name>input').native.send_keys(:return)

工作得很好！

【讨论】：

作为附加信息，Selinium 不会模拟隐藏元素上的关键事件，而此解决方案即使在隐藏元素上也能正常工作。
@Mysterio Man 此解决方案不适用于 Capybara 2.5。它抛出 NoMethodError: undefined method send_keys' for "5":String` 错误。

【解决方案2】：

现在（Capybara 版本 2.5+）您可以通过以下方式模拟<enter> 键：

find('.selector').set("text\n")

\n（新行）是这里非常重要的部分。

【讨论】：

【解决方案3】：

通常当您运行 page.execute_script 时，您会得到与在页面控制台中运行相同的结果。尝试在控制台中手动运行它，看看是否得到预期的结果。这通常是我所做的.. 在浏览器控制台窗口中制作所需的 js 代码，并在它工作时使用 execute_script 将其粘贴到水豚代码中。

【讨论】：

正在努力。当我执行 $('#input_selector').trigger('keyPress', [13]) 时，我没有收到任何错误，但似乎仍然没有触发，好像我要在浏览器中按 Enter 键一样。
是的，所以您可能需要调整您正在触发的事件。尝试先触发一个焦点事件，模拟你点击输入进入它，然后是keyPress..我发现你通常必须玩正确的事件
这是我为填充自动完成所做的，例如：page.execute_script %Q{$('#{selector}').val('#{value}').focus() .keydown()}
听起来像代码驱动测试...而不是测试驱动代码:)

【解决方案4】：

Capybara 没有对 send_keys 类型事件的原生支持。你也许可以下到 selenium 来做，或者你可以试试这个 gem https://github.com/markgandolfo/send-keys

【讨论】：

太好了，我去看看那个宝石。但是 Capybara 应该不是问题，因为我将 jQuery 直接发送到 selenium，对吧？

【解决方案5】：

对我有用

page.execute_script("$('form.css-class/#form_id').submit()")

【讨论】：

$('form.css-class/#form_id') 不是有效的 jQuery - 运行它会引发错误。
我觉得需要格式化不带斜线，所以$('form.css-class#form_id')

【解决方案6】：

@Page.selector.send_keys :return

这对我有用，其中selector 是页面对象中的元素元素:selector, '<css selector>'

【讨论】：