Turn off animations in Capybara tests

问题:

I have a lot of animations on my page, which really slows down my tests in capybara because capybara often have to wait until a element has been animated, as it starts out hidden.

I found this solution for all jQuery based animations:

<%= javascript_tag '$.fx.off = true;' if Rails.env.test? %>

However i use twitter bootstrap and most animations from bootstrap is made by CSS 3 (with javascript fallback). So my question is, is there a way to turn of CSS 3 transitions and animations in tests?

回答1:

You can try to create some transition reset and apply it on a specific element.

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

You can also apply it to ALL and place this css after Bootstrap

* {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

You can make it more specific

div, a, span, footer, header {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

回答2:

# 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);
};

or only time

var disableAnimationStyles = '-webkit-transition-duration: .0s !important;' +
  '-o-transition-duration: .0s !important;' +
'transition-duration: .0s !important;';