同一页面上的多个 rails 表单：单击每个表单的提交按钮在 safari 中始终有效，有时在 firefox 中有效

Question

在索引页上，我有一个 table，其中列出了一堆项目。 table 中的每个 <tr></tr> <tbody> 不仅列出每个项目，而且还允许您

update 那一项
单击 edit 进入该项目的编辑屏幕

这是一张图片：

在 safari 开发中：我可以成功更新每个列出的项目并且一切正常。但是：当运行我的功能规范与水豚和 selenium-webkit（使用 firefox）时：

水豚似乎觉得提交按钮没问题，甚至点击了它
但之后什么也没有发生。出于某种原因，单击该更新按钮时，表单似乎没有提交。

更奇怪的是：在开发模式下使用 firefox 进行测试时，有时可以单击更新按钮。有时它不起作用，我必须刷新页面，然后它才能起作用。

我尝试在单击 Update abc 按钮之前放置一个 binding.pry，以便在该步骤手动单击该按钮。我注意到手动点击按钮也没有提交表单。

这是我的相关规范：

scenario "within the index page", js: true do
  select 'some selection', from 'item_1_jazz'
  select '12345', from 'item_1_something'
  # I attempted putting a binding.pry here, and noticed that clicking the update button still wasn't submitting the form
  find("#update_some_item_1_btn").click

  expect(page).to have_content 'The item was successfully updated.'
end

更新这是我在表单中的按钮：

<td class="btn-group">
  <%= f.submit 'Update abc', class: "btn btn-success btn-sm", id: "update_#{dom_id(item)}_btn" %>
  <%= link_to edit_item_path(item), class: "btn btn-info btn-sm" do %>
    <i class="fa fa-pencil"></i> Edit
  <% end %>
</td>

问题： 在 firefox 中：Capybara 似乎可以很好地找到提交按钮，甚至可以单击它。但为什么 Capybara 无法在 Firefox 中提交表单？另外：为什么在使用 firefox 的开发模式下按钮有时只能工作？似乎有什么东西阻止了表单提交。

Answer 1

根据对 OQ 评论的回复，您似乎有将 td 元素包装在 tr 中的表单元素。这是无效的 HTML 因为表单元素不是 tr 的有效子元素，并且不同的浏览器 may/do 以不同的方式解释标记。如果您不需要 IE 兼容性，那么您可以使用 HTML5 表单属性将表单外部的表单元素绑定回您希望它们关联的表单，但是如果您确实需要 IE 兼容性，则需要查看其他解决方案，例如不使用 table/tr/td 元素，但可能使用“display: table/table-row/etc” 或一种包装整个 table 的形式来设置其他类型元素的样式，并确定要更新的元素单击按钮。

同一页面上的多个 rails 表单：单击每个表单的提交按钮在 safari 中始终有效，有时在 firefox 中有效

Multiple rails forms on same page: clicking submit button per form always works in safari, sometimes works in firefox

ruby

rspec

ruby-on-rails

capybara