Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

205
Visualizações
Cannot get the children of a div using Puppeteer page.evaluate

I'm trying to automate uploading an image to imgur using Puppeteer. I have successfully implemented the uploading, but now I want to get the raw image URL of the uploaded image.

To do that, I inspected the html and found out that the uploaded image is displayed in a div which has the following markup.

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

Therefore, to obtain that, I wrote some puppeteer code as follows.

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

However, this code fails at the line indicated by a comment, throwing the following error.

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

But when I execute the same JS code inside the evaluate function, in the browser, it works and returns the image raw URL. So I'm really frustrated about why this doesn't work.

enter image description here

Can you give me some suggestions to overcome this problem and copy the raw image URL without problems? Thank you for your time.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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

This loop blocks event loop and prevents the DOM from updating. So maybe try this instead:

  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);
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda