javascript - How To select a Value From Drop-Down using Selenium?

Question

Given Below is a Piece of Code which denotes a Drop-Down. I need to Select Date value in this Drop-down denoted By <option value="1" label="Date">Date</option>

<select id="type" class="text-input ng-pristine ng-valid ng-scope ng-touched" ng-style="cssStyle" name="type" ng-if="!options.hidePlaceholder" ng-model="result.type" qmx-observe-value="text" ng-disabled="options.readonly" ng-options="obj.value as obj.text group by obj.groupby for obj in selectData" style="font-size: 13px; opacity: 1; width: 100%;">
    <option class="ng-binding" value="">----</option>
    <option value="0" selected="selected" label="Text">Text</option>
    <option value="1" label="Date">Date</option>
    <option value="2" label="Numeric">Numeric</option>
    <option value="3" label="Switch">Switch</option>
    <option value="4" label="Map Location Marker">Map Location Marker</option>
    <option value="5" label="Picker">Picker</option>
    <option value="6" label="List">List</option>
    </select>

Following Methods didn't work.
1.) selecting this value using Select by importing org.openqa.selenium.support.ui.Select

Select elm = new Select(driver.findElement(By.xpath(".//*[@id='type']/option[3]")));
  elm.selectByVisibleText("Date");

Console shows:

Element should have been "select" but was "option"

2.) Clicking on the Drop-Down first to display option to be selected and then clicking on the option.

driver.findElement(By.xpath(".//*[@id='type']")).click();
driver.findElement(By.xpath(".//*[@id='type']/option[3]")).click();

Console shows:

DEBUG Element is missing an accessible name: id: type, tagName: SELECT, className: text-input ng-pristine ng-untouched ng-valid ng-scope

3.) Using JavascriptExecutor to get the click.

driver.findElement(By.xpath(".//*[@id='type']")).click();    
((JavascriptExecutor)driver).executeScript("arguments[0].click();", driver.findElement(By.xpath(".//*[@id='type']/option[3]")));

Console shows:

DEBUG Element is missing an accessible name: id: type, tagName: SELECT, className: text-input ng-pristine ng-untouched ng-valid ng-scope

4.) Using Mouse-Over on Option to be selected in Drop-down and then performing click on it.

driver.findElement(By.xpath(".//*[@id='type']")).click();    
WebElement subdrop = driver.findElement(By.xpath(".//*[@id='type']/option[3]"));
        Actions action = new Actions(drive);
        action.moveToElement(subdrop).perform();
        Custom.Twait();
        action.click(subdrop).perform();

Console shows:

Exception in thread "main" org.openqa.selenium.UnsupportedCommandException: POST /session/a37a745a-e40c-45a9-9760-8e01b451a017/moveto did not match a known command (WARNING: The server did not provide any stacktrace information)

I have also added Wait in Between where i'm using this code. Here for simplicity i did not include it.

Need Help.

Answer 1

In your first option selenium clearly saying Element should have been "select" but was "option", means here you are providing the xpath for option while expecting only xpath for select.

Don't need to use other option as you provided, Just use your first option as below :-

Select elm = new Select(driver.findElement(By.id("type")));
elm.selectByVisibleText("Date");

or ByIndex

elm.selectByIndex(2);

or ByValue

elm.selectByValue("1");

If your first option unfortunatly not work I prefer you to use your third option Using JavascriptExecutor as below :-

WebElement select = driver.findElement(By.id("type"));

((JavascriptExecutor)driver).executeScript("var select = arguments[0]; for(var i = 0; i < select.options.length; i++){ if(select.options[i].text == arguments[1]){ select.options[i].selected = true; } }", select, "Date");

Hope it will help you...:)