CODEWITHSUNDEEP
htmlcssrubycapybara
ToedStorm
ToedStorm

Reputation: 63

Clicking on an input with capybara

I was wondering how to click on a input in capybara.

So far I've tried 

click_on('#js-emu-submit.button.pl3.pr3.mb0.mr1')
click('js-emu-submit')
find('input', exact_text: 'Get an Estimate', match: :first).click

None of them have worked

This is the HTML from the webpage.

<input type="submit" name="commit" value="Get an Estimate" id="js-emu-submit" class="button pl3 pr3 mb0 mr1" data-disable-with="Get an Estimate">

I am just wondering how to click on the item.

Upvotes: 3

Views: 4117

Answers (1)

Thomas Walpole
Thomas Walpole

Reputation: 49890

Looking at the docs for click_on - https://www.rubydoc.info/gems/capybara/Capybara/Node/Actions#click_link_or_button-instance_method - you can see that it's a combination of click_button and click_link and says to check each of those for the type of locator it accepts. Looking at click_button, https://www.rubydoc.info/gems/capybara/Capybara/Node/Actions#click_button-instance_method, you can see that it will find any <input> element of type submit, reset, image, button (which your HTML element is) and that the locator can be any of id, Capybara.test_id attribute, value, or title. A CSS selector is not one of those things so that explains why your click_on attempt fails. Assuming your <input> element is visible on the page then any of the following should click it

click_on 'js-emu-submit' # match on id
click_button 'js-emu-submit' # id
click_button 'Get an Estimate' # match on value - should work with `click_on` too

The other option is to just use click on an element located another way. click does not take a locator - https://www.rubydoc.info/gems/capybara/Capybara/Node/Element#click-instance_method - so that explains why your second attempt doesn't work, and an input element doesn't have child text inside the element so that explains why your third attempt doesn't work. Things that should work using click would be 

find('#js-emu-submit').click # find element by CSS id selector and click it
find(:button, 'js-emu-submit').click # find by id using the :button selector
find('input[value="Get an Estimate"]').click # find by CSS attribute selector
...

Upvotes: 3

Related Questions