Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Disable CSS Animations in Poltergeist & Phantomjs. Phantomjs does not like to wait for animations, and you can run in to nasty test flickers because of it. This pattern will disable animations in test env, and not touch any app code.
# 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);
};
@workgena

This comment has been minimized.

Show comment Hide comment
@workgena

workgena Oct 3, 2016

Big thanks!
It helped me, but I change only time of animations

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

workgena commented Oct 3, 2016

Big thanks!
It helped me, but I change only time of animations

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

This comment has been minimized.

Show comment Hide comment
@CJBridges

CJBridges Mar 31, 2017

This approach looked really good, but only almost worked for me!

What I found is that on at least one failing spec, the onload hook was intermittently running after my spec actions had started (i.e. finding and clicking on things). Any good approaches for making certain that this has run before moving forward in the spec?

Consider at least the cases of:

  1. Fresh page load at beginning of spec using page.visit or similar.
  2. Navigation triggered by page action (e.g. clicking a button submits a form and navs to a show page)

Also consider that I'd like to not require developers to special case any code on each example, which would really get complicated around (2).

This approach looked really good, but only almost worked for me!

What I found is that on at least one failing spec, the onload hook was intermittently running after my spec actions had started (i.e. finding and clicking on things). Any good approaches for making certain that this has run before moving forward in the spec?

Consider at least the cases of:

  1. Fresh page load at beginning of spec using page.visit or similar.
  2. Navigation triggered by page action (e.g. clicking a button submits a form and navs to a show page)

Also consider that I'd like to not require developers to special case any code on each example, which would really get complicated around (2).

@CJBridges

This comment has been minimized.

Show comment Hide comment
@CJBridges

CJBridges Apr 1, 2017

As a followup, I found that triggering earlier in the loading cycle worked consistently:

document.addEventListener('DOMContentLoaded', function() {
  // code here as in the gist
}

As a followup, I found that triggering earlier in the loading cycle worked consistently:

document.addEventListener('DOMContentLoaded', function() {
  // code here as in the gist
}
@leorush

This comment has been minimized.

Show comment Hide comment
@leorush

leorush May 21, 2017

Hi guys, you might like this approach, by using middleware:
https://gist.github.com/rilian/c259360c3ffa9562b29ec552c6b2b6c6

Helped me a lot

leorush commented May 21, 2017

Hi guys, you might like this approach, by using middleware:
https://gist.github.com/rilian/c259360c3ffa9562b29ec552c6b2b6c6

Helped me a lot

@mandysimon88

This comment has been minimized.

Show comment Hide comment
@mandysimon88

mandysimon88 Sep 21, 2017

CJBridge's solution worked for us and seemed preferable over the middleware solution.

CJBridge's solution worked for us and seemed preferable over the middleware solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment