如何使用 Capybara 模拟单击 jQuery-UI 模态对话框按钮？答案

【问题标题】：How to simulate a click on a jQuery-UI modal dialog button with Capybara?如何使用 Capybara 模拟单击 jQuery-UI 模态对话框按钮？
【发布时间】：2012-10-21 13:07:27
【问题描述】：

在 Web 应用程序中，我使用 jQueryUI 模式对话框来确认操作：

function erase() {
  $("#dialog").text("Are you sure want to delete this record?")
  .attr("title", "Delete...")
  .dialog({
    modal: true,
    buttons: {
      Delete: function() {
        $.ajax({
          ...snip...
          success: function() {
            self.location = "."; // returns to the welcome page
          }
        });
      },
      ...snip...
    }
  });
}

代码运行良好，但我无法成功使用 Capybara 对其进行测试：

...snip...
Capybara.default_driver = :webkit
...snip...

def in_dialog()
  f = find('.ui-dialog')
end

feature 'Delete a record' do
...snip...
  scenario 'for any record' do
    click_on 'Delete...'
    page.should have_content 'Are you sure want to delete this record?'
    in_dialog.click_button 'Delete'
    page.should have_content 'Welcome'
    ...snip...
  end
end

Capybara 找到了按钮，但一切正常，就好像从未触发过回调一样。

我尝试了不同的解决方法（我在 stackoverflow 上找到了几种）：

睡觉，
“等待 ajax”，
page.native.send_keys(:return) 而不是 click_button 'Delete'，
find('button', :text => 'Delete').click 而不是 click_button 'Delete',
Selenium 驱动程序而不是 webkit 驱动程序。

没有工作。还有什么想法吗？

【问题讨论】：

您能否发布一个复制案例（如果它对于 SO 来说很大，那么例如 gist.github.com）？
这里是水豚场景与我的测试服务器交互的要点：gist.github.com/4547091
请准备一个包含相关 HTML/JS 文件的复制案例。如果我不知道如何重现问题，您希望我们如何解决问题？
场景包含服务器的URL。你只需要运行它。
我尝试在浏览器中手动执行这些步骤。但是在浏览器中单击按钮后没有任何反应（服务器返回 409 错误）

标签： jquery jquery-ui rspec capybara

【解决方案1】：

您在 cmets 中发布了 code that you use to interact with the server。

我在浏览器中手动执行了这些步骤，但单击“Supprimer”按钮返回 409 错误，没有其他任何反应。这就是为什么当您单击此按钮时测试中没有任何反应的原因。

【讨论】：

我必须承认，Capybara 场景与我手动测试的场景并不完全相同，前者因为未报告的错误而失败。看来我对应用太有信心了，对Capybara-jQueryUI的整合不够自信。现在错误已修复，场景运行良好。感谢您的帮助。

【解决方案2】：

嗯，sleep 至少应该有效，但这是我用来确保我的 AJAX 调用已返回的方法：

in_dialog.click_button 'Delete'
wait_until { page.evaluate_script("jQuery.active") == 0 }
page.should have_content 'Welcome'

【讨论】：

感谢您的建议。这似乎与我之前尝试的类似，但我会再试一次。
嗯，它没有用 :( 有没有人在 jQueryUI 上使用 Capybara 取得任何成功？
wait_until 已弃用，已从 capybara 2.0 中删除，您不应使用它。

【解决方案3】：

您始终可以在 capybara 的场景中执行自定义 javascript 代码。您是否尝试过类似的方法：

# when
page.execute_script("$('.the-button-selector').click();")
# then
page.should_not have_css(".the-dialog-selector")

【讨论】：