水豚找不到字段

Question

你好，我正在做我的第一次測試，我需要你的幫助。我正在使用Rails5。

問題是因爲嵌套領域我相信......（用蠶繭寶石）

水豚返回此錯誤：

Capybara::ElementNotFound: Unable to find field "event_participants_attributes_1489697584487_first_name"

我的HTML看起來像這樣：

<div class="nested-fields"> 
    <div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_1489697584487_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][1489697584487][first_name]" id="event_participants_attributes_1489697584487_first_name" data-com.agilebits.onepassword.user-edited="yes"></div> 
    <div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_1489697584487_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][1489697584487][salary]" id="event_participants_attributes_1489697584487_salary"></div> 
    <div class="links"> 
    <input type="hidden" name="event[participants_attributes][1489697584487][_destroy]" id="event_participants_attributes_1489697584487__destroy" value="false"><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a> 
    </div> 
</div> 

這裏是我的功能/事件/ create_event.spec.rb

require 'spec_helper' 
require 'rails_helper' 

describe "Creating an event" do 
    it "redirects on result page on success" do 
    visit "/" 
    click_link "Create a new event" 
    expect(page).to have_content('Wanna share fair?') 

    fill_in :name, with: 'Rent a plane' 
    fill_in "What is the total price", with: 200 
    click_link "Add a participant" 


    fill_in "event_participants_attributes_1489697584487_first_name", with: "John" 
enter code here 
    fill_in ":event_participants_attributes_1489697584487_salary", with: 2300 

    click_button "See result" 


    expect(page).to have_content('Your salary together:') 
end 
end 

這裏是我的simple_forms：

_form.html.erb

<%= simple_form_for @event do |f| %> 
     <div class="col-xs-12 col-md-10 col-md-offset-1"> 
     <h1>Wanna share fair?</h1> 
     <p>Create an event, enter the bill to share.</p> 

     <%= f.input :name, label: "Event's name" %> 

     <%= f.input :total_price, label: "What is the total price" %> 

     <p>Add the participants.</p> 
     <div id="participants"> 
      <%= f.simple_fields_for :participants do |participant| %> 
      <%= render "participants_fields", f: participant %> 
      <% end %> 
      <div class="links text-center"> 
      <%= link_to_add_association "Add a participant", f, :participants, partial: "participants_fields", class:"btn btn-primary btn-sm btn-add-friend" %> 
      </div> 
     </div> 
     </div> 
    <div class="col-xs-12 col-md-10 col-md-offset-1 text-center"> 
     <%= f.submit "See result" , class:"btn btn-success btn-lg btn-event" %> 
    </div> 
    <% end %> 

_participants_fields.html.erb

<div class="nested-fields"> 
    <%= f.input :first_name, label: "Participant's first name" %> 
    <%= f.input :salary, label: "Participant's monthly pay" %> 
    <div class="links"> 
    <%= link_to_remove_association "Remove this friend", f , class: "btn btn-danger btn-xs btn-remove-friend" %> 
    </div> 
</div> 

編輯多個HTML

<form novalidate="novalidate" class="simple_form new_event" id="new_event" action="/events" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="O5XM0JMiVBbpPNaKF1apw7rdtC/XEBhasZQoK6POycZQ2Zp14Td1ljoJyIUKTwtl91LlBHeDkKFtcWRnNu+iEQ=="> 
     <div class="col-xs-12 col-md-10 col-md-offset-1"> 
     <h1>Wanna share fair?</h1> 
     <p>Create an event, enter the bill to share.</p> 

     <div class="form-group string optional event_name"><label class="control-label string optional" for="event_name">Event's name</label><input class="form-control string optional" type="text" name="event[name]" id="event_name" data-com.agilebits.onepassword.user-edited="yes"></div> 

     <div class="form-group integer optional event_total_price"><label class="control-label integer optional" for="event_total_price">What is the total price</label><input class="form-control numeric integer optional" type="number" step="1" name="event[total_price]" id="event_total_price" data-com.agilebits.onepassword.user-edited="yes"></div> 

     <p>Add the participants.</p> 
     <div id="participants"> 
        <div class="nested-fields"> 
    <div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_1489705438668_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][1489705438668][first_name]" id="event_participants_attributes_1489705438668_first_name" data-com.agilebits.onepassword.user-edited="yes"></div> 
    <div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_1489705438668_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][1489705438668][salary]" id="event_participants_attributes_1489705438668_salary" data-com.agilebits.onepassword.user-edited="yes"></div> 
    <div class="links"> 
    <input type="hidden" name="event[participants_attributes][1489705438668][_destroy]" id="event_participants_attributes_1489705438668__destroy" value="false"><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a> 
    </div> 
</div><div class="nested-fields"> 
    <div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_1489705443842_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][1489705443842][first_name]" id="event_participants_attributes_1489705443842_first_name" data-com.agilebits.onepassword.user-edited="yes"></div> 
    <div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_1489705443842_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][1489705443842][salary]" id="event_participants_attributes_1489705443842_salary" data-com.agilebits.onepassword.user-edited="yes"></div> 
    <div class="links"> 
    <input type="hidden" name="event[participants_attributes][1489705443842][_destroy]" id="event_participants_attributes_1489705443842__destroy" value="false"><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a> 
    </div> 
</div><div class="links text-center"> 
      <a class="btn btn-primary btn-sm btn-add-friend add_fields" data-association="participant" data-associations="participants" data-association-insertion-template="<div class=&quot;nested-fields&quot;> 
    <div class=&quot;form-group string optional event_participants_first_name&quot;><label class=&quot;control-label string optional&quot; for=&quot;event_participants_attributes_new_participants_first_name&quot;>Participant&amp;#39;s first name</label><input class=&quot;form-control string optional&quot; type=&quot;text&quot; name=&quot;event[participants_attributes][new_participants][first_name]&quot; id=&quot;event_participants_attributes_new_participants_first_name&quot; /></div> 
    <div class=&quot;form-group integer optional event_participants_salary&quot;><label class=&quot;control-label integer optional&quot; for=&quot;event_participants_attributes_new_participants_salary&quot;>Participant&amp;#39;s monthly pay</label><input class=&quot;form-control numeric integer optional&quot; type=&quot;number&quot; step=&quot;1&quot; name=&quot;event[participants_attributes][new_participants][salary]&quot; id=&quot;event_participants_attributes_new_participants_salary&quot; /></div> 
    <div class=&quot;links&quot;> 
    <input type=&quot;hidden&quot; name=&quot;event[participants_attributes][new_participants][_destroy]&quot; id=&quot;event_participants_attributes_new_participants__destroy&quot; value=&quot;false&quot; /><a class=&quot;btn btn-danger btn-xs btn-remove-friend remove_fields dynamic&quot; href=&quot;#&quot;>Remove this friend</a> 
    </div> 
</div> 

" href="#">Add a participant</a> 
      </div> 
     </div> 
     </div> 
    <div class="col-xs-12 col-md-10 col-md-offset-1 text-center"> 
     <input type="submit" name="commit" value="See result" class="btn btn-success btn-lg btn-event" data-disable-with="See result"> 
    </div> 
</form> 

Answer 1

IIRC 「1489697584487 「您展示的部分ids是由Cocoon根據當前時間戳創建的。這意味着每次運行測試時，數字都會有所不同，因此您無法通過id選擇這些元素。

相反，如果你只需要添加一個參與者，你應該能夠做到像

fill_in "Participant's first name", with: "John" 
fill_in "Participant's monthly pay", with: "2300" 

東西如果要添加多個參與者則取決於您可以使用第n個孩子/ n次的準確佈局型CSS選擇範圍FILL_IN或使用all，並選擇一個你想要的，等

find('.nested-fields:nth-child(2)').fill_in ... 
all(:field, "Participant's first name", minimum: 2)[1].set("John") # 0 based index so minimum should be 1 more than the index you want 

而且 - 對於任何的這個工作，你需要使用一個JS能夠驅動（繭需要JS）。您沒有用js: true元數據標記您的規範，因此您要麼覆蓋了默認驅動程序，要麼您目前沒有使用支持JS功能的驅動程序 - 請參閱https://github.com/teamcapybara/capybara#selecting-the-driver。另請參閱https://github.com/teamcapybara/capybara#transactions-and-database-setup和https://github.com/DatabaseCleaner/database_cleaner#rspec-with-capybara-example如果您尚未配置database_cleaner以使用支持JS的驅動程序