CODEWITHSUNDEEP
javascriptprotractorangularjs-e2e
user3384809
user3384809

Reputation: 21

Protractor dropdown list elemente e2e test

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.

Upvotes: 2

Views: 5147

Answers (3)

tony2tones
tony2tones

Reputation: 1670

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

Upvotes: 0

lmiguelvargasf
lmiguelvargasf

Reputation: 69675

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.

Upvotes: 0

glepretre
glepretre

Reputation: 8167

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 :

I also advise you to read Protractor docs before starting.

Upvotes: 6

Related Questions