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

How to retrieve the dynamic value in selenium webdriver

I'm trying to create the test cases using Selenium WebDriver with Java. I have the following HTML syntax in the source.
<label for="00N30000005wfev"><span class=class="requiredMark">*</span>Type</label>
<select id="00N30000005wfev" tabindex="34" name="00N30000005wfev">
<option value="Account">Account</option>
<option value="Client">Client</option>
<option value="Service">Service</option>
</select>
All the "for","id" and "name" value are dynamically generated when the application creates a new item every time. The label name is fixed for the item details. How can I dynamically retrieve this value based on the label name value (e.g. Type)?
When Java runs, it will look at the "Type" label first, then it will be able to find the "for" value.
Thanks

You could use a XPath expression to do this:
WebElement element = driver.findElement(By.xpath("//label[contains(text(),'Type')]"));
String labelForValue = element.getAttribute("for");

Integrate jquery mobile custom select menu with JSF

I'm trying to convert our existing JSF application for mobile devices by integrating jquery mobile. Specifically, I would like to use the custom select menus so it pops up instead of a dropdown as seen here: http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-selects.html. JSF offers SelectOneMenu in order to retrieve data dynamically from the backing bean, but this clearly is not the desired effect. Is there a way to populate jquery mobile select dynamically from backing bean? Below is the code without jsf that I want to replace the options with values from backing bean.
Thanks!
<select name="select1" id="select1" data-native-menu="false" data-theme="l">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>

IMHO You should upgrade jQM to version 1.0 and jQuery 1.6.4
Thinking out loud you could try something like this.
Keep the select menu as is (How your application renders the HTML)
You can add the jQM Markup dynamically with something like this:
//refresh and force rebuild
$('select').selectmenu('refresh', true);
Docs:
http://jquerymobile.com/demos/1.0/docs/forms/selects/methods.html