How to select option in drop down protractorjs e2e tests

Question

I am trying to select an option from a drop down for the angular e2e tests using protractor.

Here is the code snippet of the select option:

<select id="locregion" class="create_select ng-pristine ng-invalid ng-invalid-required" required="" ng-disabled="organization.id !== undefined" ng-options="o.id as o.name for o in organizations" ng-model="organization.parent_id">
    <option value="?" selected="selected"></option>
    <option value="0">Ranjans Mobile Testing</option>
    <option value="1">BeaverBox Testing</option>
    <option value="2">BadgerBox</option>
    <option value="3">CritterCase</option>
    <option value="4">BoxLox</option>
    <option value="5">BooBoBum</option>
</select>

I have tried:

ptor.findElement(protractor.By.css('select option:1')).click();

This gives me the following error:

An invalid or illegal string was specified Build info: version: '2.35.0', revision: 'c916b9d', time: '2013-08-12 15:42:01' System info: os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.9', java.version: '1.6.0_65' Driver info: driver.version: unknown

I have also tried:

ptor.findElement(protractor.By.xpath('/html/body/div[2]/div/div[4]/div/div/div/div[3]/ng-include/div/div[2]/div/div/organization-form/form/div[2]/select/option[3]')).click();

This gives me the following error:

ElementNotVisibleError: Element is not currently visible and so may not be interacted with Command duration or timeout: 9 milliseconds Build info: version: '2.35.0', revision: 'c916b9d', time: '2013-08-12 15:42:01' System info: os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.9', java.version: '1.6.0_65' Session ID: bdeb8088-d8ad-0f49-aad9-82201c45c63f Driver info: org.openqa.selenium.firefox.FirefoxDriver Capabilities [{platform=MAC, acceptSslCerts=true, javascriptEnabled=true, browserName=firefox, rotatable=false, locationContextEnabled=true, version=24.0, cssSelectorsEnabled=true, databaseEnabled=true, handlesAlerts=true, browserConnectionEnabled=true, nativeEvents=false, webStorageEnabled=true, applicationCacheEnabled=false, takesScreenshot=true}]

Can anyone please help me with this problem or throw some light on what i might be doing wrong here.

score 258 · Answer 1 · edited Aug 30 '20 at 00:09

258

For me worked like a charm

element(by.cssContainingText('option', 'BeaverBox Testing')).click();

edited Aug 30 '20 at 00:09

Christopher Moore

15,626
10
42
52

answered Jun 17 '14 at 08:47

Fatz

2,589
2
11
2

2

Minor note - v0.22 only (I just went to replace my code with this today, and had to upgrade to get it) – PaulL Jul 25 '14 at 21:47
Is there a way for targeting elements using this? Such as having duplicate State select menus. – Christopher Marshall Sep 15 '14 at 21:41
12

Christopher, `ElementFinder` is chain-able, so you can do: `element(by.css('.specific-select')).element(by.cssContainingText('option', 'BeaverBox Testing')).click();` – Joel Kornbluh Sep 29 '14 at 21:10
7

Note that you can get partial matches, so 'Small' will match 'Extra Small'. – TrueWill Aug 18 '15 at 16:12
3

To add to TrueWill's comment: The down side of this solution is that if you have two similar options it will use the last found option - which threw up errors based on the wrong selection. What worked for me was http://stackoverflow.com/a/25333326/1945990 – user115014 Sep 09 '15 at 08:21
Using this method the value of `form.$pristine` was not updated . Using the `sendKeys()` way worked ok for me. – David Casillas Mar 05 '17 at 10:51
If a partial match is a problem, you can use a RegExp instead of a string. – twm Sep 12 '18 at 18:44

score 90 · Accepted Answer · edited Apr 01 '21 at 18:44

90

I had a similar problem, and eventually wrote a helper function that selects dropdown values.

I eventually decided that I was fine selecting by option number, and therefore wrote a method that takes an element and the optionNumber, and selects that optionNumber. If the optionNumber is null it selects nothing (leaving the dropdown unselected).

var selectDropdownbyNum = function ( element, optionNum ) {
  if (optionNum){
    var options = element.all(by.tagName('option'))   
      .then(function(options){
        options[optionNum].click();
      });
  }
};

