Capybaraテストでアニメーションをオフにする

Question

カピバラでは、要素がアニメーション化されるまで待たなければならないことが多いため、カピバラでのテストは実際には遅くなるため、ページにはアニメーションがたくさんあります。

私はすべてのjQueryベースのアニメーションのために、この解決策が見つかりました：私はTwitterのブートストラップとストラップから最もアニメーションを使用ししかし

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

は、CSS 3（ジャバスクリプトフォールバック付き）で行われます。だから私の質問は、テストでCSS 3トランジションとアニメーションを切り替える方法があるということですか？

Answer 1

一部のトランジションリセットを作成し、特定のエレメントに適用することができます。あなたはまた、すべてに適用し、あなたはそれより具体的な

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

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

作ることができますブートストラップ

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

後、このCSSを置くことができ

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

または唯一の時間

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