ruby-on-railsrspecphantomjscapybarapoltergeist

Phantomjs does not load the CSS/JS correctly


I am having the issue that phantomjs doesn't render the page correctly when I am running the tests. Please see the attached picture Picture of Missing CSS/JS.

Feature Helper Code:

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

Solution

  • The latest release versions of PhantomJS (2.1.x) are basically equivalent to a 6-7 year old version of Safari. As such they don't support a lot of modern CSS/JS. Therefore, the most likely reason for incorrect rendering is use of unsupported features in your page. If it's unsupported JS causing your issue then enabling js_errors and/or debug in your driver registration could possibly show that. If it's the use of unsupported CSS (CSS Grid for instance) then no error will be shown and the rendering will just be wrong.

    If you need 100% correct rendering and aren't going to modify your app to support old browsers then you probably want to change from using Poltergeist/PhantomJS to the selenium driver with Chrome (in headless mode if wanted).