I wrote a blog post if you want more detail, it also covers verifying the text of the selected option in a dropdown: http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

edited Apr 01 '21 at 18:44

Sergey Pleshakov

7,964
2
17
40

answered Dec 01 '13 at 03:05

PaulL

6,650
3
35
39

1

Didn't work for me, got element.findElements is not a function. – Justin Mar 19 '18 at 15:52
even if it works, there are multiple problems with this code. 1. It's not clear why variable `options` is created if the output of the command is always `undefined`. 2. For getting one element out of elementArrayFinder, it's better (and easier) to use .get() method. 3. If you pass an element to the function, then `element.all` statement won't work. 4. It's better to use `async` functions these days. Here is an example https://stackoverflow.com/a/66110526/9150146 – Sergey Pleshakov Apr 01 '21 at 18:49

score 32 · Answer 3 · edited May 23 '17 at 11:54

An elegant approach would involve making an abstraction similar to what other selenium language bindings offer out-of-the-box (e.g. Select class in Python or Java).

Let's make a convenient wrapper and hide implementation details inside:

var SelectWrapper = function(selector) {
    this.webElement = element(selector);
};
SelectWrapper.prototype.getOptions = function() {
    return this.webElement.all(by.tagName('option'));
};
SelectWrapper.prototype.getSelectedOptions = function() {
    return this.webElement.all(by.css('option[selected="selected"]'));
};
SelectWrapper.prototype.selectByValue = function(value) {
    return this.webElement.all(by.css('option[value="' + value + '"]')).click();
};
SelectWrapper.prototype.selectByPartialText = function(text) {
    return this.webElement.all(by.cssContainingText('option', text)).click();   
};
SelectWrapper.prototype.selectByText = function(text) {
    return this.webElement.all(by.xpath('option[.="' + text + '"]')).click();   
};

module.exports = SelectWrapper;

Usage example (note how readable and easy-to-use it is):

var SelectWrapper  = require('select-wrapper');
var mySelect = new SelectWrapper(by.id('locregion'));

# select an option by value
mySelect.selectByValue('4');

# select by visible text
mySelect.selectByText('BoxLox');

Solution taken from the following topic: Select -> option abstraction.

FYI, created a feature request: Select -> option abstraction.

Why do you use 'return' in the select funtions? Is that necessary? — Michiel, Nov 12 '15 at 14:30
@Michiel good point. Might be necessary if you want to explicitly resolve the promise returned by `click()`. Thanks. — alecxe, Nov 12 '15 at 16:41

score 22 · Answer 4 · edited Oct 16 '14 at 09:29

22

element(by.model('parent_id')).sendKeys('BKN01');

edited Oct 16 '14 at 09:29

Martin Geisler

72,968
25
171
229

answered Aug 15 '14 at 19:58

Sandesh Danwale

237
2
2

1

It is the most correct for me. With cssContainingText not you make sure to capture the desired field. Just think if you have 2 selectbox with the same values. +1 – YoBre Oct 07 '15 at 09:29
4

Sorry, what is BKN01? – ESP32 Jun 28 '16 at 10:35
1

@Gerfried BKN01 is the text which you want to select from the drop down. – Milan Kumar Sep 30 '16 at 13:38
@GalBracha Sorry didn't get you – Milan Kumar Oct 10 '16 at 13:58
If you have another option which share same prefex as BKN01, it will not work. A random one will be picked up. – zs2020 Mar 21 '17 at 19:27
This probably will not work in Angular 2+ applications where `model` and `binding` are not available. Still. – javafueled Dec 09 '20 at 18:57

bekite · Answer 5 · 2013-10-25T22:44:56.807

15

To access a specific option you need to provide the nth-child() selector:

ptor.findElement(protractor.By.css('select option:nth-child(1)')).click();

edited Oct 25 '13 at 22:44

answered Oct 25 '13 at 22:07

bekite

3,444
2
23
31

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – jpw Oct 25 '13 at 22:33
@jpw is my answer wrong. or is it simply the formulation of my answer thats wrong? – bekite Oct 25 '13 at 22:37
The formulation of an answer as a question is why. I don't know if it's the correct answer. If it is you should formulate it as such. – jpw Oct 25 '13 at 22:41
3

