Puppeteer Array возвращает только ноль

Question

Я хочу передать все img из селектора в imgs, а затем выдвинуть высоту из imgs в массив.

Сейчас я получаю массив, который возвращает null для каждого img.С обычными J это не было проблемой, но теперь я пытаюсь заставить его работать с кукловодом.

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});

Я ожидаю массив с высотой от каждого изображения.

Я получаю массив сnull от каждого img.

Answer 1

Вам нужны визуализированные высоты изображений? Если это так, вам нужно использовать ElementHandle.boundingBox()

for(let i = 0; i < imgs.length; i++){
    heights.push(imgs[i].boundingBox().height);
}

Answer 2

imgs будет не массивом элементов DOM, а Puppeteer ElementHandles. Это можно определить как «указатели DOM». Это означает, что 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);