Unable to fill in input field using capybara-webkit

Question

I have javascript feature specs that are working fine with selenium, but I'd like to switch to capybara-webkit for a number of reasons (CI, not popping up a browser window, etc).

I'm trying to switch over from selenium, but something is preventing my code from working correctly. I have the following helper:

def capybara_login(user)
  visit login_path
  fill_in "email", with: user.email
  fill_in "password", with: user.password
  click_button "Log in"
end

Here's my input field that is being outputted:

<input type="email" name="email" id="email" value="" class="form-control" placeholder="you@domain.com" autocomplete="off">

I've tested that user.email is not nil. For some reason when I use capybara-webkit, this fails and nothing is filled in (I'm checking by doing a save_and_open_page). However, this code works fine if I use regular capybara(non js) or selenium for js.

Am I missing something? Any ideas as to what could be preventing capybara webkit from filling in these fields?

EDIT: Thank you Tom for helping out. So save and open page will not show any input in those fields.

I was able to use save_and_open_screenshot to see that the page was actually just stuck on the loading image on the login screen. If I do a "sleep(1)" it logs in just fine.

Wondering what strategies people use to deal with this...waiting until the page loads to continue? Whats the reasoning behind not having Capybara do this by default? Or am I doing it wrong?

Answer 1

Capybara has no way of knowing when a page is "fully" loaded, since many pages will load asynchronously, dynamically as needed, etc. In fact Capybara is showing you an issue with your pages usability since a user could technically interact with elements before they're actually usable - in this case Capybara is probably quicker than any user could be, but still... Because of this you need to determine what the widgets you're using do on the page and what changes they make - For instance does a class get set on the body element when a library has finished processing the page, does an input field have a class/attribute added when it's been augmented, etc. Once you've determined that you can tell Capybara to do something like

expect(page).to have_selector('body.class_added_when_ready')

to make sure the page is fully interactable