Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

199
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda