水豚找不到字段

Question

您好，我正在做我的第一次测试，我需要您的帮助。我正在使用 Rails5。

问题在于我相信的嵌套字段...（使用 Cocoon gem）

Capybara 返回此错误：

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 您显示的 id 的“1489697584487”部分是由 Cocoon 根据当前时间戳创建的。这意味着每次运行测试时，数字都会不同，因此您将无法通过 id 选择这些元素。

相反，如果您只添加一个参与者，您应该能够执行类似的操作

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

如果您要添加多个参与者，则根据确切的布局，您可以使用 nth-child/nth-of-type 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 的驱动程序（Cocoon 需要 JS）。您尚未使用 js: true 元数据标记您的规范，因此您已经覆盖了默认驱动程序，或者您当前没有使用支持 JS 的驱动程序 - 请参阅 https://github.com/teamcapybara/capybara#selecting-the-driver。如果您尚未配置 database_cleaner 以与支持 JS 的驱动程序一起使用，另请参阅 https://github.com/teamcapybara/capybara#transactions-and-database-setup 和 https://github.com/DatabaseCleaner/database_cleaner#rspec-with-capybara-example