Not able to select drop-down value in Selenium - selenium

Question

I am trying to select a value for State and City field in https://demoqa.com/automation-practice-form form. When I try to access the state field it's throwing an error no such element: Unable to locate element.
Below are the following code snippet and the error message.
//State
new WebDriverWait(driver , 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[#id='react-select-3-input']"))).sendKeys("NCR");
new WebDriverWait(driver ,20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[contains(#class,'css-2613qy-menu')]"))).click();
//City
new WebDriverWait(driver , 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[#id='react-select-4-input']"))).sendKeys("Noida");
new WebDriverWait(driver ,20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[contains(#class,'css-2613qy-menu')]"))).click();
Error
Exception in thread "main" org.openqa.selenium.TimeoutException: Expected condition failed: waiting for element to be clickable: By.xpath: //div[contains(#class,'css-2613qy-menu')] (tried for 20 second(s) with 500 milliseconds interval)
at org.openqa.selenium.support.ui.WebDriverWait.timeoutException(WebDriverWait.java:95)
at org.openqa.selenium.support.ui.FluentWait.until(FluentWait.java:272)
at newpackage.Example.main(Example.java:117)
Caused by: org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"xpath","selector":"//div[contains(#class,'css-2613qy-menu')]"}
(Session info: chrome=84.0.4147.105)
For documentation on this error, please visit: https://www.seleniumhq.org/exceptions/no_such_element.html
Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:48'
System info: host: 'DESKTOP-E926NDJ', ip: '192.168.178.1', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_181'
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 84.0.4147.105, chrome: {chromedriverVersion: 84.0.4147.30 (48b3e868b4cc0..., userDataDir: C:\Users\hp\AppData\Local\T...}, goog:chromeOptions: {debuggerAddress: localhost:54539}, javascriptEnabled: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: WINDOWS, platformName: WINDOWS, proxy: Proxy(), setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, webauthn:virtualAuthenticators: true}
Session ID: c4cdf6fd8a060246b9284b9e4be7ccf7
*** Element info: {Using=xpath, value=//div[contains(#class,'css-2613qy-menu')]}
at sun.reflect.GeneratedConstructorAccessor10.newInstance(Unknown Source)
at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(Unknown Source)
at java.lang.reflect.Constructor.newInstance(Unknown Source)
at org.openqa.selenium.remote.http.W3CHttpResponseCodec.createException(W3CHttpResponseCodec.java:187)
at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:122)
at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:49)
at org.openqa.selenium.remote.HttpCommandExecutor.execute(HttpCommandExecutor.java:158)
at org.openqa.selenium.remote.service.DriverCommandExecutor.execute(DriverCommandExecutor.java:83)
at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:552)
at org.openqa.selenium.remote.RemoteWebDriver.findElement(RemoteWebDriver.java:323)
at org.openqa.selenium.remote.RemoteWebDriver.findElementByXPath(RemoteWebDriver.java:428)
at org.openqa.selenium.By$ByXPath.findElement(By.java:353)
at org.openqa.selenium.remote.RemoteWebDriver.findElement(RemoteWebDriver.java:315)
at org.openqa.selenium.support.ui.ExpectedConditions$7.apply(ExpectedConditions.java:205)
at org.openqa.selenium.support.ui.ExpectedConditions$7.apply(ExpectedConditions.java:201)
at org.openqa.selenium.support.ui.ExpectedConditions$22.apply(ExpectedConditions.java:641)
at org.openqa.selenium.support.ui.ExpectedConditions$22.apply(ExpectedConditions.java:638)
at org.openqa.selenium.support.ui.FluentWait.until(FluentWait.java:249)
... 1 more
Also suggest for the code to select the city field.

Answer 1

The element you are trying to click is in different div.
Use xpath in code snippet below.
Alternatively you can also use class name as well
//State
new WebDriverWait(driver , 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[#id='react-select-3-input']"))).sendKeys("NCR");
new WebDriverWait(driver ,20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[contains(#id,'react-select')]"))).click();
//City
new WebDriverWait(driver , 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[#id='react-select-4-input']"))).sendKeys("Noida");
new WebDriverWait(driver ,20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[contains(#id,'react-select')]"))).click();

Answer 2

thanks for the code to select "State" and "City", this is really helpful. I too did some minor changes in code and following code also works.
WebElement e1 = dr.findElement(By.xpath("//input[#id='react-select-3-input']"));
e1.sendKeys("Uttar Pradesh");
e1.sendKeys(Keys.ENTER);
WebElement e2 = dr.findElement(By.xpath("//input[#id='react-select-4-input']"));
e2.sendKeys("Lucknow");
e2.sendKeys(Keys.ENTER);

Answer 3

You can use the below code snippet to click on State and City and select appropriate value from drop down:
// To Click State drop down
driver.findElement(By.id("state")).click();
WebDriverWait wait1 = new WebDriverWait(driver, 10);
WebElement element1 = wait1
.until(ExpectedConditions.elementToBeClickable(By.xpath("//input[#id='react-select-3-input']")));
element1.sendKeys("NCR");
Robot robot = new Robot();
robot.keyPress(KeyEvent.VK_ENTER);
robot.keyRelease(KeyEvent.VK_ENTER);
// To Click City drop down
driver.findElement(By.id("city")).click();
WebDriverWait wait2 = new WebDriverWait(driver, 10);
WebElement element2 = wait2
.until(ExpectedConditions.elementToBeClickable(By.xpath("//input[#id='react-select-4-input']")));
element2.sendKeys("Delhi");
Robot robot1 = new Robot();
robot1.keyPress(KeyEvent.VK_ENTER);
robot1.keyRelease(KeyEvent.VK_ENTER);

Answer 4

Sometimes, I too feel the same, I will use java script executor to handles such kind of Web-elements.