The problem is the option labels change and so I cant grab by label. I need to grab by say option[0]
any idea?
I'm using Selenium IDE (Firefox), this is the piece im asking about:
<tr>
<td>select</td>
<td>dateRangeString</td>
<td>index=1</td>
</tr>
the last TD there is the VALUE field in the IDE,
I already am targeting the select element, but i need to simulate the user selecting the first option. The only way I see to do this is by using LABEL="string" in the VALUE part of the IDE, but string is dynamic so thats not going to work!
you can select it by using the XPath //select/option[index].
Remember that XPath is a 1 based index by standard.
Edit After Question was updated
You can use a number of different ways to select an option from within a select. Below has been copied from the Selenium IDE on how to create option locators. To select the first item it would be index=0
select(selectLocator, optionLocator)
Arguments:
* selectLocator - an element locator identifying a drop-down menu
* optionLocator - an option locator (a label by default)
Select an option from a drop-down using an option locator.
Option locators provide different ways of specifying options of an HTML
Select element (e.g. for selecting a
specific option, or for asserting that
the selected option satisfies a
specification). There are several
forms of Select Option Locator.
* label=labelPattern: matches options based on their labels, i.e. the visible text. (This is the default.)
o label=regexp:^[Oo]ther
* value=valuePattern: matches options based on their values.
o value=other
* id=id: matches options based on their ids.
o id=option1
* index=index: matches an option based on its index (offset from zero).
o index=2
If no option locator prefix is provided, the default behaviour is to
match on label.
Instead of using label="", try using index="1" (to select the first element). Selenium offers label="", id="", value="", and index="" for this sort of cases. For more details, see:
http://release.seleniumhq.org/selenium-core/0.8.0/reference.html
Tricky, but the "type" command helped me here:
<tr>
<td>type</td>
<td>id=numStuff</td>
<td>1</td>
</tr>
The corresponding html looks like this (except the #id and #name attributes)
<select id="numStuff" name="numStuff">
<option selected= value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
I'm wondering if it works for option values longer than 1 keystroke. At least, it's good for the time being.
In C#, i solved this by using:
selenium.Select("id=yourID", "index="+i.ToString());
In selenium IDE I used:
Command: select
Target: XPath target ending in select (not option). XPath can be obtained with FireBug and FirePath.
Value: E.G. "Texas"
or whatever value pattern you require
For example:
select | Locator | index=1 |
It worked for me.
Related
Here's what I'm trying to accomplish.
<select (ngModelChange)="addChild($event)">
<option>Add</option>
<option [value]="null">New Item</option>
<option *ngFor="let child of menuItem.children" [value]="child">
{{child.title}}
</option>
</select>
While it compiles, the addChild method is not called. VSCode is reporting that "The bound output ngModelChange does not exist on any directive or on the element" - so what directive do I need to add?
Try changing your first line to:
<select (change)="addChild($event)">
That should do the job.
You may also find convenient to print strings instead of full objects where it is expected:
<option *ngFor="let child of menuItem.children" [value]="child.id">
and maybe (or maybe not):
<select (ngModelChange)="addChild(child.id)">
if it works better for you and you have a suitable property, of course. YMMV.
AngularDart's SelectElement only supports Strings for values. If you want to pass arbitrary objects, you will need to use a different component - one that supports such functionality.
I need a select option in angular 4, but data binding doesn´t work.
I have a function "ChangeTable" in (ngModelchange) but the parameter always that i send in the function is "undefined".
I have tried to went $event.target.value but it also go "undefined"
this is my code html
<select [(ngModel)]="selectTable" (ngModelChange)="ChangeTable($event)" >
<option>Select item</option>
<option *ngFor="let table of tables" [value]="table.id">
{{table.Description}}
</option>
</select>
this is my code in component
ChangeTable(ev:any){
var tabla=this.selectTabla;
}
You can help me, please.thanks
ngModelChange itself extracts the value from $event so you no more need to do $event.target.value. In your case there must be no id exist in table object that's may be the reason you are getting undefined whenever your binding value property with table's id([value]=table.id).
Check your table's data once and you can also refer this stackblitz link where I've demonstrated your use-case.
I have seen some other posts using below format but it did not work at all, even the select is not opening:
.click(".selectpicker option[value='somevalue']")
But when I wrote like this:
.click("select[id='chooseone']")
it did open the dropdown.
This is how select looks like:
<select class="selectpicker btn dropdown-toggle btn-default" title="Choose one of the following..." id="chooseone" style="">
<option value="chooseone" style="">Choose one</option>
<option value="value1" style="">option 1</option>
<option value="value2" style="">option 2</option>
<option value="value3">option 3</option>
</select>
There is react code in backend, so an onchange event is fired which will display appropriate input field per option and a submit button.
My test is basically:
select an option
fill fields
submit
validate result container
How should I write this code? This is my first time in such thing. Any help is appreciated.
Thanks
UPDATE >>>
This was in Safari and it did not work. But when I installed chromedriver, it did work. Here is the working code:
.click('select[id="searchBySelect"] option[value="any_option_value"]')
This will click the provided option in the select element.
First you need to open the dropdown menu. It looks like you already know this but in any case you would start with:
browser.click('.selectpicker');
Then there are a couple of ways you can get the option you want to click. You can choose a specific option by doing something like this (just modify it to select whichever option you want)
browser.element('css selector', '.selectpicker', function(element) {
browser.elementIdElement(element.value.ELEMENT, 'css selector', 'option[value="value1"]', function(option) {
browser.elementIdClick(option.ELEMENT);
});
});
Or you could get all of the options in an array and click on one of them this way:
browser.elements('css selector', 'option', function(elements) {
browser.elementIdClick(elements.value[0].ELEMENT); //can use any index here as long as you know which one you are looking for
});
tehbeardedone thanks so much for providing your solution. I had to do a small fix to get the elementIdClick() working.
Instead of option.ELEMENT
I had to use option.value.ELEMENT
Since my code snippet had to be added to a page object, this is its final version:
let durationOptionSelector = `option[contains(text(), "${duration}")]`; //dynamic option selector
this.click("#duration_dropdown");
this.api.element("xpath", "#duration_dropdown", function (dropdown) {
this.elementIdElement(dropdown.value.ELEMENT, "xpath", durationOptionSelector, function(option) {
this.elementIdClick(option.value.ELEMENT);
});
});
I'm very very new to jsp and postgresql and I want to add a dropdown menu to my jsp file.
There is table with Names and Numbers and all I want is getting the names displayed in the drop down
This is what I got so far. An empty dropdown with the right numbers of rows (4 as I have only for rows in my table) is displayed but no names!
<sql:query
dataSource="${db}"
var="result">
select name from customer
</sql:query>
<select>
<c:forEach
var="result"
items="${result.rows}">
<option value=${param.name}>${param.name}
</option>
</c:forEach>
</select>
Thanks for any help in advance!
PS: i tried to find an answer but all the answers were about mysql but we are using psql :/
Your option list has the right number or options but they're empty because the variable param doesn't exist.
You have:
<c:forEach var="result" items="${result.rows}">
<option value=${param.name}>${param.name}</option>
</c:forEach>
var is the variable to be created from items, so you don't want it named the same as the items list. This is where you should be creating the variable param. It should be:
<c:forEach var="param" items="${result.rows}">
<option value='<c:out value="${param.name}"/>'><c:out value="${param.name}"/></option>
</c:forEach>
You should probably also do it like <option value='${param.name}'> since the field name is probably text rather than numeric.
I theory seems to be the answer to the pre populated selectbox issue.
<cfselect name = "regions" query = "getRegions" selected="10" value="id" display="name" ></cfselect>
this is what it outouts
<option value="8">Dumfries & Galloway</option>
<option value="9">Dundee City</option>
<option value="10" selected="selected">East Ayrshire</option>
<option value="11">East Dunbartonshire</option>
but my option 10 is not selected automatically. The html looks ok any reason why?
Thanks,
R.
If you are using Firefox then that is probably the reason, because it keeps form values persistent across page reloads. You can use a different browser, or add something to the query string like ?abc=123.