Protractor dropdown list elemente e2e test

Question

i am new with Protractor, i am executing some e2e test and i have problems in this last one, when i try to call a dropdown list and select one of those options.

this is my code:

it('filter', function() {
  console.log('test log');

  var e = document.getElementById('Develop');
  var strUser = e.options[e.selectedIndex].value;

  e.selectedIndex = 2;
});

The referenceError that i get every time is:

document is not defined

how is possible that error ?

thanks for your help in advance.

Answer 1

In Protractor specs you should use element to locate your DOM elements:

it('filter', function() {
  console.log('test log');

  var e = element(by.id('Develop');
  var strUser = element(by.css('#Develop option:2')).getAttribute('value');
});

This might help you :

• Selecting an option from a dropdown ,
• How to select option in drop down protractorjs e2e tests

I also advise you to read Protractor docs before starting.

Answer 2

I am also working on e2e test, and I have several functions in order to choose a dropdown option:

Select a drop down by value.

this.selectDropdownByValue = function (dropdownElement, value) {
        return this.selectDropdownByAttribute(dropdownElement, 'value', value);
};

Select a drop down by index:

this.selectDropdownByIndex = function (dropdownElement, index) {
        dropdownElement.click();
        dropdownElement.all(by.css('option')).get(index).click();
};

Select a drop down by partial label:

this.selectDropdownByPartialLabel = function (dropdownElement, partialLabel) {
        return this.selectDropdownByAttribute(dropdownElement, 'label', partialLabel, true);
};

Select a drop down by label:

this.selectDropdownByLabel = function (dropdownElement, label) {
        return this.selectDropdownByAttribute(dropdownElement, 'label', label);
    };

And the function that is used inside each drop down function is:

this.selectDropdownByAttribute = function (dropdownElement, attribute, value, partial, index) {
        var pathModifier = '';

        if (typeof index === 'undefined') {
            index = 0;
        }

        if (typeof partial === 'undefined') {
            partial = false;
        }

        if (partial) {
            pathModifier = '*';
        }

        dropdownElement.click().then(function () {
            dropdownElement.all(by.css('option[' + attribute + pathModifier + '="' + value + '"]')).get(index).click();
        });
    };

I hope this helps.

Answer 3

I came across the same issue when trying to interact with dropdowns and I managed to use this format which has helped me select the exact dropdown elements i want

element(by.model('Model.name')).click().element(By.xpath('Xpath')).click();

So I have basically put in the location of the dropdown, click it, and directly after that locate the dropdown element via its xpath and click it in one line not separated.

Hope this helps