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.
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.
Share Improve this question edited Mar 6, 2014 at 8:20 glepretre 8,1675 gold badges46 silver badges58 bronze badges asked Mar 5, 2014 at 18:47 user3384809user3384809 211 silver badge2 bronze badges3 Answers
Reset to default 6In 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.
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.
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