digijim
Reputation: 686
Why is RSpec 2.13.0 / Capybara 2.1.0 not able to fill_in a field by it's label text in this test in Rails 4?
First, this test has passed many times already. I've been developing new features today, and for some reason, it now fails.
Here's the pertinent portion of my test spec:
...
describe "when entering a valid prepay access code after signing in" do
before do
sign_in user, subdomain: 'bdsp'
visit public_root_url(subdomain: 'bdsp')
fill_in "code", with: job.code
click_button "Continue"
end
it { should have_selector('h1', text: "My #{job.subject_label}s for #{job.name}") }
describe "adding a sports prepay subject" do
let(:submit) { "Add #{job.subject_label}" }
before do
puts page.html
valid_create_player
end
it "should create a player" do
expect { click_button submit }.to change(PrepaySubject, :count).by(1)
end
...
Note how I'm calling puts page.html right before valid_create_player so I can verify the existence of the input/label I expect.
The pertinent part of my spec\support\utilities.rb file:
def valid_create_player
fill_in 'First name', with: "Foo"
fill_in 'Last name', with: "Bar"
fill_in 'Team', with: "The Foobars"
fill_in 'Coach', with: "Bar Foo"
end
And the results of my test (restricted to the single test for should create a player):
Jims-Mac-mini:msc_rails4_staging jim$ rspec spec/requests/public_pages_spec.rb:103
No DRb server is running. Running in local process instead ...
Run options: include {:locations=>{"./spec/requests/public_pages_spec.rb"=>[103]}}
<!DOCTYPE html>
<html>
<head>
<title>MSC - Staging App | Studio 2's MySmileCentral - Subjects</title>
<link data-turbolinks-track="true" href="/assets/public.css" media="screen" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jm30.css" media="screen" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/print.css" media="print" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application.js"></script>
<script data-turbolinks-track="true" src="/assets/public.js"></script>
<script data-turbolinks-track="true" src="/assets/prepay_subjects.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body data-no-turbolink="true">
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<nav>
<ul class="nav pull-right">
<li><a href="/">Home</a></li>
<li><a href="/help">Help</a></li>
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="/users/1">Profile</a></li>
<li><a href="/users/1/edit">Settings</a></li>
<li class="divider"></li>
<li>
<a data-method="delete" href="/signout" rel="nofollow">Sign out</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container">
<h1>My Players for Job Number 1</h1>
<div class="medium center">
<p><a id="order-instructions-show" data-toggle="collapse" href="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">Toggle ordering instructions</a></p>
<div class="collapse" id="collapseExample">
<h4 style="text-align: left">1. Create a player record for each child being photographed.<br />2. Click the 'Order Pictures' link (next to each player) to make your selection.<br />      <span style="font-size: 80%; line-height: 125%;">NOTE: You can pay for all pictures for all of your players in ONE transaction!<br />      Just click 'My Players' (above) to start ordering for another player.</span><br />3. After adding all the pictures you wish to order, proceed to viewing your cart (by clicking the 'Cart' link above) to complete your transaction.</h4>
</div>
</div>
<h3>You have not added any players yet</h3>
<div id="no-prepay-subjects-bkgd">
<div class="well small center">
<h1>Add a New Player</h1>
<form accept-charset="UTF-8" action="/prepay_subjects" class="form-horizontal" id="new_prepay_subject" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<fieldset>
<input id="job_id" name="prepay_subject[job_id]" type="hidden" value="1" />
<input id="public_user_id" name="prepay_subject[public_user_id]" type="hidden" value="1" />
<div class="control-group">
<label class="control-label" for="prepay_subject_first_name">First name</label>
<div class="controls">
<input id="prepay_subject_first_name" name="prepay_subject[first_name]" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="prepay_subject_last_name">Last name</label>
<div class="controls">
<input id="prepay_subject_last_name" name="prepay_subject[last_name]" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="prepay_subject_Team">Team</label>
<div class="controls">
<input id="prepay_subject_team" name="prepay_subject[team]" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="prepay_subject_Coach">Coach</label>
<div class="controls">
<input id="prepay_subject_coach" name="prepay_subject[coach]" type="text" />
</div>
</div>
<table style="width: 400; margin-left: 100px;">
<tr>
<td style="text-align: left; width: 175px">
<input checked="checked" id="prepay_subject_buddy_false" name="prepay_subject[buddy]" type="radio" value="false" /> Individual/Team
</td>
<td style="text-align: left; width: 225px">
<input id="prepay_subject_buddy_true" name="prepay_subject[buddy]" type="radio" value="true" /> Buddy <br />
</td>
</tr>
<tr>
<td style="text-align: left; width: 175px"></td>
<td style="text-align: left; width: 225px">
<a href="http://assests0_bop_heroku_com.s3.amazonaws.com/images/jm30/whats_a_buddy_shot.png" onclick="window.open(this.href,'create_company', 'height=580, width=630');return false;" title="Click here for more information about buddy photos">What's a buddy shot?</a>
</td>
</tr>
<br />
</table>
<br />
</fieldset>
<input class="btn btn-large btn-primary pull-center" name="commit" type="submit" value="Add Player" />
</form> <div class="clearfix"></div><!-- keeps the submit button properly wrapped in 'well' div -->
</div>
</div>
<footer>
<nav>
<ul>
<li><a href="/about">About</a></li> |
<li><a href="/contact">Contact</a></li> |
<li><a href="http://news.railstutorial.org/">News</a></li>
</ul>
</nav>
<div class="left text-left">
Studio 2<br />
Phone: 123-456-7890<br />
</div>
<div class="right text-right">
Copyright © 2015 Studio 2,<br />All Rights Reserved <br />
Sampletown, US
</div>
</footer>
</div>
</body>
</html>
F
Failures:
1) Public Pages public users home page when entering a valid prepay access code after signing in adding a sports prepay subject should create a player
Failure/Error: valid_create_player
Capybara::ElementNotFound:
Unable to find field "Team"
# ./spec/support/utilities.rb:135:in `valid_create_player'
# ./spec/requests/public_pages_spec.rb:100:in `block (5 levels) in <top (required)>'
Finished in 2.85 seconds
1 example, 1 failure
Failed examples:
rspec ./spec/requests/public_pages_spec.rb:103
I just don't understand how Capybara isn't finding the field for "Team" when it's label clearly says "Team" in the outputted html. Especially since this worked before today - and worked many times. All other tests that use fill_in by the label text still work. Why does Capybara seem to be blind to my "Team" field?
Upvotes: 0
Views: 382
Answers (1)
Peter Alfvin
Reputation: 29419
HTML ids are case sensitive and you've defined the Team label as applying to the id prepay_subject_Team, which does not appear in your page. Only the id prepay_subject_team exists (i.e. lower case t in Team).
If the capitalization in the for attribute of a label element doesn't match the capitalization of the id attribute of it's matching input element, Capybara can't find the input element.
Upvotes: 2
Related Questions
- How does fill_in work in Rspec/Capybara?
- Capybara::ElementNotFound: Can't Find Field
- Error when writing RSpec Test Capybara::ElementNotFound: Unable to find field
- Rails. Capybara fill_in finds text inputs but doesn't fill_in
- Capybara fill_in doesn't work
- Why would Capybara not allow fill_in when find for the same element works?
- Capybara fill_in with xpath
- Capybara fill_in only works with field id, why?
- Capybara error when trying to fill a text_field_tag
- Rspec getting undefined method error when I try to use fill_in on text field