如何使用 Capybara 选择器正确选择字段

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})" 

那么它适用于编辑，但不适用于新场景。

有没有办法对 new 和 new 使用相同的选择器？编辑我的案例中的场景？

我在表单上使用不同类型的选择器是否更好？如果是的话有人有什么建议吗？

Answer 1

对唯一元素使用 id，对重复元素使用类组合。通过类和 id 选择器的正确组合，您将始终得到一个独特的子项。请记住，您可以将选择器分组到一个元素上。

所以

给定一个类别存在

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

并且类别“书籍”有子类别“小说”

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

等