Select from dropdown box - selenium - selenium

Question

HTML:
<span class="Select-multi-value-wrapper" id="react-select-27--value">
<div class="Select-placeholder">Select</div>
<div class="Select-input" style="display: inline-block;">
<style>input#undefined::-ms-clear {display: none;}</style>
<input role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-27--value" value="" style="width: 5px; box-sizing: content-box;">
<div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 13px; font-family: "Open Sans", sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div>
</div>
</span>
Code:
Select role = new Select(driver.findElement(By.xpath("//span[#id='react-
select-17--value']/div")));
role.selectByVisibleText("Manager");
also tried:
By.xpath("//*[#id='react-select-27--value']/div[1]");
By.xpath("//*[#id='react-select-27--value']");
I am getting following error.
Unable to locate element: {"method":"xpath","selector":"//span[#id='react-select-17--value']/div"}
please help.

Answer 1

You should not use Select. bec it's only applicable to select tag only.
In your case you have input tag with combobox role . Please try below code
WebElement ele = driver.findElement(By.xpath("//input[#role='combobox' and #aria-activedescendant='react-select-27--value']");
ele.click();
driver.findElement(By.xpath("//*[text()='Manager')");

Answer 2

The dropdown you are targeting is not your conventional HTML <select> element, hence Select class won't work. Instead you should do something like this -
driver.findElement(By.xpath("//span[#class='Select-multi-value-wrapper']")).click();
No you need to locate the exact option. Normally, you cannot see all your React elements inside your inspector. If you are using Chrome browser, you can install this extension and then view your elements, locate them and click on it using Selenium through your regular locators.

Answer 3

As per your code, you can not use Select here because it is a bootstrap drop down so that you can use like below sample code
WebElement DropDownClick = driver.findElement("Locator Value");
DropDownClick.click();
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//List of Drop Down locator
List<WebElement> Drop_options = driver.findElements(By.xpath("//span[#class='Select-multi-value-wrapper']//div"));
for (WebElement temp: Drop_options ) {
if (temp.getText().contains("Manager") {
temp.click();
break;
} else {
System.out.println("Continue");
}