CODEWITHSUNDEEP
ruby-on-railsdrop-down-menurspeccapybara
daveasdf
daveasdf

Reputation: 135

How to select dropdown autocomplete with Capybara?

I've got this form input:

<%= f.input :location, input_html: {id: "autocomplete", placeholder: ""}, required: true, hint: 'HINT.'  %>

where matching addresses are shown in the dropdown, 'powered by Google'.

How do I click that with Capybara?

I tried:

fill_in 'Location', with: "Toronto ON Canada"
select 'Toronto ON Canada', from: "Location"


fill_in 'Location', with: "Toronto ON Canada"
find('#autocomplete', text: "Toronto ON Canada").click

Admitedly I am still confused as to the selectors and the syntax. When I binding.pry (stop the process with binding.pry in the rspec), I can see the options in the dropdown in the browser, and I'm supposed to click the first option (or press the down arrow, which I will check out later).

When I go into chrome tools the dropdown disappears, so I can't inspect the dropdown. Also if I switch to the terminal to input capybara code into the binding pry, the dropdown disappears, so I guess if the window isn't active the dropdown disappears, not sure if that matters to Capybara during testing.

It's some ajax call to maps.googleapis.com

<input class="form-control string required pac-target-input" id="autocomplete" placeholder="" required="required" aria-required="true" type="text" value="" name="fan[location]" autocomplete="off">

Although let me try hitting the button with Capybara without selecting the first option in the autocomplete dropdown...

Gives me form error:

Please use the Google autosuggest dropdown address.

I remember implementing that in 2017 lol. Even though the text is exactly the same in the form, need to click the drop down to get the proper google info through the api (i'm assuming, currently).

Upvotes: 0

Views: 245

Answers (1)

Thomas Walpole
Thomas Walpole

Reputation: 49880

Rails templates don't really show what the final HTML is, or any JS behavior attached to it. Therefore it's always going to be better if you post the actual HTML from the page. If there is JS behavior causing the page to change then use whatever keystroke pauses JS in the browser you're using before doing your inspection to see the elements which exist, and then use Capybara to interact with those elements as a user would. ie. check for visual changes you expect to exist after required interactions rather than relying on sleep times which will always be flaky as the load on your machine varies, etc.

Upvotes: 1

Related Questions