Puppeteer js eval 函数返回对象的对象

Question

目前我的人偶文件中有以下部分代码：

  const getImgSrc = await page.$eval('#ldpGallery', el => el.getElementsByTagName('img'));
  console.log(getImgSrc);

我从中得到的 html 是这样的：

<img data-src="https://example.com/981489624/e132d90154bc6cbc6616442c0742fc43l-m0xd-w1020_h770_q80.jpg" class="owl-lazy" src="">

我在控制台中得到的结果是这样的：

{ '0': {},
  '1': {},
  '2': {},
  '3': {},
  '4': {} }

我正在尝试从上面 html 访问数据源。检索对象后，我尝试了。 forEach() 和 map，它们都给我一个错误。

如何获取数据源字符串？

Answer 1

最好的方法是尝试解决评估中获取的所有数据的所有问题。你可以这样做：

const getImgSrc = await page.$eval('#ldpGallery', el =>
    Array.from(el.getElementsByTagName('img')).map(e => e.getAttribute("data-src")));
console.log(getImgSrc);

Answer 2

问题

您的代码无法正常工作，因为 page.$eval only allows to return serializable data (data which can be stringified)。您正在尝试 return 一个包含五个 DOM 元素的 HTMLCollection，这些元素将被序列化为空对象。

解决方案

您正在尝试从 #ldpGallery 元素内的所有 img 元素读取 data-src 信息。我推荐你使用函数 page.$$eval for that, which is able to work on a list of elements. That way you can directly map the elements and access the data attributes via the dataset 属性.

代码如下所示：

const getImgSrc = await page.$$eval(
    '#ldpGallery img',
    imgs => imgs.map(img => img.dataset.src)
);

Puppeteer js eval 函数返回对象的对象

Puppeteer js eval function returning an object of objects

javascript

node.js

puppeteer

问题

解决方案