cocoon 使用 rspec 和 capybara 动态添加的测试字段答案

【问题标题】：Testing fields added dynamically by cocoon using rspec and capybaracocoon 使用 rspec 和 capybara 动态添加的测试字段
【发布时间】：2014-04-20 16:16:44
【问题描述】：

我想知道是否有人测试由 cocoon 动态添加的字段？

这可以节省大量时间，但所有动态添加的字段都在 ID 和名称中添加了很长的数字。这意味着我必须跳过页面上需要多个（一组）字段的测试。

【问题讨论】：

问题不完全清楚：你想测试字段是否存在？你想设置字段吗？
嗨，内森，谢谢你的宝石！由于附加到所述元素的长数字，我只是在努力定位由它动态生成的任何内容。例如，单击添加字段会在刷新时给出类似<input class="string required form-control" id="foo_foo_attributes_1398082250289_name" name="foo[foo_attributes_attributes][1398082250289][name]" type="text"> 的内容，这些设置为它们在 ActiveRecord 对象中的索引，但不清楚如何找到动态添加的元素
我一般用count，我统计看看是否有新的child被添加（或删除），使用css选择器可以很容易的找到第二个（n-th）关联。
出于好奇，这些数字对应什么？
对不起，我不明白这个问题？

标签： ruby-on-rails rspec capybara cocoon-gem

【解决方案1】：

Afaik 你可以测试两件事：

嵌套元素的动态添加有效
创建元素，将其填充并存储在数据库中

因此假设您的视图的相关部分如下所示（默认示例）：

#tasks
  = f.semantic_fields_for :tasks do |task|
    = render 'task_fields', :f => task
  .links
    = link_to_add_association 'add task', f, :tasks

你的嵌套元素看起来像

.nested-fields
  = f.input :description
  = f.input :done, :as => :boolean
  = link_to_remove_association "remove task", f

所以通常你给它一个类，我通常只是测试页面上元素的数量。

所以如果一个元素已经存在，创建一个新元素，计数应该是两个。你可以用这个来测试

 find("#tasks .nested-fields").count.should == 2

填充新添加的嵌套元素，您可以使用:last-child css 选择器

 find("#tasks .nested-fields:last-child input#description").set("something")

name 和 id 是如何形成的，与 Rails 内部结构很接近，所以我尽量远离这些。

【讨论】：

再次感谢 Nathan，这无疑会在未来帮助我很多次
您的回答提到了:last，但使用了:last-child。就我而言，:last 似乎有效，而 :last-child 无效。
Weird :last-child 是正确的 CSS 选择器，而 imho :last 不存在？您使用的是哪个驱动程序？
@nathanvda 我使用的是谷歌浏览器。
啊 - 也许 JavaScript 控制台中 JQuery 语句中的有效内容对于 Capybara 中的 find 调用无效。但是我仍然对您在文本中使用:last 和在代码中使用:last-child 感到困惑。

【解决方案2】：

也许使用Capybara finders all，首先和选择器输入。像这样的：

visit new_resource_path
click_link "Add a Nested Resource"
first("input[name='nested_resource[name]']").set("Nested Resource")
click_button "submit"

或者

visit new_resource_path
click_link "Add a Nested Resource"
click_link "Add a Nested resource"
all("input[name='nested_resource[name]']").each do |input|
  input.set("Nested Resource")
end
click_button "submit

这只是一种方法，我从未使用过茧。然而，这是一种测试动态输入的表单。

【讨论】：

感谢您，我过去确实遇到过查找器，但没有看到它们在上下文中使用。另外，值得一提的是，如果使用 webkit，可能需要添加一个小的sleep 以允许 JS 在查找之前加载元素。

【解决方案3】：

奇怪。

我的格式为 (haml)：

= link_to_add_association f, :staff_phases, class: :button, id: 'add-staff-phase-link' do
  %i.fas.fa-plus

在我的测试中

click_link 'add-staff-phase-link'
save_and_open_page

click_link 有效，但我看不到任何附加关联。如果我，然后在打开的页面上，用鼠标点击链接，茧链接工作并添加一个关联

【讨论】：

【解决方案4】：

这可能是常识，但在处理需要选择而不是文本输入的嵌套属性时，分享它对我有用。我找到我的选择字段的所有实例，然后选择我想要使用我的首选选项更新的选择字段，如下所示：

page.find_all('select[id^="model_model_nested_attributes_"]')[2].select("preferred_option")

【讨论】：

【解决方案5】：

我刚刚使用的一种可能的替代方法是动态更新每个添加的表单字段的标签（使用https://github.com/nathanvda/cocoon/issues/374 中提到的技术），现在我的 Cucumber/Capybara 测试可以轻松地将文本插入到不同的多个表单字段中以区分它们通过他们拥有的不同标签。

关于我在此 PR https://github.com/AgileVentures/WebsiteOne/pull/1818 中所做工作的详细信息

【讨论】：