title: Capybara is unable to find a field
body: <p>I have the following form</p>
  
  <pre><code>&lt;%= form_for(@route, :html =&gt; {:class =&gt; "form-horizontal", :role =&gt; 'form'}) do |f| %&gt;
  &lt;%= render 'shared/error_messages', object: f.object %&gt;
  
  &lt;div class="form-group"&gt;
      &lt;input type="text" name="route_origin_input" id="route_origin_input" placeholder="From" onFocus="geolocate(); autocompleteLocation(this,route_origin)" class="form-control" /&gt;
      &lt;%= f.hidden_field :origin, class: "form-control" %&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;input type="text" name="route_destination_input" id="route_destination_input" placeholder="Destination" onFocus="geolocate(); autocompleteLocation(this,route_destination)" class="form-control" /&gt;
      &lt;%= f.hidden_field :destination, class: "form-control" %&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
     &lt;% options = options_from_collection_for_select(@vehicleList, 'vehicle', 'vehicle') %&gt;
     &lt;%= f.select :vehicle,  options, class: "form-control" %&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
     &lt;%= f.date_field :departure_date, class: "form-control" %&gt;
  &lt;/div&gt;
  
  &lt;%= f.submit "Post", class: "btn btn-large btn-primary", id: "route_post" %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>and the following test</p>
  
  <pre><code>require 'spec_helper'
  
  describe "Route pages" do
  
  subject { page }
  
  let(:user) { FactoryGirl.create(:user) }
  before { sign_in user }
  
  describe "route creation" do
      before { 
          visit terminal_path 
      }
  
      describe "with invalid information" do
  
          it "should not create a route" do
              expect { click_button "route_post" }.not_to change(Route, :count)
          end
  
          describe "error messages" do
              before { click_button "route_post" }
              it { should have_danger_message('Not Submitted') }
          end
  
      end
  
      describe "with valid information", :js =&gt; true do 
  
          before do
              fill_in 'route_origin_input', with: "Kimmage, Dublin, Ireland"
  
              fill_in 'route_destination_input', with: "Kimmage, Dublin, Ireland"
  
              fill_in 'route_departure_date', with: Time.now
              select 'Car', :from =&gt; "route_vehicle"
          end
  
          it "should create a route" do
              expect { click_button "route_post" }.to change(Route, :count).by(1)
          end
  
      end
  end
  end
  </code></pre>
  
  <p>For some reason the two text fields that I have added with html cannot be found by capybara </p>
  
  <p>The error I receive is</p>
  
  <blockquote>
    <p>Failure/Error: fill_in 'route_origin_input', with: "Kimmage, Dublin,
    Ireland"
         Capybara::ElementNotFound:
           Unable to find field "route_origin_input"
         # /Users/jeff/.rvm/gems/ruby-2.0.0-p594/gems/capybara-2.4.4/lib/capybara/node/finders.rb:41:in
    <code>block in find'
         # /Users/jeff/.rvm/gems/ruby-2.0.0-p594/gems/capybara-2.4.4/lib/capybara/node/base.rb:84:in
    </code>synchronize'
         # /Users/jeff/.rvm/gems/ruby-2.0.0-p594/gems/capybara-2.4.4/lib/capybara/node/finders.rb:30:in
    <code>find'
         # /Users/jeff/.rvm/gems/ruby-2.0.0-p594/gems/capybara-2.4.4/lib/capybara/node/actions.rb:56:in
    </code>fill_in'
         # /Users/jeff/.rvm/gems/ruby-2.0.0-p594/gems/capybara-2.4.4/lib/capybara/session.rb:676:in
    <code>block (2 levels) in &lt;class:Session&gt;'
         # /Users/jeff/.rvm/gems/ruby-2.0.0-p594/gems/capybara-2.4.4/lib/capybara/dsl.rb:51:in
    </code>block (2 levels) in '
         # ./spec/requests/route_pages_spec.rb:30:in `block (4 levels) in '</p>
  </blockquote>
  
  <p>I've used fill_in in other tests and the only difference I can see is that I have used standard html code in the form. These fields are used to process the info the user enters and then add the result to a hidden field that is part of my model, basically getting the result from Google maps api.</p>
  
  <p><strong>EDIT:</strong>
  Here is the HTML</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;input type="text" name="route_origin_input" id="route_origin_input" placeholder="From" onFocus="geolocate(); autocompleteLocation(this,route_origin)" class="form-control" /&gt;
      &lt;input class="form-control" id="route_origin" name="route[origin]" type="hidden" /&gt;
  &lt;/div&gt;
  </code></pre>