We Keep Coding

HTML5 input+datalist control item selection with Selenium

Use case is to select an item from a dropdown with help of selenium. I have tried the following but unable to achieve my goal. The input tag refers to a datalist .
String baseUrl = "https://angular-cwmwke.stackblitz.io" ;
driver.get(baseUrl); // opens the webpage
// Put some wait for the page to load the dropdown
driver.findElement(By.xpath("//input[#list='id-car']")).click(); // clicks on the dropdown
driver.findElement(By.xpath("//*[#id='id-car']/option[1]")).click(); // Does not works.
It fails and this is the exception .
JavascriptException: javascript error: option element is not in a select
Selenium version : 3.14.0 and
Chrome version : 78.0.3904.108
Here is the HTML ( Please ignore the option values ) :
<input _ngcontent-c0="" list="id-car" ng-reflect-model="[object Object]" class="ng-pristine ng-valid ng-touched">
<datalist _ngcontent-c0="" id="id-car">
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<option _ngcontent-c0="" value="[object Object]" ng-reflect-value="[object Object]">Ford-GTX</option>
<option _ngcontent-c0="" value="[object Object]" ng-reflect-value="[object Object]">Ferarri - Enzo</option>
<option _ngcontent-c0="" value="[object Object]" ng-reflect-value="[object Object]">VW - Amarok</option>
</datalist>

Some things to note initially about the datalist tag, this is different than a select in that a select element limits the choices to a predefined set, and a datalist gives suggested options, but can take any input. Also, the datalist options are usually used with the value attribute, so in this case (and you can test this manually too) when you click any option, the displayed value is the same ([object Object]).
That being noted, the reason you are getting an JavascriptException: javascript error: option element is not in a select is due to, I think, Selenium expecting option tags to be under a select element. The datalist tag operates more like a regular input text box than a select, and must be treated as such when using Selenium.
So, firstly, if you have access to that html code I would update the values to be what the text is now. It would look something like this:
<option _ngcontent-c0="" value="Ford-GTX" ng-reflect-value="Ford-GTX"/>
<option _ngcontent-c0="" value="Ferarri - Enzo" ng-reflect-value="Ferarri - Enzo"/>
<option _ngcontent-c0="" value="VW - Amarok" ng-reflect-value="VW - Amarok"/>
The Selenium code for "selecting" a certain option would then be something like this:
var input = driver.findElement(By.xpath("//input[#list='id-car']"));
var option = driver.findElement(By.xpath("//*[#id='id-car']/option[1]"));
var value = option.getAttribute("value");
input.clear();
input.SendKeys(value);
If this isn't the behavior you would like to achieve, and again you have access to the html, you might consider using a select element instead.
If you don't have access to the html, and really want to use the inner html text, you can simply modify the above code to reference the innerHTML instead of value:
var input = driver.findElement(By.xpath("//input[#list='id-car']"));
var option = driver.findElement(By.xpath("//*[#id='id-car']/option[1]"));
var text = option.getAttribute("innerHTML");
input.clear();
input.SendKeys(text);
Keep in mind however, that this might lead to some strange behavior upon form submit, as a true user click is displaying the value, and not the text.

How to select particular location from the drop down list which is initiated dynamically using api response in selenium webdriver?

Problem Description:
I am trying to automate the filling of the form in which there's a
locality dropdown list. I am facing problem in selecting the option
which are suggest in the suggestion list. The options in the
suggestions list are provided by an api response i.e its dynamic.
I am not able to select one of the option from the suggested list.
String Locality ="//label[contains(text(),'Locality')]/following-sibling::input";
public void insertData(DataTable str) throws InterruptedException {
List<List<String>> list = str.asLists(String.class);
super.identifyElement(locators.xpath, Locality), list.get(1).get(5));// value sendkey= Akurdi;
HTML Element:
<label _ngcontent-c4="" for="Location" class="active">Locality</label>
<input _ngcontent-c4="" autocapitalize="off" autocorrect="off" class="mb-0 ng-valid ng-dirty ng-touched" formcontrolname="locality" placeholder="" spellcheck="off" stype="locality" type="text" ng-reflect-klass="mb-0" ng-reflect-ng-class="[object Object]" ng-reflect-name="locality" ng-reflect-model="Akurdi" autocomplete="off">
Sendkey value form cucumber screnario:
Akurdi...
Display Input dropdown list UI

