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

Question

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

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

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

我在 Capybara 匹配器中设置了一些标准 Ruby sleep x 和 wait: x。还看过一些文章，其中包含强制水豚等待的自定义方法示例，但那些需要 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-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

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

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

javascript

ajax

ruby-on-rails

capybara

rspec-rails