How to test angular multi select dropdown using protractor?

Question

I am using angular-multi-select dropdown from https://github.com/isteven/angular-multi-select. Now i want to write test cases in protractor.

<div ng-show="!attribute.isMultivalued && page != 'view'" 
     class="select-group" 
     multi-select 
     input-model="typesDataDup"
     output-model="attribute.types"
     button-label="typeName"         
     item-label="typeName" 
     tick-property="ticked" 
     selection-mode="single"
     helper-elements="filter"
     is-disabled = "page == 'view'">
</div>

I am unable to send data using model because here we don't mention ng-model.

Could anyone help me out in writing test case for it?

alecxe · Accepted Answer · 2014-12-17 16:20:26Z

5

You can rely on other attributes and use by.css to find the element. For example:

element(by.css('div.select-group'))

or

element(by.css('div[multi-select]'))

As far as I see from the angular-multi-select source code, select options are represented with button elements. Use element.all() to find all buttons inside and click the desired one, for instance, Select All:

element.all(by.css('div[multi-select] button')).then(function(options) {
    options.forEach(function(option) {
        option.getText().then(function(text) {
            if (text.indexOf("Select All") != -1) {
                option.click();
            } 
        });
    });
});

edited Dec 17, 2014 at 16:20

answered Dec 17, 2014 at 16:13

alecxe

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

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

3 Comments

Anusha Nilapu Over a year ago

Thanks @alecexe. Yes but it can't select particular option using this code

alecxe Over a year ago

@AnushaNilapu that's ok, it was an interesting challenge. I'll leave it here in case it would help somebody in the future. Thanks for sharing your solution!

Anusha Nilapu Over a year ago

yeah it may help others

Anusha Nilapu · Accepted Answer · 2014-12-23 07:03:05Z

1

To solve this i took css help. I had checked css in inspect element then i got this solution

element.all(by.buttonText('None selected')).then(function(items) {
   items[1].click();
}); 
element.all(by.model('inputLabel.labelFilter')).then(function(items) {
   items[1].sendKeys(protractor.Key.DOWN+protractor.Key.DOWN);
});
ptor.sleep(200);
element.all(by.css('.multiSelectFocus')).then(function(items) {
   items[0].click();
});

Here i am selecting particular option using DOWN key

answered Dec 23, 2014 at 7:03

Anusha Nilapu

1,3138 gold badges26 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to test angular multi select dropdown using protractor?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related