要素がすでにDOMに存在していても視覚的に表示されているかどうかをアサートする方法は？

Question

私はCapybara/PoltergeistとRSPECを使って機能テストを行っています。 :js => trueも有効です。

ページが読み込まれた後、ページが準備できたら、クリックして開閉するメニューバーと対話したい、コンテンツ付きのCSSアニメーションが必要です。今、そのコンテンツは既にHTMLページにありますが、display: noneのCSSクラスを切り替えることができます。

テスト中にのみCSSのトランジションを無効にするには、このスニペットが必要です。

- if Rails.env.development? 
     :javascript 
     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); 
     }; 

写真1（オープン）：

---

写真2（オープン）：

---

私の最初のステップ、私はロードするページを待ち、I画像に表示されている灰色の四角形をクリックすると、その灰色のボックスが開きます。それは写真1です。しかし、私のコードは、私が探しているものを渡します（写真2）は表示されません。

私がスクリーンショットを撮る前にsleep(4)を入れた場合、写真2の結果が出ますが、テストに合格します。これは私がスクリーンショットを撮るためにそこに睡眠を追加してから私が最初の例と同じアサーションを取っているので、偽陽性です。

（各種コメントアウトコードは、私が試してみました他のものです。）

日の終わりに、私は「SILVER（ボクサーブリーフ）が」成功し、視覚的に表示されている場合は主張したいと思います。私はPoltergeist/CapybaraがHTMLソースにそのテキストが存在するかどうかを確認するだけであるかどうかはわかりませんが、確認したくありません。

CSSクラス "visible"が追加されていなかったためにメニューが表示されないという問題がありましたが、そのコードをサイトに保存していても、このテストはボックスが表示されます。

このテキストが表示されているかどうかをどのようにアサーションするかの提案は視覚的にありますか？

私の現在の仕様：

it "should open all available fabrics" do 
     find(:xpath, '//*[@id="sister-selector"]/div/div[3]/div').click 
     wait_for_ajax 
     expect(page).to have_css('.current-selection.sister-selector-mobile.disclosed') 
     expect(page).to have_css('.alternative-selections.sister-selector-mobile.visible') 
     take_screenshot 
     # expect(find("#sister-selector-mobile#{boxer_briefs_silver.id}").visible?).to be_falsey 
     # find(:css, "#sister-selector-mobile#{boxer_briefs_silver.id}").should be_visible 
     # expect(find("#sister-selector-mobile#{boxer_briefs_silver.id}", :visible => false)).to have_content(boxer_briefs_silver.name.upcase) 
end 

HTML：

<div class="current-selection sister-selector-mobile disclosed"> 
    <div class="div" style="position: relative"> 
    <i class="fa fa-chevron-down"></i> 
    <i class="fa fa-chevron-up"></i> 
    18 Hour Jersey 
    <br> 
    <span class="category"> 
     (Boxer Briefs) 
    </span> 
    </div> 
</div> 

<div class="alternative-selections sister-selector-mobile visible"> 
    <a href="#" data-navigate="product_detail" data-navigate-options="silver-boxer-brief"> 
    <div class="selection"> 
     <div class="the-line"></div> 
     <div> 
     <div class="heading" id="sister-selector-mobile51"> 
      Silver 
      <br> 
      <span class="category"> 
      (Boxer Briefs) 
      </span> 
     </div> 
     </div> 
    </div> 
    </a> 
    <a href="#" data-navigate="product_detail" data-navigate-options="3x3-boxer-briefs"> 
    <div class="selection"> 
     <div class="the-line"></div> 
     <div> 
     <div class="heading" id="sister-selector-mobile98"> 
      3x3 Boxer Briefs 
      <br> 
      <span class="category"> 
      (Boxer Briefs) 
      </span> 
     </div> 
     </div> 
    </div> 
    </a> 
</div> 

Answer 1

あなたは視認性のチェックのためにカピバラのデフォルト値を変更していないと仮定すると、それだけで

expect(page).to have_content(boxer_briefs_silver.name.upcase) 

またはあなたの場合でなければなりませんページの一部にスコープを設定したい場合は、このようにしてください（セレクタからの推測 - 投稿実際のHTMLは

#do your click here 
menu_bar = find('#sister-selector') 
expect(menu_bar).to have_text(boxer_briefs_silver.name.upcase) 

はまた、私はあなたのテストがjs: trueメタデータを持っていない参照）これを簡単になるだろうので、私はあなたがカピバラを持っていると仮定します。それ以外の場合はJSはサポートされず、このテストは本当に

it "should open all available fabrics" do 
    menu_bar = find('#sister-selector') 
    menu_bar.find(:xpath, './/div/div[3]/div').click 
    expect(menu_bar).to have_text(boxer_briefs_silver.name.upcase)  
end