Capybara can find but not fill_in

Question

I am having some very strange behaviour with Capybara. It stubbornly refuses to fill in the fields of my login form.

<fieldset>
  <div class="clearfix">
    <label for="user_email">E-Mail Adresse</label>
    <div class="input">
      <input id="user_email" name="user[email]" size="30" type="email" value="">
    </div>
  </div>

  <div class="clearfix">
    <label for="user_password">Passwort</label>
    <div class="input">
      <input id="user_password" name="user[password]" size="30" type="password" value="">
    </div>
  </div>

  <div class="clearfix">
    <div class="input">
      <input name="user[remember_me]" type="hidden" value="0">
      <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
      <label for="user_remember_me">angemeldet bleiben</label>
    </div>
  </div>
</fieldset>

And here is where the fun begins:

within("#login_form"){ find("#user_email")}                                              
=> #<Capybara::Element tag="input" path="/html/body/div[2]/div[@id='content']/div/div[1]/form[@id='login_form']/fieldset/div[1]/div/input[@id='user_email']">
within("#login_form"){ fill_in("#user_email", with: "[email protected]")}                  
Capybara::ElementNotFound: Unable to find field "#user_email"

I don't quite understand how it is possible to be able to find, and yet not find, an element. Another pair of eyes on this would be appreciated.

Answer 1

The locator for find and fill_in are different:

• find - When the first parameter is not a symbol, it is assumed to be the Capybara.default_selector - ie a css-selector or xpath.
• fill_in - The first parameter is the field's name, id or label text.

The string "#user_email" represents a css-selector. This is why it works in find but not fill_in.

For fill_in to work, you need to just pass in the id value - ie just "user_email".

within("#login_form"){ fill_in("user_email", with: "[email protected]")}  

Answer 2

you can do find("#user_email").set "[email protected]". See answer https://stackoverflow.com/a/8544650/3163914

Answer 3

if it is an autocomplete field, you can use this:

  def fill_in_autocomplete(id, value)
    page.execute_script("document.getElementById('#{id}').setAttribute('value', '#{value}');")
  end