How to click and select an option from a non select dropdown using Selenium and Java

Question

I'm starting automation with Selenium, it's the very first time im doing it alone and i can´t find the correct code for a dropdown list here https://demoqa.com/automation-practice-form at the end there is a "State and City list".. for state you have to click on "Select State" then it gives you the options so then you have to click on the option wanted.

This is my code, I've tried different options but this is the closest one to get a correct working of the code (but it's still not doing what it needs to be done) I know it cant be done with a Select since it's a div and I can only use:

driver.findElement()

Code trials:

//Select state and city
driver.findElement(By.id("state")).click();     
driver.findElement(By.xpath("//body/div/div/div/div/div/div/form/div[10]/div[2]/div[1]/div[1]/div[1]/div[1]")).click();

Image A: enter image description here

Image B:

Image C: enter image description here

Answer 1

The drop-down-menu is a non html-select element. To select an item from the State dropdown you need to induce WebDriverWait for the elementToBeClickable() and you can use the following Locator Strategies:

driver.get("https://demoqa.com/automation-practice-form");
((JavascriptExecutor)driver).executeScript("return arguments[0].scrollIntoView(true);", new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("div#state div[class$='placeholder']"))));
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("div#state div[class$='placeholder']"))).click();
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//*[contains(., 'Uttar Pradesh')]"))).click();

---

References

You can find a couple of relevant detailed discussions in:

• Automating jQuery based bootstrap dropdown using Selenium and Java
• I would like to select a DropDown from a list but HTML don't have select Tag I am not sure should i use Select class or what

Answer 2

driver.get("https://demoqa.com/automation-practice-form");
WebDriverWait wait = new WebDriverWait(driver, 20);
wait.until(ExpectedConditions.elementToBeClickable(driver.findElement(By.id("react-select-3-input")))).sendKeys("NCR");

Answer 3

thank you to the people who took their time and tried to help me.. I found the solution!! perhaps there is another way but this is the way i found and since its the first time i did a code im really happy. What i did was to go step by step till i found the "input" so i use sendKeys.(keys.Enter); because it didnt work with a .click();

And at later on i realized that with only ........................................................... state.sendKeys("NCR") ...
state.sendKeys(Keys.ENTER);

would work also fine...so.. the code is way much simple..

public void selectStateandCity (){ WebDriverWait wait = new WebDriverWait(driver, 20);

    wait.until(ExpectedConditions.elementToBeClickable(driver.findElement(By.xpath("//div[contains(text(),'Select State')]"))));
    wait.until(ExpectedConditions.elementToBeClickable(driver.findElement(By.cssSelector("#state > div"))));
    driver.findElement(By.xpath("//div[@id='state']//div[@class='css-1g6gooi']"));
    driver.findElement(By.xpath("//body/div[@id='app']/div/div/div/div/div/form[@id='userForm']/div[@id='stateCity-wrapper']/div/div[@id='state']/div/div/div/div[1]"));
    state.sendKeys("NCR");
    state.sendKeys(Keys.ENTER);
    
    driver.findElement(By.xpath("//div[contains(text(),'Select City')]"));
    driver.findElement(By.xpath("//body//div[@id='app']//div[@id='city']//div//div//div[2]"));
    driver.findElement(By.xpath("//body/div[@id='app']/div/div/div/div/div/form[@id='userForm']/div[@id='stateCity-wrapper']/div/div[@id='city']/div/div/div/div[1]"));
    city.sendKeys("Delhi");
    city.sendKeys(Keys.ENTER);