Can't get elements from DOM object variable with Puppeteer

Question

I am trying to do some basic scraping through Puppeteer. In particular, I want to extract the text content of the foo div in the following layout :

<div class="foobar">
  <div class="foo">…</div>
</div>

This works :

const foobar = page.$eval('.foobar foo', (el => el.textContent));
const [foo] = await Promise.all([foobar]);
console.log(foo);

However I would like to extract the element from a variable containing a DOM object. Reading Puppeteer's ElementHandle class documentation I would expect this to have the same result :

const foobar = page.$('.foobar');
const [bar] = await Promise.all([foobar]);
const foo = bar.$eval('.foo', (el => el.textContent));
console.log(foo);

However all I get from the console.log(foo) is

Promise { <pending> }

and the script hangs, or if I close the Puppeteer browser it fails with

UnhandledPromiseRejectionWarning: Unhandled promise rejection

What am I missing ?

Answer 1

Looks like you have missed await.

Should be:

const foo = await bar.$eval('.foo', (el => el.textContent));