點擊鏈接基於ID與水豚

Question

我有一個表中有兩行，每個都有一個'預覽'按鈕，我想用水豚測試，但我很努力想出如何單擊每個預覽按鈕。我是新來的水豚，所以我還在學習。這是表看起來像什麼

<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

獲得元素和往常一樣，有多種方式做一些事情，但我們首先應該清理的東西。預覽「按鈕」實際上是一個鏈接（即使你將它看起來像一個按鈕，它仍然是一個< a>元素），因此如果要使用click_xxx路線，則需要使用click_link或click_link_or_button，click_button不起作用。

你可以做的一件事是將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 

第一個解決方案將是多，在未來更容易理解的差異，而在第二少代碼。如果這是我的代碼雖然，我將投入< TR>元素的data-cta_id屬性，因爲整個行是指「CTA」，然後做了類似

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

測試

。

Answer 2

目前尚不清楚你到底做了什麼，以及爲什麼你要這樣做。但是你可以使用find。

喜歡的東西find("[data-cta_id='2'"])與水豚用id 2.