使用水豚点击基于 ID 的链接
Clicking links based on ID in with capybara
我在 table 中有两行,每行都有一个 'Preview' 按钮,我想用 Capybara 对其进行测试,但我正在努力弄清楚如何分别单击每个预览按钮。我是 Capybara 的新手,所以我还在学习。这是 table 的样子
<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
的按钮
目前还不清楚你到底做了什么,为什么要这样做。但是你可以使用 find
。
类似 find("[data-cta_id='2'"])
的东西用 id
2.
获取元素
与水豚一样,有多种方法可以做某事,但我们应该先弄清楚一些事情。预览 "button" 实际上是一个 link(即使你将它的样式设置为看起来像一个按钮,它仍然是一个 元素)所以如果走 click_xxx
路线你需要使用 click_link
或 click_link_or_button
,click_button
将不起作用。
您可以做的一件事是将 click_link
限定在一个元素中,然后使 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
属性放在
元素上,因为整行都引用那个 "cta" 然后做类似 的事情
find("tr[data-cta_id='1']").click_link('Preview')
正在测试中。
我在 table 中有两行,每行都有一个 'Preview' 按钮,我想用 Capybara 对其进行测试,但我正在努力弄清楚如何分别单击每个预览按钮。我是 Capybara 的新手,所以我还在学习。这是 table 的样子
<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
的按钮目前还不清楚你到底做了什么,为什么要这样做。但是你可以使用 find
。
类似 find("[data-cta_id='2'"])
的东西用 id
2.
与水豚一样,有多种方法可以做某事,但我们应该先弄清楚一些事情。预览 "button" 实际上是一个 link(即使你将它的样式设置为看起来像一个按钮,它仍然是一个 元素)所以如果走 click_xxx
路线你需要使用 click_link
或 click_link_or_button
,click_button
将不起作用。
您可以做的一件事是将 click_link
限定在一个元素中,然后使 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
属性放在
find("tr[data-cta_id='1']").click_link('Preview')
正在测试中。