Warum stimmt Capybara nicht mit neuen DOM-Elementen überein, die nach einem AJAX-Aufruf eingefügt wurden?

Question

Ich verwende Rails 5 und Capybara. Ich habe ein einfaches Suchformular für die Rails-Ansicht erstellt. Nach dem Übergeben übernimmt vanilla JS mit preventDefault und führt AJAX aus, um Suchergebnisse zu erhalten. Die Ergebnisse werden dann in eine Tabelle verpackt und an das DOM angehängt. Die Seite funktioniert in der Entwicklung gut, Capybara kooperiert jedoch nicht in meinen Feature-Spezifikationen:

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

Genau wie eine Plausibilitätsprüfung, ich passte css, die bereits in meiner Ansicht vorhanden war, so Capybara kann einige Übereinstimmung richtig tun, nur nicht die JS-Elemente eingeführt.

Ich habe einige Standard-Ruby sleep x und wait: x in den Capybara Matcher gesetzt. Habe auch einige Artikel mit Beispielen für benutzerdefinierte Methoden gesehen, um Capybara zu zwingen zu warten, aber diese erfordern jquery, die ich nicht verwende. Ich erwarte, dass Capybara mit diesem Vanille-JS fertig wird, aber ich hatte kein Glück, es hier zum Laufen zu bringen. Bitte helfen Sie.

Ausblick:

<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>  

Snippet von Vanille JS:

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 { ... 

Feature-Test:

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

Ihr Szenario-Anweisung nicht mit js: true markiert, die, wenn die normale Verwendung Capybara-Konfiguration bedeutet, dass Sie den Standard-Rack-Test-Treiber verwenden, der nicht unterstützt JS. Sie müssen Tests konfigurieren, die von JS-Verhalten abhängen, um einen Treiber zu verwenden, der JS unterstützt - siehe https://github.com/jnicklas/capybara#selecting-the-driver. Sie müssen auch dieselben Tests konfigurieren, um keine Transaktions-Tests zu verwenden - siehe https://github.com/jnicklas/capybara#transactions-and-database-setup und https://github.com/DatabaseCleaner/database_cleaner#rspec-with-capybara-example