Two steps for faster browser specs

March 11, 2013Posted by Tom Meier

Keeping specs fast is a never ending battle for the average Rails developer. There are 2 quick lines of javascript that can make excellent and stable improvements to spec speed performance.

Most people are aware of JQuery giving the option to disable animations (see – fx.off), we can disable this in test mode making all browser based specs faster by skipping JS animation. This is acceptable, as we know it works, it’s still being triggered but skips the time-consuming part for our specs.

The same can be said for CSS transformations; sliding a menu down and hiding a div for example. We know they work, but don’t want our specs held up by the animation.

To acheive this, simply apply the following code to your Rails app :

app/views/layouts/_spec_performance.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<% if Rails.env.test? -%>
  <%= content_for :head do %>
    <style type="text/css">
      .notransition * {
        /*CSS transitions*/
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        -ms-transition: none !important;
        transition: none !important;
        /*CSS transition properties*/
        -webkit-transition-property: none !important;
        -moz-transition-property: none !important;
        -o-transition-property: none !important;
        -ms-transition-property: none !important;
        transition-property: none !important;
        /*CSS transforms*/
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -o-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        /*CSS animations*/
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
    }
    </style>
  <% end %>

  <script type="text/javascript">
    $.fx.off = true;
    $('body').addClass('notransition');
  </script>
<% end -%>
app/views/layouts/any_layout.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head>
  <%= yield :head %>
  </head>
  <body>
  ...
  <%= yield %>
  ...
  <%= render partial: "layouts/spec_performance" %>
  </body>
</html>

Thats it. I’m seeing ~31% speed improvements on our mobile specs, and ~18% speed improvements on our normal Capybara features.

Tagged ruby, rails, programming, rspec, testing, capybara, selenium