Is there a way to send key presses to Webkit using Capybara? - ruby-on-rails

Question

I need to send some key-presses to a web app in an integration test that uses Capybara and WebKit. Using Selenium (WebDriver and Firefox) I can achieve it like this:
find("#element_id").native.send_keys :tab
but WebKit's native element node doesn't have a send_keys method. Actually native in WebKit returned a string containing a number. Is there another way to send keystrokes to WebKit? Maybe even some workaround using JavaScript/jQuery?

Answer 1

I've been trying to implement Marc's answer without any success, but I found some help from a similar question: capybara: fill in form field value with terminating enter key. And apparently there was a pull request from capybara that seems to address this issue.
What worked for me was:
before { fill_in "some_field_id", with: "\t" }
My example erases the text in the field and then presses Tab. To fill in a field with 'foobar', replace "\t" with "foobar\t". You can also use "\n" for the Enter key.
For your example, you could use:
find("#element_id").set("\t")

Answer 2

This worked for me with Poltergeist, to trigger the asterisk key:
find("body").native.send_key("*")
I had no luck with the other solutions; not even Syn.
This was to trigger an angular-hotkeys event.

Answer 3

You can do it like that:
keypress_script = "var e = $.Event('keydown', { keyCode: #{keycode} }); $('body').trigger(e);"
page.driver.browser.execute_script(keypress_script)

Answer 4

Now since Capybara-webkit 1.9.0 you can send key presses like enter and others using send_keys:
find("textarea#comment").send_keys(:enter)
Source: https://github.com/thoughtbot/capybara-webkit/issues/191#issuecomment-228758761
Capybara API Docs: http://www.rubydoc.info/github/jnicklas/capybara/Capybara%2FNode%2FElement%3Asend_keys

Answer 5

I ended up doing the following:
Capybara.current_driver = Capybara.javascript_driver
keypress_script = "$('input#my_field').val('some string').keydown();"
page.driver.browser.execute_script(keypress_script)
I discovered in Chrome, testing my JavaScript, that actually creating an $.Event with keyCode or charCode and then triggering that on my input field didn't put the characters in the input. I was testing autocompletion which required a few characters be in the input field, and it would start the autocompletion on keydown. So I set the input value manually with val, then trigger keydown to cause the autocompletion script to start.

Answer 6

For simple cases, triggering a keypress event in JS will work:
def press(code)
page.execute_script("$('#my-input').trigger($.Event('keypress', {keyCode: #{code}}))")
end
For a more general and robust answer, use this great library that goes through the trouble of triggering the right events (i.e. keydown, then keypress and finally keyup).
def type(string)
page.execute_script("Syn.click({}, 'my-input').wait().type(#{string.to_json})")
end
A more complex example can be found here

Answer 7

Here is my solution, which works with capybara 2.1.0:
fill_in('token-input-machine_tag_list', :with => 'new tag name')
page.evaluate_script("var e = $.Event('keydown', { keyCode: 13 }); $('#token-input-machine_tag_list').trigger(e);") # Press enter
Please, note, that in new capybara you have to use page.evaluate_script.

Answer 8

For Capybara Webkit, this is the solution I used:
def press_enter(input)
script = "var e = jQuery.Event('keypress');"
script += "e.which = 13;"
script += "$('#{input}').trigger(e);"
page.execute_script(script);
end
Then I use it cleanly in my test like:
press_enter("textarea#comment")