seleniumautomationcapybara

Dealing with Multiple Capybara React-select dropdowns?

So I have a page with multiple dropdowns (with the same choices) when automating a webpage using Capybara and Chromedriver.

They are all react-select's (Which I have a helper file for). Sadly they ALL have the same label text (but not label ID....however I don't think page.select works for label ID).

I thought about doing a page.all on the react-selects? and then just going through the array? Is that possible?

the react-select looks pretty standard, I realize the span has an id but selecting by that doesn't work for react-selects from what i've been able to tell.:

<div class="Select-control">
   <span class="Select-multi-value-wrapper" id="react-select-6--value">
      <div class="Select-placeholder">Select...</div>
      <div class="Select-input" style="display: inline-block;">
         <input role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-6--value" value="" style="width: 5px; box-sizing: content-box;">
         <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"></div>
      </div>
   </span>
   <span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
</div>

Could I maybe just pull it in via page.all? The react helper I have does this:

module CapybaraReactHelper
  def capybara_react_select(selector, label)
    within selector do
      find('.Select-control').click
      expect(page).to have_css('.Select-menu-outer') # options should now be available
      expect(page).to have_css('.Select-option', text: label)
      find('.Select-option', text: label).click
    end
  end
end

Any ideas?

Thanks!

Solution

  • page.select doesn't work for this because it only works for HTML <select> elements. This is a JS driven widget, not an HTML <select> element.

    If you are just automating a page (not testing an app) it'll probably be easier just to use JS (via execute_script) to set the value of the hidden <input>s.

    If you are testing an app, then you can use page.all to gather all the react-selects and step through, as long as selecting from any react-select doesn't replace any of the others on the page (which would leave you with obsolete elements).

    If that doesn't provide enough info to solve your problem, and your real issue is trying to pick a specific react-select to select from, then please add enough HTML to your question so we can see what actual differences exist between the widgets you're trying to choose from (2 different react-select elements for instance)