Netskin Logo

Disable CSS Transitions in RSpec

#rails
#rspec
by Ingo Albers on 20.04.2022

When running feature tests we sometimes encounter the problem that the automatic test client cannot find an element in the expected position. This could happen because of transitions of elements on the page like fade outs/ins, collapsing, expanding or similar actions that cause visual elements to be moved or hidden on the page. To avoid this problem we introduced a way to disable all transitions by simply adding a class to the body element, which will set all transitions to none.

.no-transitions * {
  transition: none !important;
}
!!!
%html
  %body{class: ("no-transitions" if Rails.configuration.x.no_transitions)}
   = yield

By default this setting is set to true in our test environment settings. This allows us to run the whole test or specific example with transitions enabled.

config.before(:example) do
  Rails.configuration.x.no_transitions = false
end

Introducing this helped us greatly reduce failures because of flaky feature specs.

Happy Coding!

Resources

❮ Connecting Android Devices via TCP instead of USB
Retrieve Provider's Job-Id from Delayed-Job Adapter ❯
Netskin Logo