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 which can help you implement more "slippery" use cases... — Yaakov Bressler
– Yaakov Bressler, Commented Jan 13, 2021 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
– Scorpisces, Commented Jan 14, 2021 at 1:22

PDHide · Accepted Answer · 2021-01-14 03:41:53Z

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, 2021 at 3:41

answered Jan 13, 2021 at 16:15

PDHide

20.1k2 gold badges43 silver badges57 bronze badges

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

3 Comments

Scorpisces Over a year ago

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)

PDHide Over a year ago

@Scorpisces added answer for silver , you have to scroll to silver first

Scorpisces Over a year ago

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!

undetected Selenium · Accepted Answer · 2021-01-13 16:20:56Z

1

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:

answered Jan 13, 2021 at 16:20

undetected Selenium

194k44 gold badges304 silver badges387 bronze badges

1 Comment

Scorpisces Over a year ago

It failed if I've changed to "Silver", they clicked on "Slate"

Osama Malik · Accepted Answer · 2023-05-16 09:57:54Z

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, 2023 at 9:57

Osama Malik

3552 silver badges6 bronze badges

Comments

alexts · Accepted Answer · 2023-12-02 12:33:54Z

I am sharing my answer because none of the solutions I found worked for me. What I wanted was to select multiple values of of the select list:

First I had to click on the react-select component for the list of options to appear.

react_select_button = WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.XPATH, '//*[@id="root"]/div/div..../div[1]')))
react_select_button.click()

Then I clicked inside the input field and passed the 1st keyword option I wanted to search for and clicked on the rendered list.

driver.find_element(By.XPATH, "//input[@id='react-select-input']").send_keys("my-option-1")
WebDriverWait(driver, 5).until(EC.presence_of_element_located((By.ID, "react-select-listbox"))).click()

After that again since the mouse was on the input field I passed the 2nd keyword, clicked the list for the option to be selected.

driver.find_element(By.XPATH, "//input[@id='react-select-input']").send_keys("my-option-2")
WebDriverWait(driver, 5).until(EC.presence_of_element_located((By.ID, "react-select-listbox"))).click()

Finally, I hit the search button.

button_select = WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, '//*[@id="root"]/div/div/.../button[1]')))
button_select.click()

Ashish Varma · Accepted Answer · 2024-01-06 04:51:41Z

0

If any item is not able to be selected using custom selenium script than you can you can change zindex value to 9999 to be able to select it. After the click is completed than change it back to the original

private static String setZIndex(WebElement element, WebDriver driver, String desiredZIndex) { JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;

    // Get the original z-index
    String originalZIndex = element.getCssValue("z-index");

    // Set the desired z-index value to bring the element to the front
    jsExecutor.executeScript("arguments[0].style.zIndex = arguments[1];", element, desiredZIndex);

    // Return the original z-index value
    return originalZIndex;
}

answered Jan 6, 2024 at 4:51

Ashish Varma

1

Collectives™ on Stack Overflow

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

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related