3

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.

Alanna Mueller
  • 41
  • 7

3 Answers3

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'])
Thomas Walpole
  • 42,399
  • 5
  • 53
  • 67
0

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

find('button.ia-AddCoverLetter-button').click
Rockwell Rice
  • 3,541
  • 4
  • 28
  • 48
  • How did you know what part of class= to pick. do you just pick the one that starts with "ia"? – Alanna Mueller Jul 21 '18 at 16:31
  • No you can pick any class that there is. I picked that one because I try to keep away from css classes as a general rule. You want to pick a class that is less likely to change or get removed to use in a test, that one just seemed to be specific to that button (although only someone who really knows that app will know for sure). – Rockwell Rice Jul 21 '18 at 16:33
0

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.

Matthew
  • 543
  • 3
  • 25