In these cases I am working with these drop-downs as with usual List. Clicking on drop-down opening, waiting for drop-down to appear, then iterating in the list of it's elements, searching what I need by name, then clicking on it.

Solution
WebDriver driver = new ChromeDriver();
driver.get("http://connexistech.net/godamwale/warehouse");
WebElement locality = driver.findElement(By.xpath(".//div[#id='location']//input"));
locality.sendKeys("Akrudi");
//Here at the end [1] can be any item from 1 to 5 since its showing only 5 suggestions all the time
String xp = "//div[contains(#class, 'pac-container')]//div[contains(#class, 'pac-item')][1]";
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(".//div[contains(#class, 'pac-container')]/div[contains(#class, 'pac-item')]")));
WebElement element = driver.findElement(By.xpath(xp));
wait.until(ExpectedConditions.presenceOfElementLocated(By.xpath("xp")));
element.click();

Dropdown based on user input

Guys could someone help me to find solution for following case:
I have to type several letters for username (actually typed whole username) and click on it to choose. It looks as on screenshot which I added below.
Here is how it looks like on a page:
Added part
<div class="show-temp">
<div class="medium-12 column">
<div id="suggestionBox" class="search-input">
<label for="viewUser">Search user names</label>
<input type="text" autocomplete="off" id="viewUser" onkeydown="javascript: if(event.keyCode == 13 ){ userStats.HideContent();userStats.ApplyFilters(this); return false;}" placeholder="Search user names..">
I tried with this code:
Select dropdown2 = new Select(driver.findElement(By.xpath("//*[#id=\"viewUser\"]")));
dropdown2.selectByVisibleText("Zoran21");
Thread.sleep(2000);
And I got this error:
Element should have been "select" but was "input"
Please assist and thank you in advance

The Select class only works with <select> tags ,it's does not work for other Tags LIke (Input,div).if you want to work with DropDown first check the DoM ,how it's build .if its contain <select> Tag then Use Select Class other wise following the Below Approach.
The Error Indicates to you , DropDown Build With <Input> Tag so Your unable to Select Options By using Select Class
use below approach may be it's help you.
String searchUserXpath ="....";
String optionXpath ="----"
driver.findElement(By.xpath(searchUserXpath )).sendKeys(entersearchOptionValue totally /partially );
//for example option value is HYderabad ,you HYd Then takes xpath of
// HyderabaOPtion...
driver.findElement(By.xpath(optionXpath )).click();

How to select a value from input type dropdown using selenium webdriver?

I am trying to select a value available in a read only drop down and I have tried so many options but still failing to select the desired option. The drop down has two values available ValueOne and ValueTwo. By default the ValueOne is selected and in my case I need to select ValueTwo. I used firebug to get the below code when I click on the drop down and do Inspect Element with firebug
The Code is :
<td class="rcbInputCell rcbInputCellLeft" style="width:100%;">
<input id="ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl02_EditFormControl_rcbControllerType1_Input" class="rcbInput radPreventDecorate" type="text" readonly="readonly" value="ValueOne" name="ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl02$ctl02$EditFormControl$rcbControllerType1" autocomplete="off">
</td>
So far I have tried
1----------
Select DropDown = new Select(driver.findElement(By.id("ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl02_EditFormControl_rcbControllerType1_Input")));
DropDown.selectByVisibleText("ValueTwo");
and I get an exception as
:org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "input"
2------------
WebElement Dropdown = driver.findElement(By.id("ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl02_EditFormControl_rcbControllerType1_Input"));
Select clickThis = new Select (Dropdown);
clickThis.selectByVisibleText("ValueTwo");
Get Exception:
org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "input"
I also tried selectByIndex but still get the above exception message.
3--------------
driver.findElement(By.id("ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl02_EditFormControl_rcbControllerType1_Input")).sendKeys("ValueTwo");
Nothing happens and the case is marked as Pass. No error no exception.
Also I am running my webscript on firefox 38.0.5 with selenium 2.46.0 with eclipse TestNG.
I have confirmed the frame is not an iframe.
Please suggest the solution.

