16

我的页面上有很多动画,这真的减慢了我在 capybara 中的测试,因为 capybara 通常必须等到元素被动画化,因为它开始隐藏。

我为所有基于 jQuery 的动画找到了这个解决方案:

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

但是我使用 twitter bootstrap,并且 bootstrap 中的大多数动画都是由 CSS 3 制作的(带有 javascript 后备)。所以我的问题是,有没有办法在测试中打开 CSS 3 过渡和动画?

4

3 回答 3

25

Capybara v3.2.0开始:

Capybara.disable_animation = true
于 2020-04-02T13:05:07.293 回答
11

您可以尝试创建一些过渡重置并将其应用于特定元素。

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

您也可以将其应用于 ALL 并将此 css 放在 Bootstrap 之后

* {
    -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;
}
于 2013-10-29T15:26:02.047 回答
6
# 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);
};

或只有时间

var disableAnimationStyles = '-webkit-transition-duration: .0s !important;' +
  '-o-transition-duration: .0s !important;' +
'transition-duration: .0s !important;';
于 2017-01-16T11:45:25.840 回答