<span class="Select-some-wrapper" id=“id—value">
<div class="Select-placeholder">Name</div>
<div role=“xx” aria-expanded="false" aria-owns="" aria- 
activedescendant=“id—value" class="Select-input" aria-readonly="false" 

Basically the dropdown placeholder is Name and I have to choose the second option from the dropdown. This is a react select for a dropdown and I was trying to use capybara selenium to test it as shown below:


After I click on the element I am clicking arrow_down to go to the second option and hit enter. This works fine when I run it locally. When I use headless mode the browser locates the element but doesnt show the dropdown instead it keeps clicking on the placeholder twice. And it doesn't give any error.

When I click the placeholder the values change as shown below:

<span class="Select-some-wrapper" id=“id—value">
<div class="Select-placeholder">Name</div>
<div role=“xx” aria-expanded="true" aria-owns="id--list" aria- 
activedescendant=“id—value-option-0" class="Select-input" aria- 
readonly="false" "></div></span>
  • When you click on the Select-placeholder element is it being replaced in the document with other elements? If so please show an example of those elements too - since it sounds like you probably have a timing issue based on when elements are showing up . Also the selectors you are using are highly inefficient. – Thomas Walpole Nov 8 '18 at 12:45
  • @ThomasWalpole did you mean using the find option with text is inefficient? And yes when I click on the placeholder element the values changes. aria-expanded="true" aria-owns="id--list" aria- activedescendant=“id—value-option-0" – tech11 Nov 8 '18 at 17:26
  • yes - "//*[text()='Name']" is a very inefficient XPath when you have things like classes to more efficiently select the elements. Add the HTML that gets added when you click on the element to your question please. – Thomas Walpole Nov 8 '18 at 17:57
  • @ThomasWalpole I have updated – tech11 Nov 8 '18 at 18:34
  • I did use other selector like 'select-input' and 'select-placeholder' it was not working. only with text() value it worked – tech11 Nov 8 '18 at 18:58

The following solved the problem and i didnt have to use send_keys. And it worked in headless mode as well. Basically when I placed cursor on the placeholder(Name) element I could see a tag appearing with div class='Select-menu-outer' this has the list of items in the dropdown. So downkey and enter options were not required.

    within('.Select-menu-outer') do
      find('.Select-option', text: 'dropdown option').click

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.