I am facing difficulties in accessing a value from a dropdown menu. The dropdown menu is generated using Bootstrap's dropdown.js
.
In order to tackle this issue, I have created a custom command in "Nightwatch" with two input parameters: the locator of the dropdown button and the specific value that needs to be selected from the list. The expected output should be the selected value from the dropdown.
Challenge: Despite successfully opening the dropdown menu, any attempt to retrieve values from it results in the following error:
TypeError: this.elementIdAttribute is not a function
After going through numerous discussions on stack overflow, confirming that the syntax is accurate, I find myself running out of solutions.
However, by modifying the path to the dropdown element in the comments section and changing the value of li:nth-child(2)
, I can select any element from the list.
Below is the code snippet (highlighted with *** is the part causing the error):
exports.command = function(locator, valueToClick) {
var dropdown;
//locator example
//.click('#form > div.panel.panel-primary > div.panel-body > div:nth-child(1) > div > div.btn-group.bootstrap-select.form-control.parsley-validated > button')
//.click('#form > div.panel.panel-primary > div.panel-body > div:nth-child(1) > div > div.btn-group.bootstrap-select.form-control.parsley-validated.open > div > ul > li:nth-child(2) > a > span.text')
// remove " > button" from the end
var dropdownElementLocator = locator.slice(0,locator.length-9);
//var openDrop = '#form > div.panel.panel-primary > div.panel-body > div:nth-child(1) > div > div.btn-group.bootstrap-select.form-control.parsley-validated.open > div > ul li a span.text'
var openDrop = dropdownElementLocator + '.open > div > ul > li'
this
.click(locator)
.elements('css selector', openDrop, function(result){
console.log("number of elements = " + result.value.length);
console.log(result);
result.value.forEach(function (element){
console.log(***this.elementIdAttribute***(element.ELEMENT, 'a').value);
});
var position = -1;
var i = 0;
result.value.forEach(function(value){
i++;
var loc = openDrop + ':nth-child(' + i + ') > a > span.text'
})
position = position>-1 ? position : 0;
console.log("final position " + i )
//add ".open > div > ul > li:nth-child(2) > a > span.text"
dropdownElementLocator = dropdownElementLocator + ".open > div > ul > li:nth-child(" + (position+1) + ") > a > span.text";
this.click(dropdownElementLocator);
})
};