CODEWITHSUNDEEP
ruby-on-railsweb-scrapingcapybarascraper
Alanna Mueller
Alanna Mueller

Reputation: 71

Capybara: click_button with no text or id?

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.

Upvotes: 5

Views: 3690

Answers (3)

Matthew
Matthew

Reputation: 1617

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.

Upvotes: 1

Thomas Walpole
Thomas Walpole

Reputation: 49890

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'])

Upvotes: 3

Rockwell Rice
Rockwell Rice

Reputation: 3002

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

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

Upvotes: 1

Related Questions