Say I have an ordered list like this:
<div>
<ol>
<li>
<a href="#" class="title_and_count">
<span> Item 1 </span>
<span class="small_number_block">9</span>
</a>
</li>
<li>
<a href="#" class="title_and_count">
<span> Item 2 </span>
<span class="small_number_block">11</span>
</a>
</li>
<li class="centerIcon">
<a href="#" class="toggleList">
<span class="arrowUp"> ^ </span>
<span class="textOffScreen">Collapse List</span>
</a>
</li>
</ol>
</div>
I can get the text of all a.title_and_count with page.$$('a.title_and_count) and looping element.evaluate(el => el.innerText) for each one.
for(let i = 0; i < itemArray.length; i++){
let itemText = await itemArray[i].evaluate(el => el.innerText);
console.log(itemText);
}
//outputs "Item 1 9" and "Item 2 11"
But I want to be able to get both span values in 2 different variables, itemName and itemCount. How would I go around doing this? Apparently itemArray[i] > span.small_number_block and a.title_and_count > span:nth-child(2) are not valid selectors for page.$$(selector). I want the output to be more like this where values are in two different variables:
Item Name: Item 1
Item Count: 9
Item Name: Item 2
Item Count: 11
Thanks in advance.
Try this:
for(const item of itemArray){
const [itemName, itemCount] = await item.evaluate(
el => Array.from(el.querySelectorAll('span'), span => span.innerText)
);
console.log(`Item Name: ${itemName}\nItem Count: ${itemCount}`);
}