量角器下拉列表元素e2e測試

Question

我是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

這個錯誤怎么可能？

謝謝您的幫助。

Answer 1

在量角器規格中，應使用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.js e2e測試中選擇選項

我還建議您在開始之前閱讀量角器文檔 。

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

我希望這有幫助。

Answer 3

嘗試與下拉菜單互動時遇到了相同的問題，我設法使用了這種格式，這有助於我選擇所需的確切下拉列表元素

。元素（by.model（ 'Model.name'））點擊（）元件（By.xpath（ '的Xpath'））點擊（）;

因此，我基本上已經放置了下拉菜單的位置，單擊它，然后直接通過它的xpath找到下拉菜單元素，並在一行中單擊它（不分隔）。

希望這可以幫助