Skip to content

Instantly share code, notes, and snippets.

@andyjbas
Last active June 23, 2020 13:33
Show Gist options
  • Save andyjbas/9962218 to your computer and use it in GitHub Desktop.
Save andyjbas/9962218 to your computer and use it in GitHub Desktop.
Disable CSS Animations in Poltergeist & Phantomjs. Phantomjs does not like to wait for animations, and you can run in to nasty test flickers because of it. This pattern will disable animations in test env, and not touch any app code.
# env.rb or spec_helper.rb

Capybara.register_driver :poltergeist do |app|
  opts = {
    extensions: ["#{Rails.root}/features/support/phantomjs/disable_animations.js"] # or wherever
  }

  Capybara::Poltergeist::Driver.new(app, opts)
end

Capybara.javascript_driver = :poltergeist
// disable_animations.js
var disableAnimationStyles = '-webkit-transition: none !important;' +
                             '-moz-transition: none !important;' +
                             '-ms-transition: none !important;' +
                             '-o-transition: none !important;' +
                             'transition: none !important;'

window.onload = function() {
  var animationStyles = document.createElement('style');
  animationStyles.type = 'text/css';
  animationStyles.innerHTML = '* {' + disableAnimationStyles + '}';
  document.head.appendChild(animationStyles);
};
@amandapouget
Copy link

CJBridge's solution worked for us and seemed preferable over the middleware solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment