0 
<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" 
"></div></span>

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: 

find(:xpath,"//*[text()='Name']").click
Name_element=find(:xpath,"//*[text()='Name']")
Name_element.send_keys(:arrow_down).send_keys(:enter)

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>
Improve this question
8
  • 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, 2018 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, 2018 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, 2018 at 17:57
  • @ThomasWalpole I have updated
    – tech11
    Nov 8, 2018 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, 2018 at 18:58

1 Answer 1

Reset to default
0

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
    end
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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