木偶阵列仅返回空

Question

我想将所有IMG从选择器传递到imgs，然后将高度从IMG推入数组。

现在，我得到一个数组，该数组为每个IMG返回null。使用普通的JS没问题，但是现在我尝试使其与木偶一起使用。

await page.waitForSelector(".content-filter.teaser-slider.rondell-section.slides_2 .teaserBorderWrapper .autoTeaserImageWrapper.paddingBottom_twoThird .card-img-top");
   heights = [];
  imgs = await page.$$(".content-filter.teaser-slider.rondell-section.slides_2 .teaserBorderWrapper .autoTeaserImageWrapper.paddingBottom_twoThird .card-img-top");
  for(let i = 0; i < imgs.length; i++){
    heights.push(imgs[i].height);
    }
    await page.evaluate(({heights}) => {
      console.log(heights);
  },{heights});

我希望每个IMG的高度。

i实际获取一个来自每个IMG的null的数组。

Answer 1

imgs不是dom元素的数组，而是puppeteer elementhandles。它可以定义为" DOM Pointers"。这意味着ElementHandle没有height属性。

如果要获得高度，则可以使用$$eval。

const heights = await page.$$eval(
    ".content-filter.teaser-slider.rondell-section.slides_2 .teaserBorderWrapper .autoTeaserImageWrapper.paddingBottom_twoThird .card-img-top", 
    imgs => imgs.map(i => i.height));

第二个参数将是期望与选择器匹配的图像列表的函数。从那里，您可以简单地通过它们迭代。

您也可以将其分为两分：

const imgs = await page.$$eval(
    ".content-filter.teaser-slider.rondell-section.slides_2 .teaserBorderWrapper .autoTeaserImageWrapper.paddingBottom_twoThird .card-img-top");
const heights = page.eval(imgs => imgs.map(i => i.height), imgs);