Capybara（v2）経由のブートストラップモーダルとのやり取りに問題があります

Question

Railsアプリケーションでは、ドライバでCapybaraを使用してRspecでjQuery TokenInput fieldのBootstrap modalをテストしようとしています。

click_link 'Create Team Modal' 
sleep 1 

within('div#modal_popup') do 
    fill_in 'input#token-input-team_name', with: 'Fancy team name' 
    sleep 1 
    fill_in 'input#token-input-team_name', with: '\t' 
    sleep 1 

    click_button 'Create Team' 
end 

page.should have_content('Fancy team name') 

• クリックボタンは、それが
• を作成]を選択し取得するには、Tabキーを押しをシミュレートし、チーム名
• とTokenInputにモーダル
• 塗りつぶしを取得するために、次のように問題になっている部分がありますチーム
• は、名前を確認してくださいページ

に現れるこれはのみ動作しますそれらのすべてがsleep 1である。それ以外の場合、Capybaraはhave_contentでクラッシュし、最終的にはチーム名が決して適切に選択できなかったため、サーバーエラーが発生します。他のブートストラップモーダルなし TokenInputフィールドは、ロードする前にsleep 1を必要としません。

これまでに述べたように、睡眠を取り除いてこれが正常に進行する方法はありますか？ Capybara 2は何かをテストするためにデフォルトの待機時間内に待機するので、wait_untilを（理由があって）取り出しましたが、それは上記のテストに反映されていないようです。カピバラがこのモードに入る/出る際にその待ち時間に従事していないかのようです。誰でもこれに関する経験はありますか？ Rails 3.2.10、Rspec 2.12、Capybara 2、capybara-webkit 0.14.0、TokenInput 1.6を使用しています。

Answer 1

は、私がテストENVでCSSをfalowing追加することをお勧めレイア​​ウト/ applicaiton.html.erb

<% if Rails.env.test? %> 
<style type="text/css"> 
    .modal.fade, .fade { 
     -webkit-transition: opacity 0.01s; 
     -moz-transition: opacity 0.01s; 
     -ms-transition: opacity 0.01s; 
     -o-transition: opacity 0.01s; 
     transition: opacity 0.01s; 
    } 
</style> 
<%end%> 

Answer 2

、テストENVでアニメーションを無効にしてみてください：

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

    .modal { 
    display: none !important; 
    } 

    .modal.in { 
    display: block !important; 
    } 

    .modal-backdrop { 
    display: none !important; 
    } 

がこの中で、ボディのJS追加します：

$(".fade").removeClass("fade"); 

これは、カピバラとブートストラップの問題のほとんどを解決しました。

Answer 3

私達はちょうどこの操作を行うと、（$('.tp-header-login'をクリックするなど）に動作するようです：* Rails.env.___?ハックを避けたい方のために

# instead of find(".tp-header-login") 

find(".tp-header-login") # still do the find so you are sure its loaded then... 
execute_script "$('.tp-header-login').click()" 

Answer 4

を、以下のは、これまで（仕事にに見えました - 指が交差している）、ブートストラップベースのモーダルでjQuery UI drag-and-drop functionalityのテストで問題を回避できます。

def wait_for_modal_to_appear 
    modal = wait_until { 
    # Look for the modal by ID/whatever... 
    } 
    raise Capybara::ModalNotFound.new('...') if modal.nil? 
    return modal 
end 

はなおさらしようとしたとき、我々は偽の問題を抱えたドラッグ・アンド・ドロップ：

まず、我々はすでにこのようなヘルパーメソッドを使用して、表示されるモーダルのためを「待機中」でしたそのモーダルの要素最近、私が働いている会社で緊急展開の必要性につながっ

page.execute_script("document.getElementById('#{modal[:id]}').classList.remove('fade');") 

---

*ただ、このようなハック：以下のコードの追加は、はがトリックを行っているようだ、ちょうどreturn行の前に追加しましたwith ...悪いコードチェンジは、if Rails.env.production?修飾子によってのみ起動されたため、そのコードを生産に移しました。それ以外の場合はテストスイートの半分で失敗してしまいます。