Handling elements child elements using async/await in Cucumber JS with Protractor returning no results

Question

I am trying to automate a pretty trivial scenario where I have to get the text inside multiple li child elements of a ul elements and compare it against a given array. I am using Protractor with Cucumber JS and using async/await to manage promises.

My scenario HTML looks something like this

       <div class="some-class">
          <ul class="some-ul-class">
               <li>
                <span>Heading1: </span>
                <span class="some-span-class> Value of Heading 1</span>
               </li>
               <li>
                <span>Heading2: </span>
                <span class="some-span-class> Value of Heading 2</span>
               </li>
               <li>
                <span>Heading3: </span>
                <span class="some-span-class> Value of Heading 3</span>
               </li>
               <li>
                <span>Heading4: </span>
                <span class="some-span-class> Value of Heading 4</span>
               </li>
               <li>
                <span>Heading5: </span>
                <span class="some-span-class> Value of Heading 5</span>
               </li>

I need to get the values of the first span element i.e the Heading1, Heading2 texts. I saw a lot of approaches in SO, but none of them have resulted in a solution. Most of the solutions do not have async/await implemented and if I try them, the code doesn't do what it is intended to do.

Examples I've referred : Protractor Tests get Values of Table entries Protractor : Read Table contents

If I try using the map function inside the async block, but that resulted in a ECONNREFUSED error, and hence has been suggested not to do so here.

Would appreciate if someone can guide me towards a solution on this one.

Please show your `async` code, since that's where the issue lies. I'm going to go out on a limb and link [this](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). — , Jan 11 '19 at 11:04

score 0 · Accepted Answer · answered Jan 11 '19 at 11:11

This one should work for you:

const elements = $$('.some-span-class');
const expected = [];
const elementsLength = await elements.count();
for (let i = 0; i < elementsLength; i += 1){
    const text = await elements.get(i).getText();
    expected.push(text);
}

When you do with async/await you should check what protractor method api returns, for example $$ return an ElementArrayFinder and does not require await, while getText and count returns !webdriver.promise.Promise and require await statement first.

score 0 · Answer 2 · answered Jan 11 '19 at 11:48

You can shortage @Lunin Roman's answer:

const elements = $$('.some-span-class');
const textFromElements = elements.getText();

textFromElements is promise of string[]. When you resolve a promise:

textFromElements.then((result) => { console.log(result) )})

you should get an array of results.

Handling elements child elements using async/await in Cucumber JS with Protractor returning no results

2 Answers2