jQuery UI 对话框按钮不响应 Selenium/Webrat 中的 click_button 或 selenium.click

Question

有谁能够让 jQuery UI 对话框按钮响应 click_button 或 selenium.click 吗？我似乎无法让它发挥作用。

基本上，我正在尝试使用 Cucumber/Webrat/Selenium 在 Rails 应用程序的 jQuery UI 对话框中测试表单。

我有一个包含许多表格行的页面，单击每一行都会弹出一个带有表单的对话框。每个表单元素都有一个唯一的 id，因此标记是有效的。

由于按钮可以通过对话框插件动态创建，因此我初始化对话框以添加“保存”和“取消”按钮。有趣的是，该插件插入了按钮标签，而不是输入标签。我还在打开时添加了 id，如下所示，以便测试框架可以定位按钮。

$('.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');
  }
});

标记如下所示：

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

我的 Cucumber 步骤（目前）如下所示：

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

当我运行 Cucumber 并点击“调试器”时，我可以在输入字段中手动“selenium.click”。

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

这成功地将光标置于该字段中。但是，单击该按钮不起作用：

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

当我在命令行调试器中键入该按钮时，它返回 nil （我相信这是成功的，因为没有例外），但 Firefox 不执行任何操作。该对话框在浏览器中保持打开状态。当我输出response.body时，该按钮就出现了。

我也尝试过，

click_button "inventory_392827_save_button"

但“selenium_wait”命令超时，这意味着它看不到该元素。

我被困住了...

Answer 1

如果将其更改为“fireEvent ... click”或 clickAt，问题会消失吗？

Answer 2

通过其他位置策略（例如 XPath 或 CSS）来定位按钮可能会更好。如果您添加按钮的 HTML，那么我会尝试提供一些建议。

例如，如果您的目标按钮具有“提交”类别，您可以使用：

css=input.submit

如果目标按钮的值为“Click Me”，您可以使用：

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

另一个建议是使用 id 属性，而不使用唯一的编号，因此以下内容可能适合您：

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

Answer 3

我有一个类似的问题，这是我如何完成它的（使用 Capybara/Selenium/Factory_Girl）。

jQuery UI 对话框按钮生成此 HTML，在我的例子中有两个按钮“添加”和“取消”：

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

但是 click_button 方法不起作用，因为实际的按钮名称是一个跨度
嵌套在按钮标签内，如上所示。

所以我在 .feature 步骤中写道：

When I press the jquery dialog "Add" button

并将其添加到我的“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