Getting multiple child elements from multiple list items with Puppeteer

user_16944056 0
Viewed 182

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.

puppeteer web-scraping javascript
1 Answers

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}`);
}
user_26255600
Related