使用水豚点击基于 ID 的链接

Question

我在表中有两行，每行都有一个我想用 Capybara 测试的“预览”按钮，但我正在努力弄清楚如何单独单击每个预览按钮。我是 Capybara 的新手，所以我仍在学习。这是桌子的样子

<tr>
    <td>
        <a data-target="#1_edit_prompt" data-toggle="modal" href="#">Cta 1</a>
    </td>
    <td class="nowrap">
    Cta 1
    </td>
    <td class="nowrap">
        <a data-target="#1_uses_modal" data-toggle="modal" href="#">0</a>
    </td>
    <td class="nowrap">
    3/9/2017
    </td>
    <td class="actions">
        <a data-target="#1_edit_prompt" data-toggle="modal" href="#">Edit</a>
        <a data-target="#1_delete_modal" data-toggle="modal" href="#">Delete</a>
        <a class="cta-preview" data-cta_id="1" href="#">Preview</a>
    </td>
</tr>
<tr>
    <td>
        <a data-target="#2_edit_prompt" data-toggle="modal" href="#">Cta 2</a>
    </td>
    <td class="nowrap">
        Cta 2
    </td>
    <td class="nowrap">
        <a data-target="#2_uses_modal" data-toggle="modal" href="#">0</a>
    </td>
    <td class="nowrap">
        3/9/2017
    </td>
    <td class="actions">
        <a data-target="#2_edit_prompt" data-toggle="modal" href="#">Edit</a>
        <a data-target="#2_delete_modal" data-toggle="modal" href="#">Delete</a>
        <a class="cta-preview" data-cta_id="2" href="#">Preview</a>
    </td>
</tr>

您可以看到每个预览按钮都有 data-cta_id，这是每个按钮唯一的。我想点击一个基于该 ID 的按钮

Answer 1

与 Capybara 一样，有多种方法可以做某事，但我们应该先弄清楚一些事情。预览“按钮”实际上是一个链接（即使您将它的样式设置为看起来像一个按钮，它仍然是一个 <a> 元素），因此如果click_xxx您需要使用click_linkor的路线click_link_or_button，click_button它将不起作用。

您可以做的一件事是将 a 范围限定click_link为一个元素，然后使该链接在该部分中是唯一的。

page.within('#id_of_table tbody') do # scope to the specific table 
  find('tr:nth-child(1)').click_link('Preview') # click Preview in first row
  find('tr:nth-child(2)').click_link('Preview') # 2nd row
end

另一种选择是 Fredius 在他的回答中显示的，使用属性和属性选择器中的差异

find("[data-cta_id='1']").click

第一个解决方案将来会更容易理解，第二个是更少的代码。如果这是我的代码，我会将data-cta_id属性放在 <tr> 元素上，因为整行都引用了该“cta”，然后执行了类似的操作

find("tr[data-cta_id='1']").click_link('Preview')

在测试中。