Question

我正在编写一个RSpec / capybara功能规范，以测试按下表单提交按钮后，该按钮被禁用并将其文本更改为“ ADDING ...”。

在规范中，单击按钮（如果有效，则提交表单）：

find(".Booknow-modal-bookingButton button.primaryCTA").click

执行的相应javascript如下：

$('form#booknow-room').on('submit', function(e) {
    // If form is submitting then html5 validation has passed, 
    // now disable the button to prevent duplicate submissions.
    $('form#booknow-room button.primaryCTA').attr('disabled', true).text('Adding...')
})

规范运行时，我可以看到它正在运行。规范的下一行是：

expect(page).to have_button('ADDING...', disabled: true)

但是我认为，这一次，表单提交已重定向到购物篮页面，因此找不到按钮，因此测试失败。

我还尝试了以下变体：

expect(find('.Booknow-modal-bookingButton button.primaryCTA').value).to eq 'ADDING...'
expect(".Booknow-modal-bookingButton button.primaryCTA").to have_content("ADDING...")
expect(page).to eq(".Booknow-modal-bookingButton button.primaryCTA", disabled: true)

但是它们都不起作用。

rspec返回的错误消息是：

Failure/Error: expect(page).to have_button('ADDING...', disabled: true)
expected to find button "ADDING..." but there were no matches

Answer 1

假设单击按钮将触发完整表单提交，而不是基于XHR的提交，那么您尝试执行的操作可能无法实现。这是由于在WebDriver规范-https://w3c.github.io/webdriver/#element-click中单击元素所定义的行为。 12.4.1步骤10、11和12是驱动程序实现者可以尝试检测导航是否正在发生并等待其完成的相关部分。这可能意味着直到页面更改后，您才能对disabled进行检查。

接下来要问的问题是这是否需要通过端到端的水豚测试进行测试，或者是否可以仅在Javascript测试中进行测试。

如果您确实认为需要在Capybara测试中进行测试，则可以尝试注册一个页面加载策略功能设置为“无”的驱动程序，这应该告诉驱动程序不要等待任何导航并且可以允许按钮状态进行检查（您可能只想对该特定测试使用该驱动程序）。另一个可能的选择是使用execute_script安装事件处理程序，以防止发生实际的提交-尽管每次在测试中修改运行页面代码时，都可能降低测试的实用性。

Answer 2

我实现了@Thomas Walpole提到的另一个“潜在解决方案”-修改表单，以便当您单击“提交”按钮时，它实际上并没有提交。这样，您可以验证按钮是否被禁用，直到表单提交后才不会受到水豚的阻碍。

page.execute_script(
  "$('form#booknow-room').attr('action', 'javascript: void(0);');"
)

page.click_button('Submit')
expect(page).to have_button('Adding...', disabled: true)

提交后，功能规格检查表单按钮的问题被禁用

2 个答案: