Question

我正在尝试使用以下函数返回列表中的选项。

HTML

<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>
<select>

功能

getValues(){
  var ele = element(by.xpath("......../select"));
  return ele.all(by.tagName('option')).getAttribute('value').getText().then(function (text){
  for (var i = 0; i < text.length; i++) {
    text[i] = text[i].trim();
  }
  return text;
 });

}

当我使用console.log(getValues())在控制台中打印值时，控制台会显示ManagedPromise{.....}功能而不是选项。

但我期待选项为["one","two","three"]数组。任何人都可以帮助我吗？

Answer 1

为什么要创建一个复杂的方法，如果你也可以这样做

getValues() {
  return element.all(by.css('select option')).getText();
}

getText()也可以在ElementFinderArray上执行，它将返回包含['one', 'two', 'three']的承诺

更新：带修剪功能

首先，由于两个原因，您的代码无效：

量角器使用promises，首先需要在使用该值之前解析promise。另见您之前提出的问题之一
您正在使用.getAttribute('value').getText()。这将永远不会奏效。

下面您将找到3种不同风格的工作示例。

// with your code
getValues() {
  var ele = element(by.xpath("......../select"));
  return ele.all(by.tagName('option'))
    .map(function(option) {
      return option.getText()
        .then(function(optionText) {
          return optionText.trim();
        });
    });
}

// with protractor shorthand notation
getValues() {
  return $$('select option').map((option) => {
    return option.getText()
      .then((optionText) => {
        return optionText.trim();
      });
  });
}

// 1 line
getValues() {
  return $$('select option').map((option) => option.getText().then((optionText) => optionText.trim()));
}

Answer 2

最优雅的方式是使用.map()。请参阅documentation。

您唯一需要记住的是.map()会返回A promise that resolves to an array of values returned by the map function.

Answer 3

<!DOCTYPE html>
<html>
<body>

<select id="sel">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<p>Click the button to display values</p>

<button onclick="clickHandler()">Try it</button>

<p id="demo"></p>  
</body>
<script "text/javacript">
function clickHandler() {
    var options = document.getElementById("sel").childNodes;
    let results =[];
    [].forEach.call(options, function(option) {
      if (option instanceof HTMLOptionElement) {
        results.push(option.text); 
        // Swap for option.value if you like too would be lower case
      }
    });
    document.getElementById("demo").innerHTML = results.toString();
}
</script>
</html>

查看实时演示here
HTMLOptionElement on MDN

如何使用量角器返回数组中的getText（）值

3 个答案: