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

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)

但其中 none 有效。

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 进行检查。

接下来要问的问题是，这是否需要通过 end-to-end Capybara 测试来测试，或者是否可以仅在 Javascript 测试中进行测试。

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

Answer 2

我实现了@Thomas Walpole 提到的另一个 "potential solution" -- 修改表单，这样当您单击提交按钮时它实际上并没有提交。这允许您在表单提交之前验证该按钮是否被禁用而没有水豚阻塞。

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

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

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

Problem with feature spec to check form button is disabled after submit

ruby-on-rails

capybara