Javascript 在 Rails Rspec Capybara 测试中停止工作答案

【问题标题】：Javascript stopped working in Rails Rspec Capybara testsJavascript 在 Rails Rspec Capybara 测试中停止工作
【发布时间】：2019-11-24 14:51:36
【问题描述】：

我的 system.rb 帮助文件中有以下设置：

require "capybara-screenshot/rspec"

RSpec.configure do |config| 
  config.before(:each, type: :system) do
    driven_by :rack_test 
  end
  config.before(:each, type: :system, js: true) do 
    driven_by :selenium_chrome_headless
  end 
end

Capybara.register_driver :selenium_chrome_headless do |app|
  options = Selenium::WebDriver::Chrome::Options.new
  [
    "headless",
    "window-size=1280x1280",
    "--enable-features=NetworkService,NetworkServiceInProcess",
    "disable-gpu" 
  ].each { |arg| options.add_argument(arg) }

  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options, clear_local_storage: true, clear_session_storage: true)

end

Capybara::Screenshot.register_filename_prefix_formatter(:rspec) do |example|
  "screenshot"
end

Capybara::Screenshot.webkit_options = { width: 1586, height: 768 }

Capybara.javascript_driver = :webkit
Capybara.default_max_wait_time = 4


Capybara::Webkit.configure do |config|
  config.allow_url("https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js")
end

我正在使用 Rails 5.2、selenium-webdriver 3.141.0、capybara 2.18、chromedriver-helper 2.1.0。

这是一个典型的测试：

require "rails_helper"

RSpec.describe "Queues the Error Accounting Job ", type: :system,  js: true do
  include ActiveJob::TestHelper

  let!(:job)  { create(:proofreading_job, :with_start_end_dates, title: "Internal Job", status: 'queued', document: create(:document))}
  let!(:user) { job.proofreader_user }

  it 'queues the WordCountsJob' do
    visit root_path
    click_on "Login"
    fill_in("Email", with: user.email)
    fill_in("Password", with: user.password)
    click_on "Sign In"
    click_on "Jobs"
    page.find(:css, ".clickable-row").click()
    click_on "Upload Proofread Document"
    attach_file('customFile','/Users/mitchellgould/RailsProjects/ProvenWordNew/spec/test_documents/proofread_document/1.docx', make_visible: true)
    find_button('Upload', disabled: false).click
    sleep 2.seconds
    expect(ErrorAccountingJob).to have_been_enqueued
  end
end

测试期间js不触发导致测试失败。几周前同样的测试还在工作，我还没有触及设置。所以我不知道为什么 javascript 不会在测试中触发。当我在应用程序中尝试时，此功能有效，因此代码没有问题。

任何帮助表示赞赏。

更新：

根据 cmets 中的建议，我更改了以下内容：

将 Capybara 更新至 3.26 删除了 chromedriver-helper 已安装的网络驱动程序

重构我的系统帮助文件如下：

require "capybara-screenshot/rspec"
require 'webdrivers'

RSpec.configure do |config| 
  config.before(:each, type: :system) do
    driven_by :rack_test 
  end
  config.before(:each, type: :system, js: true) do 
    driven_by :selenium_chrome
  end 
end

Capybara.default_max_wait_time = 4

Capybara::Screenshot.register_filename_prefix_formatter(:rspec) do |example|
  "screenshot"
end

Capybara::Screenshot.webkit_options = { width: 1586, height: 768 }

但是，让 js 在测试中触发的问题仍然存在。浏览器打开页面加载，但是当它点击一个按钮或一个应该触发一些 js 的元素时，什么也没有发生。代码就像我手动完成的那样工作。我还是不明白为什么js不会在测试中触发。

【问题讨论】：

这有点令人困惑。您正在注册驱动程序 :selenium_chrome_headless （使用 Selenium 驱动程序）并设置 Rails 系统测试以使用它。接下来，您将配置Capybara::Screenshot.webkit_options、Capybara::Webkit 并设置Capybara.javascript_driver = :webkit，这意味着您要使用capybara-webkit。您使用的是高度过时的 Capybara 版本，并且还指定使用 chromedriver-helper，这仅在使用 Selenium 时才有意义（并且已被 webdrivers gem 取代）。您实际上希望使用哪个驱动程序进行测试？
谢谢托马斯。我想我实际上很困惑，感谢您的帮助。如果您能指出我正确的方向，我很高兴简化此设置。我一直在寻找这方面的教程，但似乎找不到。
您希望将 Selenium 与 Chrome 一起使用吗？如果是这样，请删除任何引用“webkit”的行，然后暂时从驱动程序注册中的选项中删除“headless”行，以便您可以看到浏览器打开并查看它在做什么。还可以从“chromedriver-helper”gem 切换到“webdrivers”。完成后，运行您遇到问题的特定测试，看看它是否会打开浏览器。
我曾经在 application.js 文件中遇到一个拼写错误，导致浪费了一些时间，我通过记录 JS:github.com/dbalatero/capybara-chromedriver-logger 找出了问题所在，然后修复了这个错误。跨度>
谢谢 Thomas，我会听从您的建议并尽快报告结果。我一直在将 Selenium 与 Chrome 一起使用，它可以在有无无头的情况下使用。我可以在浏览器中看到这些操作，但没有 JS 被触发。我在代码中弹出警报，但没有显示警报。我会看看更新是否会改变这个问题。

标签： ruby-on-rails selenium-webdriver rspec capybara

【解决方案1】：

我对没有触发的 JS 进行了一些检查，并意识到在页面完全加载 turbolinks 后我没有加载 JS 文件。

将代码放入以下修复它：

$(document).on 'turbolinks:load', ->

  $('.clickable-row').on 'click', (e) ->
    unless $(e.target).hasClass('btn')
      window.location = $(this).data('href'

根据 cmets 中的建议更新水豚。虽然这不是问题的原因，但建议让我的 gem 保持最新状态。

【讨论】：