如何用rspec测试jQuery fadeOut / fadeIn

Question

我试图找出如何用rspec测试jQuery fadeIn / fadeOut行为。我确实有以下情况：

页面上有一个复选框。如果选中复选框，则会显示一个额外的输入字段。如果没有，则隐藏输入字段。用于显示和隐藏输入字段的动画是jQuery fadeIn / fadeOut效果。

在我的特性测试中，我想检查当选中复选框时，输入字段显示在页面上，如果不选中，则不显示输入字段。现在的问题是，当我在rspec中调用check('#checkbox_recurring')，然后立即测试时，如果输入字段在页面上，它可能会失败，因为jQuery动画尚未完成。

如何测试这样的场景？

谢谢你的帮忙!

Answer 1

我不知道如何让jQuery fadeIn工作，但我经常切换。我希望这样可以。

<html>
<head>
<style>
  #input {
    font-weight: bold;
    font-size: 16px;
  }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 </head>
 <body>
<input type='checkbox' id='check'>Toggle</button>
<input id = 'input' placeholder = 'name'></input>
<script>
$( "#check" ).click(function() {
  $( "#input" ).toggle( "slow" );
});
</script>
</body>
</html>

您需要使用ruby sleep (time)来等待jQuery/AJAX元素完成。这是一个解释Watir等待方法的链接。

我使用Rspec和Watir-Webdriver来实现浏览器的自动化。这里有一个快速的片段，这可能更干净，但它应该给你一些方向，为你想要完成的事情。

require 'rspec'
require 'watir-webdriver'


describe 'fade' do
  before(:all) do
    @browser = Watir::Browser.new :chrome
    @browser.goto('file:///C:/Users/bashir.osman/Desktop/test.html')
  end
  it 'checks fade' do
   puts "so...#{@browser.input(:id, 'check').exists?}"
   @browser.input(:id, 'check').click
   sleep 1
   exists1 = @browser.input(:id, 'input').visible?
   if exists1 == false
     puts 'Currently input is not visible'
     puts 'Will click input again'
     @browser.input(:id, 'check').click
     sleep 1
     exists2 = @browser.input(:id, 'input').visible?
     exists2.should == true
   end
  end
end

这就是测试所要做的：

1. 单击复选框
2. 检查#input是否可见。这应该是假的。
3. 再次单击复选框
4. 检查`#input是否可见。这将返回true。

我不会使用.exists?，因为这总是返回true，因为元素存在于DOM中。如果元素存在并在页面上可见，则present?返回true。根据元素是否可见，visible?返回true/false。