如何在nightwatch.js中使用外部命令来定位树元素？

Question

我正在寻找有关如何最好地构建所有移动部件的建议，以便使用自定义命令正确设置我的nightwatch.js测试。我想抽象出一个命令来加载一个下拉菜单，把它放在页面对象之外，但它只有在我将元素移出树部分时才有效。如何在下面的抽象中包含树元素 - 卡住atm。谢谢，

所以我的测试看起来像这样 -

'xyz': function (client) {
    var page = client.page.myPage();

    page
        .setDropDownButtonValue(page, '@createBtn', 'New Folder')
        .api.useCss()
        .waitForElementVisible('[placeholder="New Folder Name"]', 3000)
        .setValue('[placeholder="New Folder Name"]', 'Whatever');
}

和我的自定义命令 - setDropDownButtonValue - 看起来像这样

exports.command = function (scope, button, value) {

var xpathMatch = '//*[text()="' + value + '"]';

scope
    .waitForElementVisible(button, 5000)
    .click(button)
    .waitForElementVisible('@dropdownMenu', 5000)
    .api.useXpath();

return scope.
     waitForElementVisible(xpathMatch, 5000)
     .click(xpathMatch);

};

myPage对象看起来像这样 -

'use strict';

module.exports = {
sections: {
    tree: {
        selector: '.drive-tree-container'
        elements: {
            createBtn: { selector: '[data-bind*="_onCreateActionClick"]' },
            dropdownMenu: { selector: '[data-bind*="element: menuDOM"].dropdown-menu.create-menu' }
        }
    }
},

elements: {
    tree: { selector: '.drive-tree-container' }
}

};

上述单元测试仅在删除树节时才有效 -

'use strict';

module.exports = {
elements: {
    createBtn: { selector: '[data-bind*="_onCreateActionClick"]' },
    dropdownMenu: { selector: '[data-bind*="element: menuDOM"].dropdown-menu.create-menu' }
}

};