[Rails] Disable css & jquery animations in Capybara tests with Chome running on Selenium

readme.md

You have to create the zip file disable_animations.zip which includes the manifest.json as well as the disable_animations.js. Put this file wherever you like within your rails project and adjust the extension path accordingly.

disable_animations.js

var disableAnimationStyles = '-webkit-transition: none !important;' +
                             '-moz-transition: none !important;' +
                             '-ms-transition: none !important;' +
                             '-o-transition: none !important;' +
                             'transition: none !important;' +
                             'transition-property: none !important;' +
                             '-o-transition-property: none !important;' +
                             '-moz-transition-property: none !important;' +
                             '-ms-transition-property: none !important;' +
                             '-webkit-transition-property: none !important;' +
                             'transform: none !important;' +
                             '-o-transform: none !important;' +
                             '-moz-transform: none !important;' +
                             '-ms-transform: none !important;' +
                             '-webkit-transform: none !important;' +
                             'animation: none !important;' +
                             '-o-animation: none !important;' +
                             '-moz-animation: none !important;' +
                             '-ms-animation: none !important;' +
                             '-webkit-animation: none !important;'


window.onload = function() {
  var animationStyles = document.createElement('style');
  animationStyles.type = 'text/css';
  animationStyles.innerHTML = '* {' + disableAnimationStyles + '}';
  document.head.appendChild(animationStyles);
  $.fx.off = true;
};

manifest.json

{
  "manifest_version": 2,
  "name": "Disable animations",
  "description": "This extension will disable all animations",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["disable_animations.js"]
    }
  ],
  "author": "Sven Dunemann <https://github.com/forelabs>"
}

tests_helper.rb

# ...
# reduced setup
Capybara.register_driver :chrome do |app|
  options = Selenium::WebDriver::Chrome::Options.new(
    extensions: ["#{Rails.root}/spec/support/capybara/disable_animations.zip"]
  )
  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end
Capybara.javascript_driver = :chrome