为什么 RSpec 2.13.0 / Capybara 2.1.0 在 Rails 4 中的测试中无法通过标签文本 fill_in 字段？
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?
首先，这个测试已经通过了很多次了。我今天一直在开发新功能，但由于某种原因，现在失败了。
这是我的测试规范的相关部分：
...
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
...
请注意我是如何在 valid_create_player 之前调用 puts page.html 的，这样我就可以验证我期望的 input/label 是否存在。
我的 spec\support\utilities.rb 文件的相关部分：
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
以及我的测试结果（限于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
我只是不明白 Capybara 怎么找不到 "Team" 的字段，而它的标签在输出的 html 中清楚地写着 "Team"。特别是因为这在今天之前有效 - 并且工作了很多次。标签文本使用 fill_in 的所有其他测试仍然有效。为什么水豚似乎对我的 "Team" 领域视而不见？
HTML ID 区分大小写，并且您已将 Team 标签定义为应用于未出现在您的页面中的 ID prepay_subject_Team。只有 id prepay_subject_team 存在（即 Team 中的小写 t）。
如果标签元素的 for 属性中的大写与其匹配输入元素的 id 属性中的大写不匹配，Capybara 无法找到输入元素。
首先，这个测试已经通过了很多次了。我今天一直在开发新功能，但由于某种原因，现在失败了。
这是我的测试规范的相关部分：
...
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
...
请注意我是如何在 valid_create_player 之前调用 puts page.html 的，这样我就可以验证我期望的 input/label 是否存在。
我的 spec\support\utilities.rb 文件的相关部分：
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
以及我的测试结果（限于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
我只是不明白 Capybara 怎么找不到 "Team" 的字段，而它的标签在输出的 html 中清楚地写着 "Team"。特别是因为这在今天之前有效 - 并且工作了很多次。标签文本使用 fill_in 的所有其他测试仍然有效。为什么水豚似乎对我的 "Team" 领域视而不见？
HTML ID 区分大小写，并且您已将 Team 标签定义为应用于未出现在您的页面中的 ID prepay_subject_Team。只有 id prepay_subject_team 存在（即 Team 中的小写 t）。
如果标签元素的 for 属性中的大写与其匹配输入元素的 id 属性中的大写不匹配，Capybara 无法找到输入元素。