无法使用 Puppeteer page.evaluate 获取 div 的 children

Question

我正在尝试使用 Puppeteer 自动将图像上传到 imgur。我已经成功实现了上传，但现在我想获取上传图片的原始图像URL。

为此，我检查了 html 并发现上传的图像显示在具有以下标记的 div 中。

<div class="PostContent-imageWrapper-rounded">
  <img src="https://i.imgur.com/ZOQgT6A.png">
</div>

因此，为了获得它，我编写了一些木偶代码如下。

const browser = await puppeteer.launch({ headless: false, args: ['--no-sandbox', '--disable-setuid-sandbox'] });
const page = await browser.newPage();
await page.goto(request.query.url);
let imgPath = nanoid() + ".png"
await page.screenshot({ path: imgPath });

// imgur image upload
const pg = await browser.newPage();
pg.on("console", (consoleObj) => {
    if (!['warning','error'].includes(consoleObj.type())) {
      console.log(consoleObj.text());
    }
  })
  await pg.goto("https://imgur.com/upload");
  const elementHandle = await pg.$("input[type=file]");
  await elementHandle.uploadFile(imgPath);
  await pg.waitForTimeout(5000)
  await pg.waitForSelector('.PostContent-imageWrapper-rounded')
  let imgSrc = await pg.evaluate(function(){
    let dd = "undefined";
    while (dd === "undefined" || dd[0] === "undefined"){
      dd = document.getElementsByClassName("PostContent-imageWrapper-rounded")
    }
    return dd[0].firstChild.src // getting different errors time to time
  })
  console.log(imgSrc)
  await browser.close();
  fs.unlink(imgPath, (err) => {
    if (err) {
      console.error(err)
      return
    }
  })

但是，此代码在注释指示的行失败，抛出以下错误。

Evaluation failed: TypeError: Cannot read properties of undefined (reading 'firstChild')\n at puppeteer_evaluation_script:3:18

但是当我在 evaluate 函数中执行相同的 JS 代码时，在浏览器中，它可以工作并且 returns 原始图像 URL。所以我真的很沮丧为什么这不起作用。

你能给我一些建议来克服这个问题并毫无问题地复制原始图像 URL 吗？谢谢你的时间。

Answer 1

    let dd = "undefined";
    while (dd === "undefined" || dd[0] === "undefined"){
      dd = document.getElementsByClassName("PostContent-imageWrapper-rounded")
    }

此循环阻止事件循环并阻止 DOM 更新。所以也许试试这个：

  await pg.waitForSelector('.PostContent-imageWrapper-rounded > img');
  let imgSrc = await pg.evaluate(function(){
    let img = document.querySelector('.PostContent-imageWrapper-rounded > img');
    return img.src;
  });
  console.log(imgSrc);

无法使用 Puppeteer page.evaluate 获取 div 的 children

Cannot get the children of a div using Puppeteer page.evaluate

html

javascript

dom

puppeteer