クラスがRspecのnavタグに追加されているかどうかをテストする方法

Question

ユーザが私が持っているWebページをスクロールダウンすると、クラスがnavタグに追加され、ページの位置が変更されます。ユーザーが上にスクロールバックすると、クラスが削除され、元の位置に戻ります。私はこの機能が動作していることを知っています。私はこの機能をテストするためにRspecテストを書こうとしています。私は成功せずにカピバラを使用しようとしてきました。テストのスクロール部分は動作しますが、追加されたクラスのHTMLとCSSを検索することはできません。

nav idは "views"であり、追加されるクラスは "on_nav"です。これは、これまでのテストです：

scenario 'Scroll down' do 
    visit '/' 
    page.execute_script "window.scrollBy(0,1000)" 
    expect(page.html).to include('class="on_nav"') 
    end 

エラーメッセージは、私は、ブラウザ内の要素を検査するとき、私はそれを見ることができるにもかかわらず、ページ上の「「クラス= on_nav」は見つけることができないということですこれらは。私が試したさまざまなランダムコマンドのうちのいくつかは、Googleでこれを試してみたときに私がオンラインで見た答えから、私には同じエラーが出る、あるいは私の構文が間違っていると私はそれを修正する方法を見つけることができないと言う：

expect(page.html).to have_selector("#on_nav") 
    expect(page).to have_css("nav#views.on_nav") 
    expect(page.has_css?(".on_nav")).to eq(true) 

私は、Webテストを書くには完全に新しいですが、私はオンライン私が見つけた答えを知っている（CSSとthis articleをチェック例えば約this questionためアボカピバラとのテスト要素）は私のために働いていません。私はnavタグをテストしようとしているので問題が起こっている可能性があります。それも可能ですか？

Answer 1

Doing expect(page.html).to include('class="on_nav"')は決して行うべきではないので、それを示唆している記事/チュートリアルのすべてを無視する必要があります。ページソースを文字列として取得することで、指定された条件が満たされるのを待つ/再試行するCapybaras機能を完全に無効にします。デフォルトでは、あなたの他の試み

に関して

セレクタタイプがある：CSS、そうexpect(page.html).to have_selector("#on_nav")はあなたが望むものではありません「on_nav」のidを持つ要素を探し、そしてpage.htmlあなたを呼び出すことによってでしょう文字列がパースされて静的な文書に戻されるため、待機/再試行の動作が無効になりました。

expect(page.has_css?(".on_nav")).to eq(true)は、あなたが望むものに近づいているが、あなたの期待が

expect(page).to have_css("nav#views.on_nav")は、ページ上の要素の存在を検証するための正しい方法であるだけで、真または偽のためにあるので、便利なエラーメッセージを提供することはありません。それは、idがviewsであり、クラスがon_navである可視の< nav>要素を探し、その要素が存在するためにCapybara.default_max_wait_time秒まで待機/再試行します。それがうまく動作しない場合、要素がページに表示されないか、セレクタが要素と実際には一致しないか、scrollByを呼び出すときにクラスを追加/削除するJSが機能していません。セレンを使用している場合は、scrollByを呼び出した後にドライバを一時停止し、ブラウザの要素を調べてクラスが期待どおりに追加/削除されていることを確認し、実際のナビゲーションHTMLを質問に追加します。