為什么Capybara與AJAX調用后插入的新DOM元素不匹配？

Question

我正在使用Rails 5和Capybara。 我創建了一個簡單的Rails視圖搜索表單。 提交后，香草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匹配器中的wait: x 。 還看到了一些帶有自定義方法示例的文章，這些示例可以強制Capybara等待，但是這些文章需要我未使用的jquery。 我希望水豚能處理這種普通的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>    

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

功能測試：

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: 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-帶水豚的例子