Select span for select2 using Capybara - ruby

Question

I'm trying to write a custom method that allows me to use our custom select2 country_search element. The elements are a bit wonky, but the snippet of HTML looks like this:
<div class="control-group select optional admins_customer_form_object_country_id">
<label class="select optional control-label" for="admins_customer_form_object_country_id">Country</label>
<div class="controls">
<select id="admins_customer_form_object_country_id" class="select optional select2-hidden-accessible" name="admins_customer_form_object[country_id]" tabindex="-1" aria-hidden="true">
<option value=""></option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
<span class="select2 select2-container select2-container--classic select2-container--below select2-container--focus" dir="ltr" style="width: 220px;">
<span class="selection">
<span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-admins_customer_form_object_country_id-container">
<span class="select2-selection__rendered" id="select2-admins_customer_form_object_country_id-container">
<span class="select2-selection__placeholder">Select Country</span>
</span>
<span class="select2-selection__arrow" role="presentation">
<b role="presentation"></b>
</span>
</span>
</span>
<span class="dropdown-wrapper" aria-hidden="true"></span>
</span>
</div>
</div>
I wrote a helper that should select the correct span and perform a click on it, but I'm stuck selecting the span I want. I'm trying to select the outer visible span which has class select2 select2-container select2-container--classic select2-container--below select2-container--focus but I keep getting invalid XPath errors.
This is what I have so far:
def select_country(label:, value:)
# Select our label first
label_element = first("label", text: label)
# Now navigate through the entire tree, and click the correct SPAN element.
within(label_element) do
select2_container = find(:xpath, "..") # Up one level to the parent div
select2_container = select2_container.find("div.controls") # Down one level into the div.container
select2_container = select2_container.find(:xpath, "./*[1]") # select the span element surrounding all.
end
end
With the last line I can select the select element from the tree, but I can't get the span sibling whatever I try.

Answer 1

If I'm reading correctly you want the span that is the child of div.controls, replacing the last two finds with the following should do that
select2_container = select2_container.find('div.controls > span')
You can add classes to the span in the css selector if needed but in your html it's the only span child so it's not necessary