在 puppteer 中链接查询选择器

Question

如何在 puppteer 中链接查询选择器，就像我们在量角器中所做的那样？

return this.page.$$(".stop.departed").$$eval(".station",el=>el.innerText)

我得到TypeError: this.page.$$(...).$$eval is not a function

我的网页是

<div class="stop departed">
<div class="left">
<div class="station">London
</div>
<div class="scheduled">Dept. 10:47
</div>
</div>    
</div>
<div class="stop departed">
<div class="left">
<div class="station">Paris
</div>
<div class="scheduled">Dept. 12:47
</div>
</div>    
</div>

我想在列表中获取所有车站名称["伦敦"，"巴黎"]。

Answer 1

这两种方法，page.$$()和elementHandle.$$eval()都返回 promise，因此您必须同时await它们。

这些函数也都在选择器上运行querySelectorAll()，因此您必须在运行下一个操作(或遍历所有索引(之前按索引指定元素。

以下示例将返回第一个站点的第一个站点：

const first_station = await ( await page.$$( '.stop.departed' ) )[0].$$eval( '.station', el => el[0].innerText );
console.log( first_station ); // London

或者，您可以使用以下示例获取每个停靠点的站点数组：

const stations = await Promise.all(
( await page.$$( '.stop.departed' ) ).map( el => el.$$eval( '.station', el => el.map( el => el.innerText ) ) )
);
console.log( stations.length );    // 2
console.log( stations[0].length ); // 1
console.log( stations[1].length ); // 1
console.log( stations[0][0] );     // London
console.log( stations[1][0] );     // Paris

或者，如果每个站点只有一个站点，则可以使用：

const stations = await Promise.all(
( await page.$$( '.stop.departed' ) ).map( el => el.$$eval( '.station', el => el[0].innerText ) )
);
console.log( stations.length ); // 2
console.log( stations[0] );     // London
console.log( stations[1] );     // Paris