Bootstrap responsive navbar displayed incorrectly

[Chris Edwards]

Using Rails 5, poltergeist 1.13.0, capybara 2.12.1 and Bootstrap 4 (alpha6) with the following setup:

Capybara.register_driver :poltergeist_debug do |app|
  output = StringIO.new
  Capybara::Poltergeist::Driver.new(
    app,
    js_errors: true,
    window_size: [1280, 912],
    screen_size: [1280, 912],
    phantomjs_logger: output,
    inspector: true
  )
end

Capybara.default_driver = :poltergeist
Capybara.javascript_driver = :poltergeist_debug

in a test I am seeing the following:

if I remove the "navbar-toggleable-md" class (or any variant i.e. -sm, -md, -lg, -xl) from the navbar I get the following:

however, I should be getting the following:

The navbar contains the following markup, and works perfectly in browser:

<nav id="topnav" class="navbar navbar-inverse fixed-top top-bar">
  <div class="container">
    <button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#main-menu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <%= link_to 'MyApp', root_path, class: 'navbar-brand' %>

    <div id="main-menu" class="collapse navbar-collapse">
      <div class="navbar-nav mr-auto">
        <%= active_link_to fa_icon('dashboard fw', text: 'Dashboard'), admin_dashboard_index_path, class: 'nav-item nav-link' %>
        <%= active_link_to fa_icon('building fw', text: 'Organisations'), admin_organisations_path, class: 'nav-item nav-link' %>
        <%= active_link_to fa_icon('book fw', text: 'Courses'), admin_courses_path, class: 'nav-item nav-link' %>
      </div>

      <div class="navbar-nav">
        <span class="navbar-text">
          <%= fa_icon 'user-circle', text: current_admin_user.email %>
        </span>
        <%= link_to destroy_admin_user_session_path, class: "nav-item nav-link", method: :delete do %>
          <%= fa_icon 'sign-out fw', class: 'hidden-md-up' %>
          Log out
        <% end %>
      </ul>
    </div>
  </div>
 </nav>

Any ideas?

[Thomas Walpole]

Poltergeist doesn't render the pages, it uses PhantomJS for that. The latest release version of PhantomJS is 2.1.1 which is roughly equivalent to a 5 year old version of Safari. So, assuming the html in the page (page.html) is what you expect and it's only the look/layout that's off odds are you're using CSS that isn't supported by it. There is a PhantomJS 2.5beta that you can try that acts more like a modern browser but it is very much still a beta. Closing this because it's not a Poltergeist issue.

[Pablo Vizcay]

Being caught in the same problem with bootstrap 4.1 and poltergeist 2.1.1. Probably I must move to headless chrome-driver now to solve it.