量角器下拉列表元素 e2e 测试答案

【问题标题】：Protractor dropdown list elemente e2e test量角器下拉列表元素 e2e 测试
【发布时间】：2014-04-08 00:43:48
【问题描述】：

我是 Protractor 的新手，我正在执行一些 e2e 测试，当我尝试调用下拉列表并选择其中一个选项时，我在最后一个测试中遇到了问题。

这是我的代码：

it('filter', function() {
  console.log('test log');

  var e = document.getElementById('Develop');
  var strUser = e.options[e.selectedIndex].value;

  e.selectedIndex = 2;
});

我每次得到的referenceError是：

document is not defined

这个错误怎么可能？

提前感谢您的帮助。

【问题讨论】：

标签： javascript protractor angularjs-e2e

【解决方案1】：

在 Protractor 规范中，您应该使用 element 来定位您的 DOM 元素：

it('filter', function() {
  console.log('test log');

  var e = element(by.id('Develop');
  var strUser = element(by.css('#Develop option:2')).getAttribute('value');
});

这可能对你有帮助：

我还建议您在开始之前阅读Protractor docs。

【讨论】：

【解决方案2】：

我也在进行 e2e 测试，我有几个功能可以选择下拉选项：

按值选择下拉菜单。

this.selectDropdownByValue = function (dropdownElement, value) {
        return this.selectDropdownByAttribute(dropdownElement, 'value', value);
};

按索引选择下拉菜单：

this.selectDropdownByIndex = function (dropdownElement, index) {
        dropdownElement.click();
        dropdownElement.all(by.css('option')).get(index).click();
};

按部分标签选择下拉菜单：

this.selectDropdownByPartialLabel = function (dropdownElement, partialLabel) {
        return this.selectDropdownByAttribute(dropdownElement, 'label', partialLabel, true);
};

按标签选择下拉菜单：

this.selectDropdownByLabel = function (dropdownElement, label) {
        return this.selectDropdownByAttribute(dropdownElement, 'label', label);
    };

每个下拉函数内部使用的函数是：

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();
        });
    };

我希望这会有所帮助。

【讨论】：

【解决方案3】：

我在尝试与下拉列表交互时遇到了同样的问题，我设法使用了这种格式，它帮助我选择了我想要的确切下拉元素

element(by.model('Model.name')).click().element(By.xpath('Xpath')).click();

所以我基本上已经输入了下拉列表的位置，点击它，然后直接通过它的xpath找到下拉元素并在一行中点击它，没有分开。

希望对你有帮助

【讨论】：