Comment utiliser les sélecteurs Capybara pour sélectionner un champ correctement

Question

J'ai un formulaire qui me permet d'ajouter/éditer des catégories et sous-catégories dans le même formulaire. Ce formulaire utilise AJAX et pour le tester, j'ai utilisé Capybara avec certains sélecteurs. Le problème est avec les sélecteurs il semble y avoir des différences subtiles entre quand je crée une nouvelle catégorie avec des sous-catégories à quand je édite une catégorie avec des sous-catégories.

Voici mon scénario créer:

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

Cela fonctionne avec des sélecteurs:

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

Sur la forme:

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

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

Lorsque j'utilise les mêmes sélecteurs que dans mon scénario d'édition, je ne peux pas sélectionner la 2ème catégorie. Voici ma catégorie modifier fonction:

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

Si je change mon sélecteur:

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

Ensuite, il travaille pour l'édition, mais pas le nouveau scénario.

Existe-t-il un moyen d'utiliser le même sélecteur pour les nouveaux scénarios d'édition & dans mon cas? Est-il préférable d'utiliser un autre type de sélecteur sur mon formulaire? Si oui, quelqu'un a-t-il des recommandations?

Answer 1

Utilisez un ID sur les éléments uniques et les combinaisons de classes sur les éléments répétés. Avec la bonne combinaison de sélecteurs de classe et d'id, vous arriverez toujours à un enfant unique. Gardez à l'esprit que vous pouvez grouper des sélecteurs sur un élément.

Alors

Compte tenu d'une catégorie existe

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

Et catégorie "Livres" a sous la catégorie "Fiction"

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

etc