Is there a way to send key presses to Webkit using Capybara?

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?

Solution 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")

Solution 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.

Solution 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)

Solution 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

Solution 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.

View more solutions

Comments

[Rob]

This worked for me. We're actually using the poltergeist driver (PhantomJS) instead of Capybara WebKit, so I had to make a minor change to the 2nd line of code there: page.driver.execute_script(keypress_script)

[rjurado01]

This worked for me, but I should use page.execute_script(keypress_script).

[Philippe Creux]

I confirm that find("#label").set(my_label + "\n") triggers the Enter key.

[Muhammad Hashir Anwaar]

FYI - Poltergeist supports element.native.send_keys(*keys)

[ruby-digger]

Thanks man! Worked for me. I was really suprised of such simple solution!

[DannyB]

Yet another reason to use Poltergeist. It just makes life easier. This worked for me with zero friction.