@bekite Didn't work for me.Still getting the error Element Not visible error when i tried your suggestion – Ranjan Bhambroo Oct 26 '13 at 01:43

Xotabu4 · Answer 6 · 2018-03-02T13:08:30.737

8

This is how i did my selection.

function switchType(typeName) {
     $('.dropdown').element(By.cssContainingText('option', typeName)).click();
};

edited Mar 02 '18 at 13:08

answered May 26 '14 at 13:43

Xotabu4

3,063
17
29

score 5 · Answer 7 · answered Apr 29 '14 at 16:24

5

Here's how I did it:

$('select').click();
$('select option=["' + optionInputFromFunction + '"]').click();
// This looks useless but it slows down the click event
// long enough to register a change in Angular.
browser.actions().mouseDown().mouseUp().perform();

answered Apr 29 '14 at 16:24

yurisich

6,991
7
42
63

To wait for angular to finish up pending processing, use protractor's `waitForAngular()` method. – Avi Cherry Aug 06 '15 at 23:47

score 5 · Answer 8 · edited May 16 '15 at 14:25

5

Try this, it is working for me:

element(by.model('formModel.client'))
    .all(by.tagName('option'))
    .get(120)
    .click();

edited May 16 '15 at 14:25

Dmitri Zaitsev

13,548
11
76
110

answered Apr 13 '15 at 09:17

Javeed

59
1
1

score 4 · Answer 9 · edited Feb 05 '15 at 14:30

4

You can try this hope it will work

element.all(by.id('locregion')).then(function(selectItem) {
  expect(selectItem[0].getText()).toEqual('Ranjans Mobile Testing')
  selectItem[0].click(); //will click on first item
  selectItem[3].click(); //will click on fourth item
});

edited Feb 05 '15 at 14:30

glepretre

8,154
5
43
57

answered Mar 09 '14 at 12:41

Zahid Afaque

243
4
13

score 4 · Answer 10 · answered Oct 06 '16 at 07:24

4

Another way to set an option element:

var select = element(by.model('organization.parent_id'));
select.$('[value="1"]').click();

answered Oct 06 '16 at 07:24

surya narayana raju g

341
2
5
9

var orderTest = element(by.model('ctrl.supplier.orderTest')) orderTest.$('[value="1"]').click(); am getting error By(css selector, [value="3"]) – Anuj K.C. Oct 20 '16 at 09:12

score 3 · Answer 11 · answered May 19 '15 at 13:59

3

To select items (options) with unique ids like in here:

<select
    ng-model="foo" 
    ng-options="bar as bar.title for bar in bars track by bar.id">
</select>

I'm using this:

element(by.css('[value="' + neededBarId+ '"]')).click();

answered May 19 '15 at 13:59

Vladius

4,268
2
20
21

crashbus · Answer 12 · 2018-06-11T10:26:48.070

We wrote a library which includes 3 ways to select an option:

selectOption(option: ElementFinder |Locator | string, timeout?: number): Promise<void>

selectOptionByIndex(select: ElementFinder | Locator | string, index: number, timeout?: number): Promise<void>

selectOptionByText(select: ElementFinder | Locator | string, text: string, timeout?: number): Promise<void>

Additional feature of this functions is that they wait for the element to be displayed before any action on the select is performed.

You can find it on npm @hetznercloud/protractor-test-helper. Typings for TypeScript are provided as well.

Calahad · Answer 13 · 2014-03-27T05:16:02.880

Maybe not super elegant, but efficient:

function selectOption(modelSelector, index) {
    for (var i=0; i<index; i++){
        element(by.model(modelSelector)).sendKeys("\uE015");
    }
}

This just sends key down on the select you want, in our case, we are using modelSelector but obviously you can use any other selector.

Then in my page object model:

selectMyOption: function (optionNum) {
       selectOption('myOption', optionNum)
}

And from the test:

myPage.selectMyOption(1);

score 2 · Answer 14 · answered Jul 29 '15 at 01:27

