CODEWITHSUNDEEP
htmlruby-on-railsrspeccapybara
Spance
Spance

Reputation: 607

Clicking links based on ID in with capybara

I have two rows in a table that each have a 'Preview' button that I want to test with Capybara, but I'm struggling figuring out how to click each preview button individually. I'm new to Capybara so I'm still learning. Here's what the table looks like

<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>

You can see each Preview button has the data-cta_id, which is unique to each button. I want to click a button based on that id

Upvotes: 3

Views: 3927

Answers (2)

Thomas Walpole
Thomas Walpole

Reputation: 49870

As always with Capybara there are multiple ways to do something, but we should clear up something first. The Preview "button" is actually a link (even if you style it to look like a button it's still an <a> element) so if going the click_xxx route you would need to use click_link or click_link_or_button, click_button would not work.

One thing you can do is scope a click_link to an element that will then make the link unique in that section.

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

Another option would be as shown by Fredius in his answer, use the differences in the attributes and an attribute selector

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

The first solution will be much more understandable in the future, the second is less code. If this were my code though, I would have put the data-cta_id attribute on the <tr> element since the whole row refers to that "cta" and then done something like

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

in the test.

Upvotes: 9

Fredius
Fredius

Reputation: 175

It's not clear what exactly do you have done so far, and why you want to do this. But you can use find.

Something like find("[data-cta_id='2'"]) to get the element with id 2.

Upvotes: 0

Related Questions