Ambiguous match, found 2 elements matching css - Capybara

Question

I have a test that renders two of the same elements on the page. I understand what the problem is with the error but I'm just not sure how to fix it? Here is my test:

TEST

 it "deletes the correct snitch" do
        user    = login_user
        snitch  = create(:snitch, :healthy, owner: user.accounts.first)
        snitch2 = create(:snitch, :healthy, owner: user.accounts.first)

        visit root_path
        delete = page.find(".icon-delete")
        first(delete).click
        expect(page).to have_content("Please confirm this delete.")


 end

ERROR

 Managing snitches deleting a snitch from the index page deletes the correct snitch
 Failure/Error: delete = page.find(".icon-delete")

 Capybara::Ambiguous:
   Ambiguous match, found 2 elements matching css ".icon-delete"

How can I pick just one of the icon delete on the page?

Answer 1

I would suggest wrapping it in a more specific finder as below:

within find('#my_unique_id') do
  find(".icon-delete").click
end

That however would require you to have an id on the parent element. If you don't have this, you could go the simple route of selecting the first one on that page then calling click on that:

first(".icon-delete").click