The problem is that solutions that work on regular angular select boxes do not work with Angular Material md-select and md-option using protractor. This one was posted by another, but it worked for me and I am unable to comment on his post yet (only 23 rep points). Also, I cleaned it up a bit, instead of browser.sleep, I used browser.waitForAngular();

element.all(by.css('md-select')).each(function (eachElement, index) {
    eachElement.click();                    // select the <select>
    browser.waitForAngular();              // wait for the renderings to take effect
    element(by.css('md-option')).click();   // select the first md-option
    browser.waitForAngular();              // wait for the renderings to take effect
});

I just use this: `element(by.model('selectModel')).click(); element(by.css('md-option[value="searchOptionValue"]')).click(); ` — Luan Nguyen, Jun 10 '16 at 17:55
Here's another approach: `mdSelectElement.getAttribute('aria-owns').then( function(val) { let selectMenuContainer = element(by.id(val)); selectMenuContainer.element(by.css('md-option[value="foo"]')).click(); } );` — gbruins, Oct 18 '16 at 01:05

score 1 · Answer 15 · edited May 23 '17 at 12:34

There's an issue with selecting options in Firefox that Droogans's hack fixes that I want to mention here explicitly, hoping it might save someone some trouble: https://github.com/angular/protractor/issues/480.

Even if your tests are passing locally with Firefox, you might find that they're failing on CircleCI or TravisCI or whatever you're using for CI&deployment. Being aware of this problem from the beginning would have saved me a lot of time:)

tony2tones · Answer 16 · 2020-06-04T20:21:23.240

I've been trawling the net for an answer on how to select an option in a model dropdown and i've used this combination which has helped me out with Angular material.

element(by.model("ModelName")).click().element(By.xpath('xpathlocation')).click();

it appears that when throwing the code all in one line it could find the element in the dropdown.

Took a lot of time for this solution I hope that this helps someone out.

score 1 · Answer 17 · answered Dec 30 '16 at 18:49

1

Helper to set the an option element:

selectDropDownByText:function(optionValue) {
            element(by.cssContainingText('option', optionValue)).click(); //optionValue: dropDownOption
        }

answered Dec 30 '16 at 18:49

Adnan Ghaffar

1,345
7
26
46

score 1 · Answer 18 · answered Feb 26 '17 at 10:19

If below is the given dropdown-

            <select ng-model="operator">
            <option value="name">Addition</option>
            <option value="age">Division</option>
            </select>

Then protractorjs code can be-

        var operators=element(by.model('operator'));
      operators.$('[value=Addition]').click();

Source-https://github.com/angular/protractor/issues/600

score 1 · Answer 19 · answered Apr 17 '17 at 15:17

1

Select option by Index:

var selectDropdownElement= element(by.id('select-dropdown'));
selectDropdownElement.all(by.tagName('option'))
      .then(function (options) {
          options[0].click();
      });

answered Apr 17 '17 at 15:17

Shardul

984
1
12
19

score 1 · Answer 20 · answered May 26 '17 at 12:12

I've improved a bit the solution written by PaulL. First of all I fixed the code to be compatible with the last Protractor API. And then I declare the function in 'onPrepare' section of a Protractor config file as a member of the browser instance, so it can be referenced form any e2e spec.

  onPrepare: function() {
    browser._selectDropdownbyNum = function (element, optionNum) {
      /* A helper function to select in a dropdown control an option
      * with specified number.
      */
      return element.all(by.tagName('option')).then(
        function(options) {
          options[optionNum].click();
        });
    };
  },

score 1 · Answer 21 · edited Dec 08 '19 at 13:43

The below example is the easiest way . I have tested and passed in Protractor Version 5.4.2

//Drop down selection  using option's visibility text 

 element(by.model('currency')).element(by.css("[value='Dollar']")).click();
 Or use this, it   $ isshort form for  .By.css
  element(by.model('currency')).$('[value="Dollar"]').click();

//To select using index

var select = element(by.id('userSelect'));
select.$('[value="1"]').click(); // To select using the index .$ means a shortcut to .By.css

Full code

