Turn off animations in Capybara tests

Question

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?

Answer 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;
}