Why is Capybara not matching new DOM elements inserted after an AJAX call?

Question

I'm using Rails 5, and Capybara. I created a simple Rails view search form. Upon submit, vanilla JS takes over with preventDefault and performs AJAX to get search results. The results are then packaged into a table, and appended to the DOM. The page works fine in development, however, capybara is not cooperating in my feature specs:

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

Just as a sanity check, I matched css that was already present in my view, so Capybara can do some matching correctly, just not the JS-introduced elements.

I've set some standard Ruby sleep x , and wait: x in the Capybara matchers. Also have seen some articles with examples of custom methods to force Capybara to wait, but those require jquery which I am not using. I expect capybara to handle this vanilla JS, but have had no luck getting it to work here. Please help.

View:

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

Your scenario statement isn't tagged with js: true which, if using the normal capybara configuration, means you're using the default rack-test driver which doesn't support JS. You will need to configure tests that depend on JS behaviors to use a driver that supports JS - see https://github.com/jnicklas/capybara#selecting-the-driver . You will also need to configure the same tests not to use transactional testing - see https://github.com/jnicklas/capybara#transactions-and-database-setup and https://github.com/DatabaseCleaner/database_cleaner#rspec-with-capybara-example