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.

can´t select dropdown option (selenide/java)

I have a little problem selecting options out of drop down lists with selenide (java).
Here's a little snippet of the HTML code and my try to select the option by the value:
HTML snippet
[Java code]
String dateRangeSearchFor = "YESTERDAY";
ElementsCollection ListOfOptions = $(By.id("searchMaskForm:jobSearch_dateRange_input")).$$(By.tagName("option"));
logger.info("selecting option");
for (SelenideElement listElement : ListOfOptions)
{
String valueOfElement = listElement.getAttribute("value");
if (valueOfElement.equals(dateRangeSearchFor))
{
//$(By.xpath("//*[#id='searchMaskForm:jobSearch_dateRange_input']/option[contains(., '"+dateRangeSearchFor+"')]")).setSelected(true);
listElement.setSelected(true); break;
}
}
For some reason the code is not working, neither with the text nor with the index. Any suggestions?
Edit: .click(); and selectOption(); aren't working neither

SelenideElement have method selectOptionByValue(java.lang.String... value)

The piece of code below will help:
String dateRangeSearchFor = "YESTERDAY";
Select select = new
Select($(By.id("searchMaskForm:jobSearch_dateRange_input")));
select.selectByValue(dateRangeSearchFor);
In my case it did.
BTW, if the automation test suite you're creating is a part of automation, that includes functional and load testing, this link will help you to combine those tools in one system, check it out - How to automate Selenium and jmeter testing .

Selenide provides the following methods for a selecting an option in dropdownlist.
selectOptionByValue(value)
selectOption(text)
selectOption(index)
selectOptionContainingText(text)

If you know the index of the element in dropdown menu then you can just use built-in methon selectOption().
It will look like this:
$(CSS-selector).selectOption(index-of-element);
!!REMINDER: CSS-selector MUST point to the <select> element in HTML.

<select class="switch-version" id="switch-version-select" onchange="switchVersionSelect()">
<option value="/v1.x/demo/my_boss_is_in_a_hurry/flexigrid">Flexigrid</option>
<option value="/v1.x/demo/my_boss_is_in_a_hurry/datatables">Datatables</option>
<option value="/v1.x/demo/my_boss_is_in_a_hurry/bootstrap" selected="selected">Bootstrap V3 Theme</option>
<option value="/v1.x/demo/my_boss_is_in_a_hurry/bootstrap-v4">Bootstrap V4 Theme</option>
<option value="/v1.x/demo/my_boss_is_in_a_hurry/bootstrap-v5">Bootstrap V5 Theme</option>
</select>
In the example of the html code above, to select one of the value options with Selenide simply implement the code below.
public class HomePage {
SelenideElement bootstrapElement = $(By.cssSelector("#switch-version-select"));
public void selecionarDropDown(){
$(bootstrapElement).selectOptionContainingText("Bootstrap V4 Theme");
}
}

How can i deselect an option from a dropdown, when that respective dropdown is not a "multi-select" / java & Selenium

I tried to use the objname.deselectByVisibileText() on multiple dropdowns (select/span) and I get the following error
Exception in thread "main" java.lang.UnsupportedOperationException: You may only deselect options of a multi-select.
How can I clear those respective fields? My method atm looks like this:
public void deselect(String s, String t)
{
WebElement element = wait.until(ExpectedConditions.presenceOfElementLocated(By.xpath(s)));
Select select = new Select(element);
select.deselectByVisibleText(t);
}
Obviously, I need a solution without deselect, as none of them work (byValue, byIndex, etc.) due to the same error as above.

Typically the first option is the default. You can just select it.
select.selectByIndex(0);

If you have a select element that looks like this:
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Running the code:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex];
would return the selected option.
Now you got to know the selected index. So, use javascript executor to unselect it

Geb select element that contains something

How do I select the value of a form select field when it has random numbers in its name?
<select name="select_(random numbers)">
<option value="1"></option>
</select>
I have tried:
formValidity {$("form").(contains('validity')) = "1 year"}
which fails.

There are a few ways to achieve this:
formValidity { $("form select[name*='validity']") }
formValidity.value("1 year")
You were trying to use the Geb way.
Geb Selecting Manual
You can also use CSS and jquery selectors which I used above and also prefer.
CSS Selectors
JQuery Selectors

Assign selected item of a dropdown list of jsp file to a java variable (say String selection)

I want to display the table data from database according to the selected item from a dropdown list in my jsp file, so all I need to do is assign that selected value to a variable of String type, how do i do that, suggest me the piece of code along with the code of dropdown list.

Assume you have a dropdown element in your form of your JSP page as below:
<select name='ele1'>
<option value='a'>A</option>
<option value='b'>B</option>
...
</select>
After submitting the form, you can get the element value from HttpServletRequest:
String selectedValue = request.getParameter("ele1");

You can use Ajax, check out the link http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=580