How do I use Capybara selectors to select a field properly

I've got a form which allows me to add/edit categories and sub categories within the one form. This form uses AJAX and to test it I've been using Capybara with some selectors.

The problem is with the selectors there seems to be subtle differences between when I'm creating a new category with sub categories to when I'm editing a category with sub categories.

Here is my create scenario:

  @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"

This works with selectors:

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

On form:

= 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 partial:

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

When I use the same selectors though in my edit scenario I cannot select the 2nd category. Here is my edit category feature:

  @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"

If I change my selector to:

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

Then it works for edit but not the new scenario.

Is there a way to use the same selector for both new & edit scenarios in my case?

Am I better using a different type of selector on my form? If so does anyo开发者_如何转开发ne have any recommendations?

Use an id on the unique elements, and class combinations on repeated elements. With the right combination of class and id selectors you will always arrive at a unique child. Keep in mind you can group selectors on the one element.

So

Given a category exists

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

And category "Books" has sub category "Fiction"

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

etc