Phantomjs 没有正确加载 CSS/JS

Question

我在运行测试时遇到 phantomjs 无法正确呈现页面的问题。请看附图。

功能助手代码：

require 'rails_helper'
require 'capybara-screenshot/rspec'
require 'capybara/dsl'
require 'capybara/poltergeist'

Dir[Rails.root.join('spec/features/support/**/*.rb')].each { |f| require f }

Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new(app, {
    js_errors: false,
    phantomjs_options: ['--ignore-ssl-errors=yes', '--ssl-protocol=any'],
    debug: false,
    :timeout => 120,
    window_size: [1600, 1200],
    # timeout: 5.minutes,
    extensions: [
       Rails.root.join('spec/features/support/phantomjs/disable_animations.js')
    ]
  })
end

RSpec.configure do |config|
 config.include Auth
 config.include General
end

Capybara.configure do |config|
  config.default_selector = :css
  config.javascript_driver = :poltergeist
  # config.javascript_driver = :poltergeist_debug
  config.server_host = 'foo.xxx.localhost'
    Capybara.server_port = 3001
  config.default_max_wait_time = 10
end

Answer 1

PhantomJS 的最新发布版本 (2.1.x) 基本上相当于 6-7 年前的 Safari 版本。因此，他们不支持很多现代 CSS/JS。因此，呈现不正确的最可能原因是在页面中使用了不受支持的功能。如果是不受支持的 JS 导致了您的问题，那么在您的驱动程序注册中启用 js_errors and/or debug 可能会显示这一点。如果使用不受支持的 CSS（例如 CSS 网格），则不会显示任何错误，只是渲染出错。

如果您需要 100% 正确的渲染并且不打算修改您的应用程序以支持旧浏览器，那么您可能希望从使用 Poltergeist/PhantomJS 更改为使用 Chrome 的 selenium 驱动程序（在如果需要，无头模式）。

Phantomjs 没有正确加载 CSS/JS

Phantomjs does not load the CSS/JS correctly

rspec

ruby-on-rails

capybara

phantomjs

poltergeist