Not able to select drop-down value in 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.

Ankit Agrawal · Accepted Answer · 2020-08-10 06:29:35Z

3

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();

answered Aug 10, 2020 at 6:29

Ankit Agrawal

2571 silver badge12 bronze badges

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

3 Comments

Revanth Bangera Over a year ago

for your response. The above code worked. But I wonder how did you locate the div with id ='react-select. Because when I inspect the webpage I am not able to find it. I would like to know how did you identify the div with id='react-select'.

Ankit Agrawal Over a year ago

div with id 'react-select' is element which has value of dropdown. you can search for element with xpath i mentioned. Also, you can also pause debugger in chrome developer tools by pressing key F8

Revanth Bangera Over a year ago

Thank you, now I able to locate it.

user14132305 · Accepted Answer · 2020-08-19 14:55:41Z

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);

answered Aug 19, 2020 at 14:55

user14132305

211 bronze badge

Comments

Ruben Helsloot · Accepted Answer · 2020-10-25 16:54:42Z

1

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);

edited Oct 25, 2020 at 16:54

Ruben Helsloot

13.2k6 gold badges33 silver badges56 bronze badges

answered Aug 10, 2020 at 6:54

Bhavesh Soni

1988 bronze badges

2 Comments

Bhavesh Soni Over a year ago

I have tested on my local machine, code works perfectly fine.Let me know if you need any inputs.

Bhavesh Soni Over a year ago

Kindly upvote and accept the answer if it resolves your issue.

tites jemson · Accepted Answer · 2020-08-10 05:39:32Z

0

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

answered Aug 10, 2020 at 5:39

tites jemson

92 bronze badges

Collectives™ on Stack Overflow

Not able to select drop-down value in Selenium

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related