TestCafe - Get value of attribute in a dropdown list

Question

There is a search bar with a button to filter. Clicking on the same submenu (dropdown) is displayed. The HTML looks like :

<ul >
  <li data-value"svalue1">
     <svg>.... </svg>
     <p> Value1 </p>
  </li>
  <li data-value"svalue2">
     <svg> ....</svg>
     <p> Value2 </p>
  </li>
  <li data-value"svalue3">
     <svg> </svg>
     <p> Value3 </p>
  </li>

I need to retrieve the values of options as an array and compare. I am able to assert a single value but unable to store it in an array to compare all together.

var tab = Selector('ul');
-
-
.expect(tab.child('li').nth(3).innerText)
            .eql('Value3', 'The value is not correct');

But this doesn't work

for (let i = 0; i < 6; i++) {
                myArray.push(tab.child('li').nth(i).innerText);
                console.log("value:" + tab.child('li').nth(i).innerText);

            }

Prints: value:[object Object]

Any idea?

Answer 1

You need to add the 'await' keyword. For instance:

for (let i = 0; i < 6; i++) {
   console.log("value:" + await tab.child('li').nth(i).innerText);
}

Refer to the 'Access Page Element Properties' topic to find this note:

Note that selector's property getters and client functions are asynchronous. If you need their resulting value in your code, use the await keyword. However, you can omit await when you pass a selector property or a client function value into an assertion.