在水豚測試中關閉動畫

Question

我的網頁上有很多動畫，這實際上減慢了水豚的測試速度，因爲水豚常常需要等到某個元素已經動畫，因爲它開始隱藏起來。

我發現所有基於jQuery的動畫此解決方案：

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

但是我使用Twitter的引導，最動畫從引導由CSS 3（使用JavaScript後備）製成。所以我的問題是，有沒有辦法在測試中轉換CSS 3轉換和動畫？

Answer 1

您可以嘗試創建一些轉場重置並將其應用於特定元素。

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

您也可以將其引導後

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

你可以使其更加具體

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

適用於所有並把這個CSS

或只有時間

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