Сцепление запросов селекторов в Puppteer - PullRequest
0 голосов
/ 04 октября 2018

Как мне связать селекторы запросов в Puppteer, как мы делаем в транспортире?

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

Я получаю TypeError: this.page.$$(...).$$eval is not a function

Мой HTML *

 <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хочу получить все названия станций в списке ["Лондон", "Париж"].

1 Ответ

0 голосов
/ 04 октября 2018

Оба метода, page.$$() и elementHandle.$$eval() возвращают обещания, поэтому вы должны 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
...