chaining queryselectors in puppteer - jquery-selectors

Question

how can I chain query selectors in puppteer like we do in protractor?
return this.page.$$(".stop.departed").$$eval(".station",el=>el.innerText)
I get TypeError: this.page.$$(...).$$eval is not a function
My Html is
<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>
I want to get all station names in a list ["London", "Paris"].

Answer 1

Both methods, page.$$(), and elementHandle.$$eval() return promises, so you must await them both.
The functions also both run querySelectorAll() on the selectors, so you must specify the element by index before running the next operation (or iterate through all indexes).
The following example will return the first station at the first stop:
const first_station = await ( await page.$$( '.stop.departed' ) )[0].$$eval( '.station', el => el[0].innerText );
console.log( first_station ); // London
Alternatively, you can use the following example to obtain an array of stations for each stop:
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
Or if every stop only has one station, you can use:
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