The root problem might be, that this is not a standard select box but an javascript based solution. The code above just shows the 'host' html element. I am pretty sure that there will be a) a previous hidden element that becomes visible or b) a newly created element in your DOM that holds the values. You have to find those (dev tools or firebug) to interact with.
Some pseudo code that might appear (just to get a hint):
<ul>
<li id="element1">ValueOne</li>
<li id="element2">ValueTwo</li>
</ul>
And after it appears (wait for in selenium) you just have to click the desired element.

Find your xpath through firepath addon in firefox.
driver.findElement(By.xpath(".//*#id='ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl02_EditFormControl_rcbControllerType1_Input']")).click();
Select value in dropdown ->goto firpath by right click and copy xpath
driver.findElement(By.xpath(".//*#id='ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl02_EditFormControl_rcbControllerType1_Input']/span[3]")).click();
hope you will find your solution :-)

You can use this :-
driver.findElement(By.id("ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl02_EditFormControl_rcbControllerType1_Input")).sendKeys("ValueTwo", Keys.ARROW_DOWN, Keys.ENTER)

you can use the following code. Here what I have done is find the dropdown, click on it and find the option to select and send down key until we see the element to select and after click on it.
public class InputDropdownselect {
#Test
public void login() throws Exception
{
System.setProperty("webdriver.chrome.driver", "G:\\drivers\\chrome\\chromedriver_win32\\chromedriver.exe");
WebDriver driver= new ChromeDriver();
driver.get("https://yourwebsite.com");
driver.manage().window().maximize();
driver.findElement(By.id("txtuser")).sendKeys("123456");
driver.findElement(By.id("txtpassword")).sendKeys("Abc!#1");
driver.findElement(By.id("log-btn")).click();
Thread.sleep(2000);
driver.findElement(By.id("enrollment")).click();
//driver.findElement(By.xpath("//*[#id=\"enrollment\"]")).click();
driver.findElement(By.xpath("//*[#id=\"studentBasicForm\"]/div[2]/div[9]/div/div/input")).click();
Actions action= new Actions(driver);
WebElement joiningYear=driver.findElement(By.xpath("//input[#placeholder=\"Joining Year Group\"]/following::ul[1]/descendant::li/following::span[contains(text(),\"8\")]"));
do {
action.sendKeys(Keys.ARROW_DOWN).perform();
} while (!joiningYear.isDisplayed());
joiningYear.click();
}
}

How to type text on hidden text box in WebDriver with Java

I am trying to sendkeys to an input，but I don't know why it warns me like this:
org.openqa.selenium.InvalidElementStateException: Element must not be hidden, disabled or read-only (WARNING: The server did not provide any stacktrace information)
The HTML page source:
<span id="mini-7" class="mini-textbox mini-textbox-empty" style="border-width: 0pt; width: 342px;">
<input class="mini-textbox-input" type="text" autocomplete="off" style="width: 338px;">
<input type="hidden">
</span>
My code:
driver.findElement(By.cssSelector("#mini-7 > input.mini-textbox-input")).clear();
driver.findElement(By.cssSelector("#mini-7 > input.mini-textbox-input")).sendKeys("yy");
Then I change my code like this:
JavascriptExecutor jse = (JavascriptExecutor)driver;
((JavascriptExecutor) jse).executeScript("arguments[0].type ='text';",driver.findElement(By.xpath("//span[#id='mini-7']/input[2]")));
But this time it throws out js error. Why?
I use sendkeys to the first input，this input is not hidden

That input could still have css property visibility: hidden or display: none. That's what exception is telling you. Check all the properties with browser's dev tools.

First of all it needs to change the value of type attribute as text from hidden. Now, you are able to type on that text by using WebDriver. So, the overall code for typing with WebDriver using Java and Javascript as follows:
WebDriver driver = new FirefoxDriver();
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("document.getElementById('mini-7').setAttribute('type', 'text');");
driver.findElement(By.cssSelector("#mini-7 > input.mini-textbox-input")).clear();
driver.findElement(By.cssSelector("#mini-7 > input.mini-textbox-input")).sendKeys("yy");
For 1st input field which is not hidden, use absolute path for cssSelector.

What you can do in this case is making the element visible by modifying the css tag for
visibility: hidden
or
display: none
using javascript just before sending keys to it.