Javascript 使用用户界面选择进行量角器测试

Javascript 使用用户界面选择进行量角器测试,javascript,angularjs,testing,protractor,angular-ui-select,Javascript,Angularjs,Testing,Protractor,Angular Ui Select,我正在尝试使用量角器测试ui选择。在此ui中,选择“我有一个国家/地区列表”。 我的html看起来像: <ui-select ng-model="datiAnagrafici.countryOfBirth" name="countryOfBirth" theme="bootstrap" reset-search-input="true" append-to-body="true" required blur> <ui-select-match p

我正在尝试使用量角器测试ui选择。在此ui中,选择“我有一个国家/地区列表”。 我的html看起来像:

<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>
this.country = element(by.model('datiAnagrafici.countryOfBirth'));
this.fillForm = function(){
   this.country.sendKeys('IT');
}
在我的等级库文件中,我有:

it('should fill the form', function() {
  form.fillForm();
})
但当我运行测试时,ng模型并没有填充发送的数据。 你有什么建议吗? 谢谢

在发送键之前,单击
ui选择元素:


我找到了解决办法

然后在填写表格的方法中,几乎如alecxe所说:

this.country.click();
this.selectCountry.sendKeys('Italy');

虽然我无法让狙击手87的答案对我有效,但通过使用css,这一点是正确的:

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

您还可以使用如下函数包装ui选择:

    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();
        };
    };
现在操作任何ui选择输入都更容易了:

var input = new UiSelect(element(by.model('datiAnagrafici.countryOfBirth')));
input.sendKeys('IT'); 
input.pickChoice(0); // Pick choice with index 0 when searching for 'IT'. 

单击ui select元素并填充输入后,应通过添加以下内容选择结果:

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

它打开ui选择,但不写入键。它好像失去了对ui-select的关注。这也是正确的,我使用了模型引用,你使用了css引用,这两种方法都是正确的。
var input = new UiSelect(element(by.model('datiAnagrafici.countryOfBirth')));
input.sendKeys('IT'); 
input.pickChoice(0); // Pick choice with index 0 when searching for 'IT'. 
element.all(by.css('.ui-select-choices-row-inner span')).first().click();