无法使用 Puppeteer 从 DOM 对象变量中获取元素

Question

我正在尝试通过 Puppeteer 进行一些基本的抓取。特别是，我想在以下布局中提取 foo div 的文本内容：

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

这个有效：

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

但是我想从包含 DOM 对象的变量中提取元素。阅读 Puppeteer's ElementHandle class documentation 我希望这会产生相同的结果：

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

但是我从 console.log(foo) 得到的只是

Promise { <pending> }

脚本挂起，或者如果我关闭 Puppeteer 浏览器，它会失败并显示

UnhandledPromiseRejectionWarning: Unhandled promise rejection

我错过了什么？

Answer 1

看来您错过了 await。

应该是：

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

Can't get elements from DOM object variable with Puppeteer