なぜカピバラはAJAXコールの後に挿入された新しいDOM要素と一致しないのですか？

Question

私はRails 5とCapybaraを使用しています。簡単なRailsビューの検索フォームを作成しました。送信時に、vanilla JSはpreventDefaultを引き継ぎ、AJAXを実行して検索結果を取得します。結果はテーブルにパッケージ化され、DOMに追加されます。このページは開発には問題ありませんが、capybaraは私の仕様に協力していません。

expected to find css "#search_results table" but there were no matches

サニティチェックと同じように、私は自分のビューに既に存在していたcssとマッチしました。そのため、CapybaraはJSが導入した要素だけでなく、正確にマッチングを行うことができます。

私は、いくつかの標準Ruby sleep xとwait: xをCapybaraマッチャーに設定しました。また、カピバラを待たせるカスタムメソッドの例をいくつか見てきましたが、それらは私が使用していないjqueryを必要とします。私はカピバラがこのバニラJSを扱うことを期待していますが、ここではうまく動作することはありませんでした。助けてください。

ビュー：バニラJSの

<div id='media_search'> 
    <%= form_for(:search, method: "get", html: {class: "navbar-form navbar-left form-inline"}) do |f| %> 
    <%= f.label :search %> 
    <%= f.text_field :search, id: "media_search_field", class: "form-control", placeholder: "song, album, or artist" %> 
    <%= f.submit "Submit", id: "media_search_submit", class: "btn btn-default" %> 
    <% end %> 

    <div id='search_results'></div> 
</div>  

スニペット：

var ajaxSearchMedia = function (query, successCb) { 
    var request = new XMLHttpRequest(); 
    request.open('GET', '/search?query=' + query, true); 

    request.onload = function() { 
    if (request.status >= 200 && request.status < 400) { 
     // Success! 
     var songs = JSON.parse(request.responseText); 
     successCb(songs); 
    } else { ... 

機能テスト：

scenario "with results" do 
    visit '/' 

    fill_in "media_search_field", with: "song" 

    click_on "media_search_submit" 

    expect(page).to have_css("#search_results table") 
end 

Answer 1

あなたのシナリオ文は、通常のを使用している場合、js: trueでタグ付けされていませんカピバラ設定は、サポートしていないデフォルトのラックテストドライバを使用していることを意味しますJS。 JSをサポートするドライバを使用するには、JSの動作に依存するテストを構成する必要があります（https://github.com/jnicklas/capybara#selecting-the-driverを参照）。トランザクションテストを使用しない同じテストを構成する必要もあります。https://github.com/jnicklas/capybara#transactions-and-database-setupとhttps://github.com/DatabaseCleaner/database_cleaner#rspec-with-capybara-example