使用 Puppeteer 从多个列表项中获取多个子元素

Question

假设我有一个这样的有序列表：

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

我可以使用page.$$('a.title_and_count) 获取所有a.title_and_count 的文本，并为每个element.evaluate(el => el.innerText) 循环。

 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" 

但我希望能够在两个不同的变量itemName 和itemCount 中获得两个跨度值。我该怎么做呢？显然itemArray[i] > span.small_number_block 和a.title_and_count > span:nth-child(2) 不是page.$$(selector) 的有效选择器。我希望输出更像这样，其中值位于两个不同的变量中：

Item Name: Item 1
Item Count: 9

Item Name: Item 2
Item Count: 11

提前致谢。

Answer 1

试试这个：

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