Vue 没有在 Capybara 测试中渲染

Question

我正在尝试使用 Capybara 从 Rspec 测试 Vue.js。我的问题是：身体是空的。

我找了几天的信息，所有的解决方案都是改变 Capybara 的驱动程序。我尝试了所有方法，但错误仍然存​​在。

我的 rails_helper.rb

# This file is copied to spec/ when you run 'rails generate rspec:install'
require 'spec_helper'
ENV['RAILS_ENV'] ||= 'test'
require File.expand_path('../../config/environment', __FILE__)
# Prevent database truncation if the environment is production
abort("The Rails environment is running in production mode!") if Rails.env.production?
require 'rspec/rails'
# Add additional requires below this line. Rails is not loaded until this point!
require 'capybara/poltergeist'
require 'factory_girl_rails'
require 'capybara/rspec'

options = {js_errors: false}

Capybara.server = :puma
require 'rack_session_access/capybara'
require 'capybara/poltergeist'

RSpec.configure do |conf|
  conf.include FactoryGirl::Syntax::Methods
end

Capybara.register_driver :poltergeist do |app|
    Capybara::Poltergeist::Driver.new(app, options)
end
Capybara.javascript_driver = :poltergeist
# Requires supporting ruby files with custom matchers and macros, etc, in
# spec/support/ and its subdirectories. Files matching `spec/**/*_spec.rb` are
# run as spec files by default. This means that files in spec/support that end
# in _spec.rb will both be required and run as specs, causing the specs to be
# run twice. It is recommended that you do not name files matching this glob to
# end with _spec.rb. You can configure this pattern with the --pattern
# option on the command line or in ~/.rspec, .rspec or `.rspec-local`.
#
# The following line is provided for convenience purposes. It has the downside
# of increasing the boot-up time by auto-requiring all files in the support
# directory. Alternatively, in the individual `*_spec.rb` files, manually
# require only the support files necessary.
#
# Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }

RSpec.configure do |config|
  # RSpec Rails can automatically mix in different behaviours to your tests
  # based on their file location, for example enabling you to call `get` and
  # `post` in specs under `spec/controllers`.
  #
  # You can disable this behaviour by removing the line below, and instead
  # explicitly tag your specs with their type, e.g.:
  #
  #     RSpec.describe UsersController, :type => :controller do
  #       # ...
  #     end
  #
  # The different available types are documented in the features, such as in
  # https://relishapp.com/rspec/rspec-rails/docs
  config.infer_spec_type_from_file_location!

  # Filter lines from Rails gems in backtraces.
  config.filter_rails_from_backtrace!
  # arbitrary gems may also be filtered via:
  # config.filter_gems_from_backtrace("gem name")

  config.include FactoryGirl::Syntax::Methods # this allows to use factory girl gem's methods
  # this is to test javascript with capybara  
end

然后我在 spec/features/ 中进行功能测试

require 'rails_helper'
require 'support/login_helper'

RSpec.feature "login", type: :feature, js: true do
  include LoginHelper

  before do
    login!
  end

  scenario 'a' do
    expect(true).to eq(true)
  end
end

最后，当我遇到错误时，我的登录助手。

require 'rails_helper'

module LoginHelper
    def login!
        visit root_path
        print page.html
        fill_in "username", with: "aaa"
        click_button "Entrar"
    end
end

在助手中，我尝试访问 root_path，获取输入，然后填充一些模拟数据。

在控制台中，测试向我提供了以下错误：

Failure/error: fill_in "username", with: "aaa"

Capybara::ElementNotFound:
   Unable to find visible field "username" that is not disabled

我在 fill_in 之前打印 page.html 并且我有

在我正在使用的 vue.app 中

Answer 1

您正在使用有一些问题的poltergeist 驱动程序，然后您还关闭了 poltergeist 驱动程序上的 js 错误报告，这只会隐藏更多问题。 poltergeist 驱动程序使用 PhantomJS 作为它的“浏览器”，最终大约相当于 6 年前的 Safari 版本。这意味着它不支持 ES6+，并且任何使用 ES6+ 中提供的功能的代码都需要转译和填充到 ES5 级别。此外，任何使用 let 或 const 而不被转译的代码都会导致 PhantomJS（以及因此的 poltergeist）静默失败并且不评估任何 JS。

您可能遇到的另一个问题是开发环境和测试环境在处理 JS 资产方面的差异。在开发模式下，每个 JS 资产都作为一个单独的文件提供，因此一个文件中的错误不会阻止解析/执行不同的文件。在测试模式下，JS 资源被连接到一个文件中，这意味着任何 JS 文件中的单个错误都可能/将导致其他文件中的 JS 永远不会被评估。

如果你真的想继续使用poltergeist，你需要在开发模式下查看浏览器控制台并修复那里显示的任何 JS 错误，然后确保你的所有文件都被转译和填充以兼容 ES5级别，并且您还应该打开js_errors 报告，这样您就不会主动隐藏问题。 从与现代应用程序的兼容性的角度来看，更好的解决方案是将selenium 驱动程序与 Firefox 的 Chrome 一起使用（如果需要/需要，两者都可以无头运行）。这也意味着您实际上是在使用用户当前可能使用的浏览器版本进行测试。

Answer 2

我改用 selenium headless-chrome 而不是 Poltergeist/Phantom JS 并且它起作用了