从无序列表中选择一个值 - 错误“elementIdAttribute不是函数”

Question

我遇到了从下拉列表中访问值的挑战。 List是使用Bootstrap的dropdown.js创建的。

我在“Nightwatch”中创建了一个自定义命令，其中包含2个输入参数：下拉按钮的“定位器”和列表中的值。应从下拉列表中选择输出值。

问题：下拉列表已打开，但尝试从中访问值会生成错误：

TypeError：this.elementIdAttribute不是函数

我已经阅读了堆栈溢出的所有帖子，并基于它们语法是正确的。我没有想法。

在comments下是下拉元素的路径并更改li:nth-child(2)的值我可以选择列表中的每个元素。

下面是代码（包含在***中是产生错误的地方）：

exports.command = function(locator, valueToClick) {
    var dropdown;
    //locator sample
    //.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')
    // cut " > 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);
        })      
};

Answer 1

通过保留此值来删除错误。因为这个值在整个代码中都会发生变化。

exports.command = function(locator, valueToClick) {
    var dropdown;
    var openDrop = dropdownElementLocator + '.open > div > ul > li'

    // preserve the value of this since its scope changes trhoughout the code
    browser = this;
    browser
        .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(browser.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'
            //this.element('css selector', loc, function(res) {
            //       console.log('value ' + i + ': ' + res)
            //})
           })

           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";
           browser.click(dropdownElementLocator);
        })      
};

问题：我仍然无法访问下拉列表中的值

Answer 2

使用this post解决

exports.command = function(locator, valueToClick) {
    var dropdown, position;
    //locator sample
    //.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')
    // cut " > 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'

    // preserve the value of this since its scope changes trhoughout the code
    browser = this;
    browser
        .click(locator)
        .elements('css selector', openDrop, function(result){
            var i = 0;
            result.value.forEach(function (jsonWebElement){
                var jsonWebElementId = jsonWebElement.ELEMENT;
                browser.elementIdText(jsonWebElementId, function(jsonElement){
                    var text = jsonElement.value;
                    i++;
                    console.log("text " + i + " : " + text + " text.indexOf(valueToClick) - " + text.indexOf(valueToClick));

                    if(text.indexOf(valueToClick) == 0){
                        position = i;
                        console.log("position inside loop: " + position);
                    }
                });
            });
        })
        .perform(function(){
            position = position>-1 ? position : 1;
            console.log("final position " + position )
            //add ".open > div > ul > li:nth-child(2) > a > span.text"
            dropdownElementLocator = dropdownElementLocator + ".open > div > ul > li:nth-child(" + position + ") > a > span.text";
            browser.click(dropdownElementLocator);
        })         
};