Capybara 在 Foundation 导航栏中找不到按钮

Question

我有一个使用 Zurb 的 Foundation 5 的 Rails 3.2 应用程序。我实现了一个非常典型的导航顶部栏，其样式为 Foundation，并包含一个简单的快速搜索字段。由于 F5 网格的工作方式，搜索文本字段是一个 div，而提交按钮位于相邻的 div 中。这是HTML/erb的相关sn-p：

<ul class="left">
  <li class="has-form">
    <div class="row collapse">
      <div class="small-20 columns">
        <%= form_tag search_students_path, method: 'get' do %>
        <%= text_field_tag 'search', nil, placeholder: 'Student ID...' %>
      </div>
      <div class="small-4 columns">
        <%= submit_tag '&#xf002;'.html_safe, class: 'button expand right-round fa fa-search', name: nil %>
      </div>
    </div>
    <% end %>
  </li>
</ul>

这是我规范中的相关描述块：

describe "with invalid input" do
  before do
    fill_in 'search', with: 'invalid'
    first('.button').click
  end
  it { should have_error_message }
  it { should have_selector('title', text: full_title('Dashboard')) }
end

在实际操作中，搜索表单可以正常工作。如果您提交无效数据（它只需要数字数据），它将抛出一条消息并将您发送回您来自哪里。但是测试失败了，因为 Capybara 找不到要单击的按钮。这是来自控制台的错误消息：

Failure/Error: first('.button').click
     NoMethodError:
       undefined method `node_name' for nil:NilClass

相信我，我已经尝试了所有在 API 文档中可以找到的 Capybara 匹配器 - 没有任何效果。然后，根据我在网上找到的内容，我将提交按钮移动到与输入字段相同的 div 中。所有测试立即通过。

显然，从设计的角度来看，我无法忍受 - 它破坏了基金会导航栏的结构。所以我的问题是：如何让 Capybara 在它自己的 div 中看到这个按钮？或者也许还有另一种方法可以在不需要“click_button”操作的较低级别测试表单的功能？

提前感谢您的帮助！

Answer 1

相对于页面上的 div 元素，表单标签未正确嵌套。在你的 ERB 中试试这个：

<ul class="left">
  <li class="has-form">
    <%= form_tag search_students_path, method: 'get' do %>
    <div class="row collapse">
      <div class="small-20 columns">
        <%= text_field_tag 'search', nil, placeholder: 'Student ID...' %>
      </div>
      <div class="small-4 columns">
        <%= submit_tag '&#xf002;'.html_safe, class: 'button expand right-round fa fa-search', name: nil %>
      </div>
    </div>
    <% end %>
  </li>
</ul>

感谢How do i click this button in capybara 的提示。