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.

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:

Thank you in advance.

edit:

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


    
        
            Select:

edit2:

HTML from value selected in drop down

Parent sibling/DOM:

In-StateIn-State
×

Navarasu · Accepted Answer

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()

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

Answers (1)

Related Questions