Tắt hoạt ảnh trong thử nghiệm Capybara

Question

Tôi có rất nhiều hoạt ảnh trên trang của mình, điều này thực sự làm chậm các thử nghiệm của tôi trong capybara vì capybara thường phải chờ cho đến khi phần tử được làm động, vì nó bắt đầu ẩn.

tôi tìm thấy giải pháp này cho tất cả các hình ảnh động jQuery dựa trên:

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

Tuy nhiên tôi sử dụng twitter bootstrap và hầu hết các hình ảnh động từ bootstrap được thực hiện bởi CSS 3 (với dự phòng javascript). Vì vậy, câu hỏi của tôi là, có cách nào để chuyển CSS 3 chuyển tiếp và hình ảnh động trong các bài kiểm tra?

Answer 1

Bạn có thể thử tạo lại một số chuyển đổi và áp dụng nó trên một phần tử cụ thể.

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

Bạn cũng có thể áp dụng nó cho TẤT CẢ và đặt css này sau khi Bootstrap

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

Bạn có thể làm cho nó cụ thể hơn

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

hoặc chỉ thời gian

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