Почему мне нужно получить доступ к атрибутам объекта при использовании .map в этом примере

Важно помнить, что, хотя Puppeteer отлично справляется с размытием границ между вашим приложением и Chromium, при получении или отправке данных с использованием вызова evaluate выполняется сериализация / десериализация.

Короче говоря, я считаю, что лучший способ играть с хромом - это попытаться решить все в функции оценки и вернуть все данные , которые вам нужны.

Это выглядит хорошо для меня

const hrefs = await page.$eval( 'a', anchors => anchors.map(a => a.href ));
hrefs.forEach( h => console.log(h)); // prints the href

Теперь, допустим, вы хотите поиграть с элементами HTML. Лучший способ сделать это - использовать функцию $$

const anchors = await page.$('a');

anchors - это не массив элементов HTML, а массив ElementHandles ]. ElementHandle - это в основном указатель на элемент в Chromium.

Теперь вы можете передать это ElementHandle в качестве аргумента функции evaluate.

const promises = anchors.map(h => page.evaluate(h => h.href, h));
var hrefs = await Promise.all(promises);
hrefs.map(p => console.log(p));

Как видите, перемещение элементов между хромом и вашим приложением не так прозрачно, как вы думаете, но это выполнимо.