Testing with protractor using ui-select

Question

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

Gianfra · Accepted Answer · 2015-06-26 10:15:02Z

7

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');

edited Jun 26, 2015 at 10:15

answered Jun 26, 2015 at 10:08

Gianfra

1,1494 gold badges18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stéphane · Accepted Answer · 2016-03-14 23:08:58Z

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'.

alecxe · Accepted Answer · 2015-06-25 16:31:36Z

0

Before sending keys, click the ui-select element:

this.country.click();
this.country.sendKeys('IT');

answered Jun 25, 2015 at 16:31

alecxe

476k127 gold badges1.1k silver badges1.2k bronze badges

1 Comment

Gianfra Over a year ago

It opens the ui-select but it does not write the key. Its like it loses the focus on the ui-select.

Niel · Accepted Answer · 2015-09-29 10:45:12Z

0

While I couldn't get sniper87's answer to work for me, by playing around with the css this worked correctly:

element(by.css('div.ui-select-container div.ui-select-match span.ui-select-input')).click();
element(by.css('div.ui-select-container .ui-select-search')).sendKeys('foo');;

answered Sep 29, 2015 at 10:45

Niel

2,0164 gold badges25 silver badges47 bronze badges

1 Comment

Gianfra Over a year ago

It is right as well, I have used the reference by model and you have used the reference by css, both right approach.

Massi Issar · Accepted Answer · 2016-10-07 11:50:40Z

0

after clicking the ui-select element and filling the input, you should then select result by adding this :

element.all(by.css('.ui-select-choices-row-inner span')).first().click();

answered Oct 7, 2016 at 11:50

Massi Issar

4035 silver badges23 bronze badges

Collectives™ on Stack Overflow

Testing with protractor using ui-select

5 Answers 5

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related