describe('Protractor Demo App', function() {

  it('should have a title', function() {

     browser.driver.get('http://www.way2automation.com/angularjs-protractor/banking/#/');
    expect(browser.getTitle()).toEqual('Protractor practice website - Banking App');
    element(by.buttonText('Bank Manager Login')).click();
    element(by.buttonText('Open Account')).click();

    //Drop down selection  using option's visibility text 
  element(by.model('currency')).element(by.css("[value='Dollar']")).click();

    //This is a short form. $ in short form for  .By.css
    // element(by.model('currency')).$('[value="Dollar"]').click();

    //To select using index
    var select = element(by.id('userSelect'));
    select.$('[value="1"]').click(); // To select using the index .$ means a shortcut to .By.css
    element(by.buttonText("Process")).click();
    browser.sleep(7500);// wait in miliseconds
    browser.switchTo().alert().accept();

  });
});

Sergey Pleshakov · Answer 22 · 2021-07-27T14:25:07.747

If none of the answer's above worked for you, try this

works with async/await too

For selecting options by text

let textOption = "option2"
await element(by.whichever('YOUR_DROPDOWN_SELECTOR'))
  .getWebElement()
  .findElement(by.xpath(`.//option[text()="${textOption}"]`))
  .click();

or by number

let optionNumber = 2
await element(by.whichever('YOUR_DROPDOWN_SELECTOR'))
  .getWebElement()
  .findElement(by.xpath(`.//option[${optionNumber}]`))
  .click();

Of course you may need to modify the xpath of child options

Don't ask me why, but this is the only way I could automate my dropdowns, when I lost hope already

Update

There was actually one case when even this approach didnt work. THe work around was a bit ugly but worked. I simply had to select the value two times

score 0 · Answer 23 · edited May 16 '15 at 14:28

We wanted to use the elegant solution up there using angularjs material but it didnt work because there are actually no option / md-option tags in the DOM until the md-select has been clicked. So the "elegant" way didn't work for us (note angular material!) Here is what we did for it instead, don't know if its the best way but its definately working now

element.all(by.css('md-select')).each(function (eachElement, index) {
    eachElement.click();                    // select the <select>
    browser.driver.sleep(500);              // wait for the renderings to take effect
    element(by.css('md-option')).click();   // select the first md-option
    browser.driver.sleep(500);              // wait for the renderings to take effect
});

We needed to have 4 selects selected and while the select is open, there is an overlay in the way of selecting the next select. thats why we need to wait 500ms to make sure we don't get into trouble with the material effects still being in action.

score 0 · Answer 24 · answered May 22 '15 at 17:18

Another way to set an option element:

var setOption = function(optionToSelect) {

    var select = element(by.id('locregion'));
    select.click();
    select.all(by.tagName('option')).filter(function(elem, index) {
        return elem.getText().then(function(text) {
            return text === optionToSelect;
        });
    }).then(function(filteredElements){
        filteredElements[0].click();
    });
};

// using the function
setOption('BeaverBox Testing');

score 0 · Answer 25 · answered May 20 '16 at 08:55

----------
element.all(by.id('locregion')).then(function(Item)
{
 // Item[x] = > // x is [0,1,2,3]element you want to click
  Item[0].click(); //first item

  Item[3].click();     // fourth item
  expect(Item[0].getText()).toEqual('Ranjans Mobile Testing')


});

score 0 · Answer 26 · answered Nov 22 '16 at 11:34

0

You can select dropdown options by value: $('#locregion').$('[value="1"]').click();

answered Nov 22 '16 at 11:34

Sander Lepik

65
1
9

score 0 · Answer 27 · answered Aug 27 '18 at 09:52

Here is how to do it by either option value or index. This example is a bit crude, but it shows how to do what you want:

html:

<mat-form-field id="your-id">
    <mat-select>
        <mat-option [value]="1">1</mat-option>
        <mat-option [value]="2">2</mat-option>
    </mat-select>
</mat-form-field>

ts:

