I am trying to test an ui-select with protractor. In this ui-select I have a list of countries. My html looks like:
<ui-select ng-model="datiAnagrafici.countryOfBirth" name="countryOfBirth" theme="bootstrap" reset-search-input="true" append-to-body="true" required blur>
<ui-select-match placeholder="paese di nascita">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="country.code as country in countries | filter: {name:$select.search}">
<span ng-bind-html="country.name"></span>
</ui-select-choices>
</ui-select>
My page object looks like:
this.country = element(by.model('datiAnagrafici.countryOfBirth'));
this.fillForm = function(){
this.country.sendKeys('IT');
}
In my spec file I have:
it('should fill the form', function() {
form.fillForm();
})
But when i run my test the ng-model is not filled with the sent data. Do you have any tips? Thanks
I have found the solution here
this.country = element(by.model('datiAnagrafici.countryOfBirth'));
this.selectCountry = this.country.element(by.css('.ui-select-search'));
then in the fill form method is almost as alecxe said:
this.country.click();
this.selectCountry.sendKeys('Italy');
You can also wrap an ui-select with a function like that:
function UiSelect(elem) {
var self = this;
self._input = elem;
self._selectInput = self._input.element(by.css('.ui-select-search'));
self._choices = self._input.all(by.css('.ui-select-choices .ui-select-choices-row-inner'));
self.sendKeys = function(val) {
self._input.click();
self._selectInput.clear();
return self._selectInput.sendKeys(val);
};
self.pickChoice = function(index){
browser.waitForAngular();
expect(self._choices.count()).not.toBeLessThan(index + 1);
return self._choices.get(index).click();
};
};
Now it's easier to manipulate any ui-select input:
var input = new UiSelect(element(by.model('datiAnagrafici.countryOfBirth')));
input.sendKeys('IT');
input.pickChoice(0); // Pick choice with index 0 when searching for 'IT'.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With