How to use python selenium to select value in React-Select Component dropdown?

Question

[very new at selenium and HTML]

I want to select a drop down from a website. The type is hidden. I just want to pass or select either male or female from the drop down or pass it into the value variable, how would I do this?

I used the inspect element in chrome to determine the two lines below are the ones required to select a value.

<div class="Select has-value is-clearable is-searchable Select--single">
    <input name="customer.gender" type="hidden" value="female">

I got the xpath from chrome and tried to pass a value but did not work:

gender = driver.find_element_by_xpath("//*[@id='app']/div/div[1]/div[4]/div/div[2]/form/div[1]/div/div[2]/div[3]/div[2]/div/span[2]/div/input")
gender.send_keys('male')

The entire HTML of the above div element is:

<div class="Select has-value is-clearable is-searchable Select--single">
    <input name="customer.gender" type="hidden" value="female">
    <div class="Select-control">
        <span class="Select-multi-value-wrapper" id="react-select-5--value">
            <div class="Select-value">
                <span class="Select-value-label" role="option" aria-selected="true" id="react-select-5--value-item">Female</span>
            </div>
            <div class="Select-input" style="display: inline-block;">
                <input aria-activedescendant="react-select-5--value" aria-expanded="false" aria-haspopup="false" 
                    aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;">
                <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div>
            </div>
        </span>
        <span aria-label="Clear value" class="Select-clear-zone" title="Clear value">
            <span class="Select-clear">×</span>
        </span>
        <span class="Select-arrow-zone">
            <span class="Select-arrow"></span>
        </span>
    </div>
</div>

Thank you in advance.

edit:

HTML from where I click on the drop down without any values selected:

<div class="Select is-searchable Select--single">
    <div class="Select-control">
        <span class="Select-multi-value-wrapper" id="react-select-5--value">
            <div class="Select-placeholder">Select:</div>
            <div class="Select-input" style="display: inline-block;">
                <input aria-activedescendant="react-select-5--value" aria-expanded="false" aria-haspopup="false"
                    aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;">
                <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; 
                            overflow: scroll; white-space: pre; font-size: 14px; 
                            font-family: Helvetica, Arial, sans-serif; font-weight: 400; 
                            font-style: normal; letter-spacing: normal; text-transform: none;"></div>
            </div>
        </span>
        <span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
    </div>
</div>

edit2:

HTML from value selected in drop down

<div class="Select has-value is-clearable is-searchable Select--single">
    <input name="customer.gender" type="hidden" value="male">
    <div class="Select-control">
        <span class="Select-multi-value-wrapper" id="react-select-5--value">
            <div class="Select-value">
                <span class="Select-value-label" role="option" aria-selected="true" id="react-select-5--value-item">Male</span>
            </div>
            <div class="Select-input" style="display: inline-block;">
                <input aria-activedescendant="react-select-5--value" aria-expanded="false" aria-haspopup="false" 
                    aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;">
                <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; 
                            overflow: scroll; white-space: pre; font-size: 14px; 
                            font-family: Helvetica, Arial, sans-serif; font-weight: 400; 
                            font-style: normal; letter-spacing: normal; text-transform: none;"></div>
            </div>
        </span>
        <span aria-label="Clear value" class="Select-clear-zone" title="Clear value">
            <span class="Select-clear">×</span>
        </span>
        <span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
    </div>
</div>

Parent sibling/DOM:

<div class="col-md-2"><div class="form-input  form-group"><span class="glyphicon glyphicon-asterisk"></span><label for="customer.in_state" class="control-label">In-State</label><span class="input-group"><div class="Select has-value is-clearable is-searchable Select--single"><input name="customer.in_state" type="hidden" value="1"><div class="Select-control"><span class="Select-multi-value-wrapper" id="react-select-11--value"><div class="Select-value"><span class="Select-value-label" role="option" aria-selected="true" id="react-select-11--value-item">In-State</span></div><div class="Select-input" style="display: inline-block;"><input aria-activedescendant="react-select-11--value" aria-expanded="false" aria-haspopup="false" aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;"><div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div></div></span><span aria-label="Clear value" class="Select-clear-zone" title="Clear value"><span class="Select-clear">×</span></span><span class="Select-arrow-zone"><span class="Select-arrow"></span></span></div></div></span></div></div>

Have you tried just using execute_script('javascript.find.input.="Male"')? — Moshe Slavin
– Moshe Slavin, Commented Oct 18, 2018 at 14:23
@MosheSlavin I have not tried that. Can I run that in python? or how would I run it in selenium can you show me an example please? — RustyShackleford
– RustyShackleford, Commented Oct 18, 2018 at 14:25
@RustyShackleford , Note, that if you want your script to simulate user-like behavior, then you should NOT use execute_script to handle elements on page. Instead write lines that will perform exactly the same actions as you do as user. So if you need to select value from drop-down menu: click on drop-down to expand it -> wait for option to be visible(clickable) -> click on option — Andersson
– Andersson, Commented Oct 18, 2018 at 14:30
@Andersson I am trying to go for what you said, but I am not able to pick up the exact lines in the HTML that take me to the drop down — RustyShackleford
– RustyShackleford, Commented Oct 18, 2018 at 14:31

Navarasu · Accepted Answer · 2020-06-18 12:10:12Z

4

Your page uses React Select Component. As other discussed in the group, You have to automate this case exactly similar like the manual steps,

i.e.,

Click the element which is intractable.
Wait for the dropdown appears.
Click the value from the dropdown.

You have two case here,

Select with when no value
select when there is value.

I assume that page has single select box similar to that and gender value is not selected by default. In below code,I am selecting male case. After selecting male, I am changing it to Female.

Seleting the dropdown without value

# this is click the div..Select-placeholder element which is intractable

driver.find_element_by_css_selector('.Select--single .Select-placeholder').click()

# Then we are waiting for the dropdown value to appear
wait = WebDriverWait(driver, 60)
male= wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, '.Select-option#react-select-5--option-0)')))

# Click the element male option value of the dropdown
male.click()

Seleting the dropdown with value

# this is click the div.Select-value element which is intractable
driver.find_element_by_css_selector('.Select--single .Select-value').click()
female = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, '.Select-option#react-select-5--option-1)')))

# Click the element female option value of the dropdown
female.click()

Get selected value

 selected_value=driver.find_element_by_css_selector('.Select--single .Select-value').text
 print(selected_value)

Clear selected value

 selected_value=driver.find_element_by_css_selector('.Select--single Select-clear').click()

edited Jun 18, 2020 at 12:10

answered Oct 18, 2018 at 20:52

Navarasu

8,5072 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cerin Over a year ago

This code doesn't appear to do anything. Why are you not calling the .click() attributes on the react-select elements?

Navarasu Over a year ago

It is a typo. Updated it. I have shared only the concept of handling the component. You should not except the exact code here. Maybe on the component side, the dom structure may be changed. Please check and update the code as per your UI.

Collectives™ on Stack Overflow

How to use python selenium to select value in React-Select Component dropdown?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related