Capybara: click_button with no text or id?

Question

Here is the html code:

<button type="button" class="icl-Button--transparent icl-Button--sm ia-AddCoverLetter-button"><span class="icl-ButtonIcon"><svg aria-label="Add cover letter" class="icl-Icon icl-Icon--blue icl-Icon--sm" role="img"><g><path d="M9.75,5.25H8.25v3h-3v1.5h3v3h1.5v-3h3V8.25h-3v-3ZM9,1.5A7.5,7.5,0,1,0,16.5,9,7.5,7.5,0,0,0,9,1.5ZM9,15a6,6,0,1,1,6-6A6,6,0,0,1,9,15Z"></path></g></svg></span>Add cover letter</button>

How would you get capybara to click on it when it has no name or id. I tried click_link('Add cover letter') but it did not work either.

Answer 1

You should be able to select it by it's class, have you tried that?

find('button.ia-AddCoverLetter-button').click

Answer 2

The accepted answer will work fine, however if you want to stay using click_button to make your code clearer to read (click_button not click_link since it's a button not a link) you could also do

click_button(class: 'ia-AddCoverLetter-button')

or if you want to specify more than one class you can pass an array

click_button(class: ['icl-Button--transparent', 'icl-Button--sm', 'ia-AddCoverLetter-button'])

Answer 3

I came across this question while looking for a way to click on an item based on it's aria-label (as the OP tried to do but couldn't get to work).

In general this can now (since August 2016) be done by enabling an option for Capybara to match ARIA labels. In Rails system tests, this is achieved by adding Capybara.enable_aria_label = true to application_system_test_case.rb:

# test/application_system_test_case.rb
require 'test_helper'

class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
  driven_by :selenium, using: :chrome, screen_size: [1400, 1400]
  Capybara.enable_aria_label = true
end

With that option turned on, to click on an icon link like this one (using HAML):

= link_to edit_reader_path(reader), 'aria-label' => 'Edit' do
  %i.icon-pencil.m-auto.text-primary{'aria-hidden' => 'true'}

...I can just write something like this in my system test:

click_on 'Edit', match: :first

I'm assuming this would need to be tweaked to suit the OP's situation where the aria-label is on an SVG nested within a span, within the button, perhaps by finding the SVG and then finding its parent's parent.