Select item inside a react-select dropdown list in Selenium with Python

Question

In that website, I am looking how to select item (e.g "Green") in "Single" dropdown box and "Grouped" dropdown box.

I tried to click to dropdown first and tried to find the element inside it to click but I can't

Do you have any idea? and with Grouped dropdown I even couldn't find the xpath to click on it

Thank in advance

driver = webdriver.Chrome()
driver.get("https://react-select.com/home")
driver.maximize_window()
driver.implicitly_wait(20)
driver.find_element_by_xpath("//div[@class='select__value-container select__value-container--has-value css-1hwfws3']").click()
driver.find_element_by_xpath("//*[@text()='Green']").click()

Great Q! In addition to the helpful responses below, I'd encourage you to look into [ActionChains](https://www.selenium.dev/selenium/docs/api/py/webdriver/selenium.webdriver.common.action_chains.html) which can help you implement more "slippery" use cases... — Yaakov Bressler, Jan 13 '21 at 16:21
@YaakovBressler: Your suggestion helped me solve the problem the code didn't work on the word "Silver". Thank you `dropdown = driver.find_element_by_xpath("//div[@class='select__value-container select__value-container--has-value css-1hwfws3']").click() option = driver.find_element_by_xpath("//*[text()='Silver']") action = ActionChains(driver) action.move_to_element(option) action.click(option) action.perform()` — Scorpisces, Jan 14 '21 at 01:22

PDHide · Accepted Answer · 2021-01-14T03:41:53.133

3

remove @ from text

driver.find_element_by_xpath("//*[text()='Green']").click()

To click on options that are not visible:

option=driver.find_element_by_xpath("//*[text()='Silver']")
driver.execute_script("arguments[0].scrollIntoView();", option)
option.click()

You have to scroll first to that and then click

edited Jan 14 '21 at 03:41

answered Jan 13 '21 at 16:15

PDHide

18,113
2
31
46

In case having another element "Silver" , I use driver.find_element_by_xpath("//*[text()='Silver']").click() it just show the list and hightlight on "Silver" line but don't click (to choose) – Scorpisces Jan 14 '21 at 00:00
@Scorpisces added answer for silver , you have to scroll to silver first – PDHide Jan 14 '21 at 03:42
Ok your all solutions work well. But in action, my work didn't on main website (not example website) maybe I will ask in other question. Thank you PDHide very much! – Scorpisces Jan 14 '21 at 03:59

score 1 · Answer 2 · answered Jan 13 '21 at 16:20

To select Green from the Single dropdown box you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

driver.get("https://react-select.com/home")
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.basic-single > div.select__control > div.select__value-container"))).click()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[contains(@class, 'select__menu')]/div[contains(@class, 'select__menu-list')]//div[contains(@class, 'select__option') and text()='Green']"))).click()

Browser Snapshot:

It failed if I've changed to "Silver", they clicked on "Slate" — Scorpisces, Jan 14 '21 at 00:02

score 0 · Answer 3 · answered May 16 '23 at 09:57

0

I wasn't able to automate react-select dropdown, the reason was it renders the list once you click over it, but I will share the solution that worked well with me, I will just give you an idea of how to achieve it because I used Javascript.

answered May 16 '23 at 09:57

Osama Malik

267
2
6

Select item inside a react-select dropdown list in Selenium with Python

3 Answers3

Linked