I have a web page and from where I am trying to to select xpath from a drop down box which don't have any value by default.
<select id="country" class="multi ng-pristine ng-valid ng-empty ng-touched" ng-options="country as country.description for country in vm.countries" ng-change="vm.getDestinations()" ng-model="vm.country" style="">
<option value="?" selected="selected"></option>
<option label="Germany" value="object:589">Germany</option>
<option label="Austria" value="object:590">Austria</option>
<option label="Belgium" value="object:591">Belgium</option>
I have tried using Select.selectByVisibleText() but still not getting. I can find the country field but not able to select a particular country:
public Target selectCountry = Target.the("select country").located(By.xpath("//*[#id=\"app-container\"]/div[1]/span[3]/select[1]"));
Please suggest.
I am able to select the country now. It was not a serenity issue. I was getting to this page after doing some actions on the previous page. Actualy I had 2 separate "When" steps for actions on the previous page and current page. When I merged them in single "When" step then it has started selecting the country from the dropdown on the current page. I don't know why it has not worked with separate steps.
You can inherit (extends) PageObject class to utilize pre defined select class methods such as selectByVisibleText, selectByValue and selectByIndex.
#FindBy(id="country")
WebElementFacade dropDown_Country
public void selectDropDownValues(){
dropDown_Country.selectByVisibleText("Germany");
}
This can be called using Task like
actor.attemptsTo(Click.on(selectDropDownValues()));
Related
I'm using the Select class via Webdriver. The following code actually selects the correct item, but the javascript is NOT triggered. I have tried onClick, onselect, and onfocus and none of them trigger the javascript function when selecting it via the Select class.
Manually it does trigger it.
How can I use the Select Class and also trigger the function? I appreciate any help you can give me!
<select name="elements" id="elements">
<option selected onClick="hideAll()">Select One</option>
<option value="buttons" onClick="changeElement('buttons')">Buttons</option>
<option value="dropdowns" on onClick="changeElement('dropdowns')">Dropdowns</option>
</select>
final WebElement selectMenu = driver.findElement(By.id("elements"));
final Select select = new Select(selectMenu);
select.selectByVisibleText("Buttons");
Automated Version
Manual Version
What I found is that the option tags that have the javascript method running onClick, etc, won't work when using the Select class. It's like they are not considered HTML objects or something. I can't even use the tools to get the xpath.
But if I change the select tag to use the method, and pass in the value, the Select class will actually clicks it and trigger the method.
Now since the option tag can use the onClick(), onSelect(), etc... methods, it may be we see this in the field and it may cause problems. But at least we know about it.
Here's the new HTML version that works with the Select statement:
<select name="elements" onchange="changeElement(this.value)" id="elements">
<option id="elementsHide" selected value="none">Select One</option>
<option id="elementsButtons" value="buttons">Buttons</option>
<option id="elementsDropdowns" value="dropdowns" >Dropdowns</option>
</select>
I'm trying to get my protractor E2E tests to interact with a drop down menu.
In the page that I'm testing, we have a drop down for countries. The dropdown contains 4 selectable options "?" which is blank, and then US, UK, and Canada.
I'm obviously not calling the element correctly within my PO file, as the parameterization is not working. The tests "pass", however when you watch what is being driven, the country that is selected, is the "?" one(which is default). So the test is navigating to the page, selecting the element and not actually clicking on the option that I'd like.
From what I can tell, I need to somehow get the parameterized option that is inputed from the spec file to the element however i'm not really sure if this is possible.
What am I missing/doing wrong?
Spec file:
campaignPO.clickCountryLocation('US');
PageObject file:
this.countryType = by.css('select[ng-model="country"]');
this.clickCountryLocation = function(button) {
element(this.countryType).click(button);
};
Here is the element were working with:
<select class="form-control input-sm ng-pristine ng-invalid ng-invalid-required"
ng-size="11"
ng-model="country"
name="country"
ng-options="opt.value as opt.label for opt in countries"
ng-change="updateCountry()"
required="">
<option value="?" selected="selected" label=""></option>
<option value="0" label="US">US</option>
<option value="1" label="UK">UK</option>
<option value="2" label="Canada">Canada</option>
</select>
I'd use a select-option abstraction suggested here:
Select -> option abstraction
Example usage:
var SelectWrapper = require('select-wrapper');
var mySelect = new SelectWrapper(by.name('country'));
mySelect.selectByText('US');
First of all, you can simplify your select locator by using
var selectEl = element(by.model('country'));
I am not sure the attribute css works very well. To select options:
var optionEl = selectEl.element(by.cssContainingText('option', 'US'));
optionEl.click();
If you are just trying to open the select without selecting a value, don't. Selects are HTML components and you don't want to test them in this way. Even working with them in javascript is cumbersome. If you want to see what values are in there, list the option elements.
I have this code (there is $index because select's are inside ng repeater, I have more than one dynimally generated)
<select name="udaljenosti_{{$index}}" ng-model="attribute.Choices.Id" class="form-control" required>
<option value="" >--Choose--</option>
<option ng-repeat="choice in attribute.Choices" value="{{choice.Id}}" ng-selected="choice.IsSelected==true">
{{choice.Name}} </option>
</select>
There is IsSelected property on choice as you can see. If all choices have IsSelected==false, on submit I get error that some option is required because of required property on select, and when I choose some option on select and hit submit there is no error. Very good, so far. But, when some option is prepopulated from the database there is some strange behaviour. Everything seems good but when I click submit angular says there is error on select field. It says select is required but some option is already selected!!
EDIT: it seems name ang ng-model should much. How to accomplish this because I get error if I put uudaljenosti_{{$index}} inside ng-model?
I am trying to choose the leader of a team using 'select' ng-options feature.
Student object:
student{
name:String,
status : String
}
My code to select team leader is as below.
<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
<option value="">Select leader</option>
<option value="class.team.leader">{{class.team.leader.name}}</option>
</select>
The 'select' is storing the values correctly into the appropriate model values. But, the select is not displaying the model value properly when I go to the page view. But this code is fine for saving the details.
Requirement:
if there is no value for the model, then option value="" ==> 'Select leader' is displayed by default. if else, it should display the 'class.team.student.name'
Some one please let me know where I went wrong.
Thanks.
HTML:
<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
<option ng-show="!weHaveALeader" value="">Select leader</option>
<option ng-show="weHaveALeader" value="class.team.leader">{{class.team.leader.name}}</option>
</select>
JS:
$scope.weHaveALeader = false;
$scope.$watch('class.team.leader', function(new, old) {
$scope.weHaveALeader = true
}
You could remove the second option tag, that seems unneccessary.
I've put your code into a plunker http://plnkr.co/edit/OZCal9ZkCQeqnQJY0WP9?p=preview and it seems to work fine.
<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
<option value="">Select leader</option>
</select>
<div><b>Team Leader:</b> {{class.team.leader}}</div>
If that isn't what you want, please give more detail of what are missing.
The correct method to use select ng-model is as below.
Select leader
{{class.team.leader.name}}
This has solved the issue of displaying on the page reload.
I am new to Angular, I have the following code:
<select id="selectUser" class="form-control" ng-change="selectAction()" ng-model="users"
ng-options="value.SignOnId as value.UserName for value in users">
<option value="">Select a User</option>
</select>
As soon as I select a value from the drop down, it executes the selectAction() method and then all values from the drop down disappear, can anybody tell me what's the reason?
change this: ng-model="users" to ng-model="user"
When you select the user, you are setting the users variable to be the selected user, which means your ng-options no-longer has options in it.