如何使用Capybara和ChromeDriver模拟在输入框中按下回车键？

Question

我有一个帮助方法，可以将字符串输入到输入字段并按下回车键，但似乎回车键从未被按下。 我看到字符串输入到了输入字段中，但是按下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)

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

- Eric M.

Answer 1

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

可以用这个方法。我的字段没有名称或ID，但类型是输入，所以我使用了类似下面的代码：

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

运行得非常好！

- Mysterio Man

---

作为额外的信息，Selinium不会模拟对隐藏元素的按键事件，而这个解决方案即使在隐藏元素上也能正常工作。 - RajaRaviVarma

@Mysterio Man，这个解决方案在使用Capybara 2.5时无法正常工作。它会抛出NoMethodError：undefined method 'send_keys' for "5": String错误。 - Rahul Roy

Answer 2

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

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

\n（换行符）是非常重要的部分。

- Paweł Gościcki

Answer 3

通常情况下，当您运行page.execute_script时，您将获得与在页面控制台中运行相同的结果。尝试在控制台手动运行该代码并查看是否获得了预期结果。这通常是我所做的...在浏览器控制台窗口中编写所需的JavaScript代码，并在其正常工作时将其粘贴到capybara代码中，使用execute_script函数。

- Felipe Lima

---

正在处理。当我执行$('#input_selector').trigger('keyPress', [13])时，我不会收到任何错误，但仍然似乎没有触发任何操作，就好像在浏览器上按下回车键一样。 - Eric M.

是的，你可能需要调整你正在触发的事件。首先尝试触发一个焦点事件，模拟你点击输入框以进入它，然后再进行按键事件。我发现通常需要玩弄正确的事件。 - Felipe Lima

这是我用来填充自动完成的代码，例如：page.execute_script %Q{$('#{selector}').val('#{value}').focus().keydown()} - Felipe Lima

听起来像是基于代码的测试...而不是测试驱动的代码 :) - lacostenycoder

Answer 4

Capybara没有本地支持send_keys类型事件的功能。您可以尝试使用Selenium，或者尝试使用这个gem https://github.com/markgandolfo/send-keys

- DVG

---

好的，我会查看那个 gem。但是 Capybara 不应该是问题，因为我直接将 jQuery 发送到 selenium，对吧？ - Eric M.

Answer 5

它对我有效

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

- Mary Dear

---

$('form.css-class/#form_id') 不是有效的 jQuery 代码 - 运行它会抛出一个错误。 - GMA

我认为它需要去掉斜杠进行格式化，因此 $('form.css-class#form_id')。 - foomip

Answer 6

@Page.selector.send_keys :return

这对我来说是有效的，其中selector是您页面对象中的元素 元素:selector，'<css选择器>'

- Murali K

Answer 7

像往常一样使用fill_in，但将换行符"\n"附加到with:值。 with:值必须用双引号而不是单引号括起来。这将触发表单提交：

fill_in "q_name", with: "hello world\n"

- Eliot Sykes