function selectOptionByOptionValue(selectFormFieldElementId, valueToFind) {

  const formField = element(by.id(selectFormFieldElementId));
  formField.click().then(() => {

    formField.element(by.tagName('mat-select'))
      .getAttribute('aria-owns').then((optionIdsString: string) => {
        const optionIds = optionIdsString.split(' ');    

        for (let optionId of optionIds) {
          const option = element(by.id(optionId));
          option.getText().then((text) => {
            if (text === valueToFind) {
              option.click();
            }
          });
        }
      });
  });
}

function selectOptionByOptionIndex(selectFormFieldElementId, index) {

  const formField = element(by.id(selectFormFieldElementId));
  formField.click().then(() => {

    formField.element(by.tagName('mat-select'))
      .getAttribute('aria-owns').then((optionIdsString: string) => {
        const optionIds = optionIdsString.split(' ');

        const optionId = optionIds[index];
        const option = element(by.id(optionId));
        option.click();
      });
  });
}

selectOptionByOptionValue('your-id', '1'); //selects first option
selectOptionByOptionIndex('your-id', 1); //selects second option

score 0 · Answer 28 · answered Dec 06 '18 at 10:31

static selectDropdownValue(dropDownLocator,dropDownListLocator,dropDownValue){
    let ListVal ='';
    WebLibraryUtils.getElement('xpath',dropDownLocator).click()
      WebLibraryUtils.getElements('xpath',dropDownListLocator).then(function(selectItem){
        if(selectItem.length>0)
        {
            for( let i =0;i<=selectItem.length;i++)
               {
                   if(selectItem[i]==dropDownValue)
                   {
                       console.log(selectItem[i])
                       selectItem[i].click();
                   }
               }            
        }

    })

}

score 0 · Answer 29 · answered Dec 02 '19 at 12:39

We can create a custom DropDown class for this and add a method as:

async selectSingleValue(value: string) {
        await this.element.element(by.xpath('.//option[normalize-space(.)=\'' + value + '\']')).click();
    }

Also, to verify what value is currently selected, we can have:

async getSelectedValues() {
        return await this.element.$('option:checked').getText();
    }

score 0 · Answer 30 · edited Jun 02 '20 at 16:33

0

This is a simple one line answer in which angular has special locator which can help to select and index from list.

element.all(by.options('o.id as o.name for o in organizations')).get(Index).click()

edited Jun 02 '20 at 16:33

David Buck

3,752
35
31
35

answered Jun 02 '20 at 16:16

Vaibhav Dixit

1

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. [From Review](/review/late-answers/26301327) – double-beep Jun 02 '20 at 16:36

score 0 · Answer 31 · answered Mar 02 '21 at 09:45

0

This worked fine for Angular Material

element(by.css("mat-select[formcontrolname=myMatSelect]")).sendKeys(valueToSet);

It should not set the "valueToSet" if it's not present in your options.

answered Mar 02 '21 at 09:45

Saad Joudi

595
4
5

sarath · Answer 32 · 2022-04-20T06:15:56.820

0

The simplest method to select an option using the index I have found is,

var selectDropdownElement = await element(by.xpath("Some Xpath"));
                await selectDropdownElement.all(by.tagName('option')).then(function (options) {
                        options[index].click();
                });

'index' is the option number which you want to click

edited Apr 20 '22 at 06:15

answered Apr 11 '22 at 08:58

sarath

1
1

Kanhaiya Kumar · Answer 33 · 2017-10-22T08:22:25.533

-1

Select the option by CSS property

element(by.model("organization.parent_id")).element(by.css("[value='1']")).click();

or

element(by.css("#locregion")).element(by.css("[value='1']")).click();

Where locregion(id), organization.parent_id(model name) are the attributes of select element.

edited Oct 22 '17 at 08:22

answered Oct 20 '17 at 08:01

Kanhaiya Kumar

131
1
6

score -1 · Answer 34 · edited May 25 '19 at 10:47

-1

You can select drop down options like this:

element(by.xpath(
'//*[@id="locregion"]//option[contains(text(),"Ranjans Mobile Testing")]'
)).click();

edited May 25 '19 at 10:47

Xotabu4

3,063
17
29

answered Nov 02 '17 at 04:58

Vinod Kumar

9
3

How to select option in drop down protractorjs e2e tests

34 Answers34

If none of the answer's above worked for you, try this

works with async/await too

Update

Linked

Related