How to return the getText() values in array using protractor

Question

I'm trying to return the options present in the list using the below function.

HTML

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

Function

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

}

When I print the values in console using console.log(getValues()), the console displays theManagedPromise{.....} function instead of options.

But I'm expecting the options as ["one","two","three"] array. Can anyone help me?

@SureshSalloju My issue is I need to return the values as array. I can able to print the values. — KAK
– KAK, Commented Jul 4, 2017 at 14:11

wswebcreation · Accepted Answer · 2017-07-06 05:59:17Z

1

Why create a complex method for it if you can also do it like this

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

The getText() can also be executed on a ElementFinderArray and it will return a promise that contains ['one', 'two', 'three']

Update: with trim function

First of all your code will not work because of 2 reasons:

protractor uses promises, you first needs to resolve the promises before you can use the value. See also 1 of your previous questions you asked
You are using .getAttribute('value').getText(). This will never work.

Below you will find a working example in 3 different styles.

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

edited Jul 6, 2017 at 5:59

answered Jul 4, 2017 at 18:37

wswebcreation

2,3952 gold badges12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KAK Over a year ago

Before returning the value I need to trim the values. So only create the above function.

Kacper · Accepted Answer · 2017-07-04 15:01:52Z

0

The most elegant way is to use .map(). See the documentation.

The only thing you need to remember is that .map() returns A promise that resolves to an array of values returned by the map function.

answered Jul 4, 2017 at 15:01

Kacper

1,1991 gold badge9 silver badges21 bronze badges

Comments

JGFMK · Accepted Answer · 2017-07-05 21:05:56Z

<!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>

See live demo here
HTMLOptionElement on MDN

Collectives™ on Stack Overflow

How to return the getText() values in array using protractor

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related