使用 CircleCI 和 Minitest 进行前端测试：测试等待页面加载的时间不够长

Posted 2023-02-23

【中文标题】使用 CircleCI 和 Minitest 进行前端测试：测试等待页面加载的时间不够长

【英文标题】：Frontend testing with CircleCI and Minitest: Tests don't wait long enough for page to load

【发布时间】：2017-05-01 22:19:49

【问题描述】：

所以我的测试似乎通过了大约 75% 的时间。其他 25% 失败是因为测试套件没有等待足够长的时间来完全加载页面。在我们的本地机器上，测试大约需要 35 秒，但在 CircleCI 的日志中，它只有 5 秒。 （在本地我使用BROWSER=chrome m path/to/test.file 运行测试）

我是这个技术堆栈的新手，因此非常感谢任何帮助，即使它只是适当的参考文档。

it 'should use this form' do

  assert page.has_content?('#target_form')
  within '#target_form' do
    # fill in the form and apply payment
  end

  # it will throw errors here "can't find css..." 
  # the text/element won't even have loaded yet
  # by the time the test is run
  assert_equal '24', find_qa('price').text
end

【参考方案1】：

您编写断言的方式没有利用 Capybara 的等待/重试行为，因此在较慢的硬件上运行（CircleCI 与您的本地机器相比）可能会导致您的测试失败。 assert_equal 评估两个参数并比较它们，就完成了。这不好，因为 Capybara 假设每个动作都可以执行异步动作，因此它不一定要等待按钮单击来提交和加载新页面（因为它无法知道按钮单击可能产生什么动作）。但是，如果您使用 Capybara 提供的断言，它将等待/重试比较直到 Capybara.default_max_wait_time 秒，以便比较为真。我不确定你的 find_qa 方法是如何定义的，但如果你声明了一个自定义的 :qa 选择器，你可以这样做

assert_selector :qa, 'price', text: '24'

如果find_qa 只是在做一个 CSS 选择器，那么你可以这样做

assert_selector :css, "whatever find_qa('price') produces as a css selector", text: '24'

或者你可以这样做

find_qa('price').assert_text('24')

由于您使用的是 minitest，您可能想要阅读 - https://github.com/teamcapybara/capybara#using-capybara-with-minitest - 并配置 Capybara 的 minitest 匹配器，以便运行的断言计数正确，并提供一组更具体的断言，这些断言将利用 Capybara 的等待/重试行为。添加的匹配器见https://github.com/teamcapybara/capybara/blob/master/lib/capybara/minitest.rb，它可以让你写类似

assert_text find_qa('price'), '24'
assert_xpath 'an XPath selector', ...
assert_title ...
assert_current_path ...

等等

【讨论】：

哇，感谢您提供易于理解和深入的答案，我很高兴就是这样。我打算试试 Capybara 的助手，然后回来报告。

更新：托马斯的回答似乎是问题的根源。我认为这是前端测试的一个常见问题，所以我稍后会尝试更新它是如何长期进行的。目前，测试看起来不错。谢谢，@ThomasWalpole！