Poltergeist and Bootstrap Modals

Sep 20, 2013
86a035aafaaf39fe160a0644dc3be841

While working on a Rails application that included Capybara Integration tests, we ran into the issue when of setting up PhantomJs and Poltergeist.

Our application was not using full Bootstrap, but Modals. Capybara's tests where just running fine locally with Selenium and Firefox, but we wanted to run our tests on Travis CI and Travis uses PhantomJs as a headless server.

All of the tests that had been previously working fine with Selenium were now failing with Poltergeist. At first we thought that Poltergeist was the reason they were failing.

After a bit of debugging, we realized that Bootstrap's Modals animation was causing the issue. With Selenium it waits for the animation to happen before trying to perform the next step, but with Poltergeist there is no wait.

Our next step was to look for a way to disable animations in test mode, but Bootstrap Modals doesn't have a feature to disable it. The solution was simple, a new disable-transition.css file was added with the following content:

.modal.fade {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
} 

Then the following line was added to the Rails layout file just after loading all of the CSS assets:

<%= stylesheet_link_tag 'disable-transition' if Rails.env.test? %>

This way Bootstrap's Modals animations are disabled only if ran within a test environment, with this we keep Poltergeist working happily, our tests run slightly faster, and we can continue relying on Travis CI for continuous integration.

Thanks for reading.

blog comments powered byDisqus