javascript - capybara 和JavaScript : checking for visibility requires huge amounts of time! 如何优化？

Question

在 Rails 中创建一些 JavaScript 功能时，我使用了一些丑陋的 Capybara 规范来帮助我确保一切正常。其中一个规范如下所示:

it 'creates a report document', js: true do
  visit new_project_report_document_path @project

  expect(page).to have_active_navigation_items 'Projects'
  expect(page).to have_breadcrumbs 'A4AA 2.0', 'Projects', 'Project test name', 'Reports', 'Create'
  expect(page).to have_headline 'Create Report'

  expect {
    select 'Template 1', from: 'report_report_template_id'
  }.to change { page.has_css? "[data-template-inputs-id='#{@report_template_1.id}']", visible: true }.from(false)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_1.id}'] #report_name[disabled]",        visible: false}.from(true)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_1.id}'] #report_description[disabled]", visible: false}.from(true)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_1.id}'] #report_intro[disabled]",       visible: false}.from(true)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_1.id}'] #report_content[disabled]",     visible: false}.from(true)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_1.id}'] #report_outro[disabled]",       visible: false}.from(true)

  expect(page).to have_css "[data-template-inputs-id='#{@report_template_1.id}'] #report_name",        text: @report_template_1.name
  expect(page).to have_css "[data-template-inputs-id='#{@report_template_1.id}'] #report_description", text: ''
  expect(page).to have_css "[data-template-inputs-id='#{@report_template_1.id}'] #report_intro",       text: @report_template_1.intro
  expect(page).to have_css "[data-template-inputs-id='#{@report_template_1.id}'] #report_content",     text: @report_template_1.content
  expect(page).to have_css "[data-template-inputs-id='#{@report_template_1.id}'] #report_outro",       text: @report_template_1.outro

  expect {
    select 'Template 2', from: 'report_report_template_id'
  }.to change { page.has_css? "[data-template-inputs-id='#{@report_template_1.id}']", visible: true }.from(true)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_1.id}'] #report_name[disabled]",        visible: false}.from(false)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_1.id}'] #report_description[disabled]", visible: false}.from(false)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_1.id}'] #report_intro[disabled]",       visible: false}.from(false)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_1.id}'] #report_content[disabled]",     visible: false}.from(false)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_1.id}'] #report_outro[disabled]",       visible: false}.from(false)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_2.id}']", visible: true }.from(false)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_2.id}'] #report_name[disabled]",        visible: false}.from(true)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_2.id}'] #report_description[disabled]", visible: false}.from(true)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_2.id}'] #report_intro[disabled]",       visible: false}.from(true)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_2.id}'] #report_content[disabled]",     visible: false}.from(true)
  .and change { page.has_css? "[data-template-inputs-id='#{@report_template_2.id}'] #report_outro[disabled]",       visible: false}.from(true)

  expect(page).to have_css "[data-template-inputs-id='#{@report_template_2.id}'] #report_name",        text: @report_template_2.name
  expect(page).to have_css "[data-template-inputs-id='#{@report_template_2.id}'] #report_description", text: ''
  expect(page).to have_css "[data-template-inputs-id='#{@report_template_2.id}'] #report_intro",       text: @report_template_2.intro
  expect(page).to have_css "[data-template-inputs-id='#{@report_template_2.id}'] #report_content",     text: @report_template_2.content
  expect(page).to have_css "[data-template-inputs-id='#{@report_template_2.id}'] #report_outro",       text: @report_template_2.outro

  fill_in 'report_name',        with: 'newname'
  fill_in 'report_description', with: 'newdescription'
  fill_in 'report_intro',       with: 'newintro'
  fill_in 'report_content',     with: 'newcontent'
  fill_in 'report_outro',       with: 'newoutro'

  click_button 'Create Report'

  expect(page).to have_flash 'Report was successfully created.'
end

我知道这是一个丑陋的规范，但我注意到它需要花费大量时间:大约 40 秒!

Finished in 41.86 seconds (files took 0.44731 seconds to load)

这是另一个激活了 JavaScript 的规范。虽然它小得多(并且只加载一个整页)，但我认为它所需的时间比上面的要少得多:

it 'allows to remove an existing finding', js: true, focus: true do
  visit edit_project_boilerplate_copy_path(@boilerplate_copy.project, @boilerplate_copy)

  click_link 'Remove finding'

  expect {
    click_button 'Update Boilerplate'
  } .to change { Finding.count }.by -1
end

大约需要 6-7 秒:

Finished in 6.62 seconds (files took 0.52104 seconds to load)

所以我想知道为什么第一个需要这么多时间。我的完整规范套件大约有 400 个规范，大约需要一分钟，所以通过添加新规范，它会增加到近 2 分钟!这是 Not Acceptable 。

那么:我的 JS 规范如何改进？这与许多 visible: false 语句有关吗？或者许多 and Change { ... } 的东西？也许两者都在互动？

当删除所有包含 visible: false 的行时，速度会更快:

Finished in 6.39 seconds (files took 0.41315 seconds to load)

我在 OSX El Capitan 上使用 capybara (2.5.0)、rspec (3.3.0)、rails (4.2.1) 和 poltergeist (1.7.0) 以及 phantomjs (1.9.8)。

Answer 1

你的测试之所以如此缓慢，是因为你遇到了 capybara 的等待行为。 #has_css?/have_css 将等待 Capybara.default_max_wait_time 秒，让匹配的元素出现在页面上，如果没有出现，则返回 false。当您期望某个元素不在您想要使用的页面上时，请使用 #has_no_css?/have_no_css (或 not_to #has_css?/have_css 因为它们最终是同一件事)，因为一旦找不到该元素，它将立即返回.

has_css?(....)  #will wait until element appears or default_max_wait_time
has_no_css?(....)  #will wait until element is gone or default_max_wait_time

基本上就您的情况而言，您不想将 change 匹配器与 has_css 一起使用？因为它不允许您在操作的每一侧使用尽快匹配的方法。如果您确实想保留 change 匹配器，一个潜在的选择是将一个小的等待值传递给 has_css? wait: 0.5 或其他可以减少该项目的最大等待时间的值，但可能需要进行调整以允许页面上发生的任何操作实际完成