使用动态 dom 测试 rspec 和 capybara答案

【问题标题】：Testing rspec and capybara with dynamic dom使用动态 dom 测试 rspec 和 capybara
【发布时间】：2021-10-27 22:21:10
【问题描述】：

我正在尝试使用rpsec、capybara 编写功能测试，我有一个带有图像输入的表单，当我在输入上添加文本然后单击Add 按钮时，我将使用 javascript 附加动态 dom @ 987654327@。我尝试编写功能测试，但是当我运行此测试时

    fill_in 'message_setting_message_settings_labels_text', with: 'test label'
    find('span', text: 'Add').click
    expect(page).to have_content('test label')

页面找不到文字test label。似乎水豚不执行javascript动作对吗？任何这样的测试可以帮助我吗？

【问题讨论】：

github.com/teamcapybara/capybara#using-capybara-with-rspec

标签： ruby-on-rails ruby rspec capybara

【解决方案1】：

如@max 分享的链接所示，您需要在rspec 的feature 行或describe 行中包含js: true。

但是 javascript 和 Ruby 之间总是存在潜在的竞争条件。我能想到三种比赛场景……

如果有一个 ajax 请求需要在标签出现在页面上之前完成。您需要等待 ajax 完成。这一切归功于 Thoughtbot，您可以使用他们在此处描述的帮助程序：https://thoughtbot.com/blog/automatically-wait-for-ajax-with-capybara
如果您有任何动画可能会延迟页面上元素的出现（例如 slideDown 等），则可以并且应该在测试环境中禁用这些动画。我用这个：

<body class=<%= "no-animation" if Rails.env.test? %> >

<style>
.no-animation * {
  /*CSS transitions*/
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;

  /*CSS transition properties*/
  -webkit-transition-property: none !important;
  -moz-transition-property: none !important;
  -o-transition-property: none !important;
  -ms-transition-property: none !important;
  transition-property: none !important;

  /*CSS transforms*/
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -o-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;

  /*CSS animations*/
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
}

即使没有 ajax 或动画，也可能会出现竞争，在这种情况下，使用 sleep(0.5) 等待的蛮力方法是唯一（虽然丑陋）的解决方案。

【讨论】：