如何使用水豚选择器来正确选择字段

Question

我有一个表格，允许我在一个表格中添加/编辑类别和子类别。这种形式使用AJAX并进行测试，我一直在用一些选择器来使用Capybara。

问题是与选择器似乎有微妙的差异，当我创建一个新的类别与子类别，当我编辑一个类别与子类别。

这是我创造的情景：

@javascript @wip 
    Scenario: Create new category with sub categories 
    Given I am on the new category page 
    When I fill in "Name" with "Main" within the parent fields 
    And I follow "Add sub category" 
    And I fill in "Name" with "Sub1" within the 1st sub category fields 
    And I follow "Add sub category" 
    And I fill in "Name" with "Sub2" within the 2nd sub category fields 
    And I follow "Add sub category" 
    And I fill in "Name" with "Sub3" within the 3rd sub category fields 
    And I press "Save" 
    Then I should be on the "Main" category page 
    And I should see "Main" 
    And I should see "Sub1" 
    And I should see "Sub2" 
    And I should see "Sub3" 

这适用于选择：

when /the parent fields/ 
    "table tr:nth-child(1)" 

when /the (\d+)(?:st|nd|rd|th) sub category fields/ 
    pos = $1.to_i + 2 
    "table tr:nth-child(#{pos})" 

在形式：

= form_for @category do |f| 
    %table 
     %tr 
      %td= f.label :name 
      %td= f.text_field :name 

     %tr 
      %td(colspan=2) 
       %b Sub categories 

     - f.fields_for :children do |child| 
      = render "child_fields", :f => child 

     %tr 
      %td= link_to_add_fields "Add sub category", f, :children 
     %tr 
      %td= f.submit 'Save' 

child_fields部分：

%tr.subs 
    %td= f.label :name 
    %td= f.text_field :name 

当我在编辑场景中使用相同的选择器时，我无法选择第二个类别。这里是我的编辑类功能：

@javascript @wip 
    Scenario: Edit category with sub categories 
    Given a category exists 
    And category "Books" has sub category "Fiction" 
    And category "Books" has sub category "Non-Fiction" 
    And I am on the edit page for category "Books" 
    When I fill in "Name" with "Cars" 
    And I fill in "Name" with "Coupe" within the 1st sub category fields 
    And I fill in "Name" with "Sports" within the 2nd sub category fields 
    And I press "Save" 
    Then I should be on the "Cars" category page 
    And I should see "Cars" 
    And I should see "Coupe" 
    And I should see "Sports" 

如果我将选择更改为：

when /the (\d+)(?:st|nd|rd|th) sub category fields/ 
    pos = $1.to_i * 2 + 1 
    "table tr:nth-child(#{pos})" 

然后它进行编辑，但没有新的情况。

有没有在我的情况下使用相同的选择器为新的&编辑方案？

我是否更好地在窗体上使用不同类型的选择器？如果有的话，任何人有任何建议？

Answer 1

对唯一元素和重复元素上的​​类组合使用一个id。通过类和id选择器的正确组合，你将永远到达一个独特的孩子。请记住，您可以将选择器分组到一个元素上。

所以

给定一个类别存在

wait_for_xpath = '//element(@class = "categoryClass")' 

类和 “书” 有子类 “小说”

wait_for_xpath = "//element(contains (@class, 'categoryClass') and (@id, 'bookId'))//element(@id='fiction')" 

等