为什么Capybara不匹配AJAX调用后插入的新DOM元素

Question

我使用的是Rails 5和Capybara。我创建了一个简单的Rails视图搜索表单。提交后，vanillaJS接管preventDefault并执行AJAX来获得搜索结果。然后将结果打包到一个表中，并附加到DOM中。该页面在开发中运行良好，然而，水豚不配合我的功能规范：

CCD_ 1。

作为一个健全性检查，我匹配了我的视图中已经存在的css，所以Capybara可以正确地进行一些匹配，只是不匹配JS引入的元素。

我在Capybara匹配器中设置了一些标准的Ruby sleep x和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的默认机架测试驱动程序。您需要配置依赖JS行为的测试，以使用支持JS的驱动程序-请参阅https://github.com/jnicklas/capybara#selecting-驾驶员。您还需要将相同的测试配置为不使用事务性测试-请参阅https://github.com/jnicklas/capybara#transactions-以及数据库设置和https://github.com/DatabaseCleaner/database_cleaner#rspec-以水豚为例