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

Answer 1

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.,

1. Click the element which is intractable.
2. Wait for the dropdown appears.
3. 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()