Les boutons de la boîte de dialogue de l'interface utilisateur jQuery ne répondent pas à click_button ou selenium.click dans Selenium/Webrat

Question

Est-ce que quelqu'un a réussi à faire en sorte que les boutons jQuery UI Dialog répondent à click_button ou selenium.click? Je n'arrive pas à faire fonctionner ça.

Fondamentalement, j'essaie de tester un formulaire dans une boîte de dialogue jQuery UI dans une application Rails en utilisant Cucumber/Webrat/Selenium.

J'ai une page avec plusieurs lignes de table, et chaque ligne sur un clic déclenche une boîte de dialogue avec un formulaire. Chaque élément de formulaire a un identifiant unique de sorte que le balisage est valide.

Étant donné que les boutons peuvent être créés dynamiquement par le plugin Dialog, j'initialise la boîte de dialogue pour ajouter un bouton 'Sauvegarder' et 'Annuler'. Fait intéressant, le plugin insère une étiquette de bouton, pas une étiquette d'entrée. J'ajoute aussi les identifiants à l'ouverture comme indiqué ci-dessous, donc les boutons peuvent être ciblés par le framework de test.

$('.inventory_dialog').dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons: { 
    'Save': function() { 
     // ajax submit stuff 
    }, 
    Cancel: function() { 
     // cancel stuff 
    } 
    }, 
    open: function() { 
    // add ids to buttons for selenium 
    var inventory_id = $(this).attr('id').split('_').pop(); 
    $('.ui-dialog-buttonpane') 
     .find('button:contains("Save")').attr('id', 'inventory_'+inventory_id+'_save_button') 
     .end() 
     .find('button:contains("Cancel")').attr('id', 'inventory_'+inventory_id+'_cancel_button'); 
    } 
}); 

Le balisage ressemble:

<div id="inventory_dialog_392827" class="inventory_dialog"> 
    <form action="/suppliers/22/listings/27738/inventory/392827" class="edit_inventory" id="edit_inventory_392827" method="post"><div style="margin:0;padding:0"><input name="_method" type="hidden" value="put" /></div> 
    <div class="input_block"> 
     <label for="inventory_392827_new_quantity">Quantity</label> 
     <input id="inventory_392827_new_quantity" name="inventory[new_quantity]" type="text" value="10" /> 
    </div> 
    <div class="input_block"> 
     <label for="inventory_392827_claim_quantities">Groups of</label> 
     <input id="inventory_392827_claim_quantities" name="inventory[claim_quantities]" type="text" value="6-8" /> 
    </div> 
    </form> 
</div> 

Mon étape de concombre (actuellement) ressemble à:

When /^I click the "(.+)" button in the inventory dialog$/ do |button_name| 
    debugger 
    selenium.click "//button[@id='inventory_#{@current_offer.id}_#{button_name.downcase}_button']" 
    selenium_wait 
end 

Quand je lance le concombre et HITS 'debugger', je suis capable de manuellement 'selenium.click' dans les champs de saisie.

selenium.click "//input[@id='inventory_392827_new_quantity']" 

Ceci place avec succès un curseur dans ce champ. Cependant, en cliquant sur le bouton ne fonctionne pas:

selenium.click "//button[@id='inventory_392827_save_button']" 

Lorsque je tape que dans le débogueur de ligne de commande, il renvoie nil (que je crois que le succès, car il n'y a pas d'exception), mais Firefox ne fait rien . La boîte de dialogue reste ouverte dans le navigateur. Lorsque je renvoie response.body, ce bouton est présent.

J'ai essayé aussi

click_button "inventory_392827_save_button" 

mais les temps de commande « selenium_wait » out ce qui signifie qu'il ne voit pas cet élément.

Je suis coincé ...

Answer 1

Est-ce que le problème disparaîtra si vous changez à « fireEvent ... cliquez sur » ou clickAt?

Answer 2

Il peut être préférable de localiser votre bouton à l'aide d'une autre stratégie d'emplacement, telle que XPath ou CSS. Si vous ajoutez le code HTML du ou des boutons, je vais essayer de donner quelques suggestions.

Si votre touche cible a une classe de « Soumettre » par exemple, vous pouvez utiliser:

css=input.submit 

Si le bouton cible a une valeur de « Click Me » vous pouvez utiliser:

//input[@value='Click Me'] 

Une autre suggestion serait d'utiliser l'attribut id sans le numéro unique, de sorte que le suivant peut travailler pour vous:

//input[substring(@id, string-length(@id) -11, 12) = '_save_button'] 

Answer 3

J'ai eu un problème similaire, et voici comment je l'ai fait (en utilisant Capybara/Selenium/Factory_Girl).

Les boutons jQuery UI Dialog génère ce code HTML, dans mon cas avec deux boutons Ajouter et Annuler:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> 
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"> 
    <span class="ui-button-text">Add</span> 
</button> 

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"> 
    <span class="ui-button-text">Cancel</span> 
</button> 
</div> 

Mais la méthode click_button ne fonctionne pas parce que le nom du bouton réelle est une période imbriqué dans la bouton, comme vous pouvez le voir ci-dessus.

donc je l'ai écrit dans l'étape de .feature:

When I press the jquery dialog "Add" button 

Et j'ai ajouté à mon 'base.rb':

# jQuery Dialog buttons 
When /^I press the jquery dialog "([^\"]*)" button$/ do |button_text| 
    page.find("div.ui-dialog-buttonpane").find('span', :text => button_text).click 
end