CODEWITHSUNDEEP
javascripthtmldompuppeteer
Pavindu
Pavindu

Reputation: 3112

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.

Upvotes: 1

Views: 634

Answers (1)

vsemozhebuty
vsemozhebuty

Reputation: 13782

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

Upvotes: 2

Related Questions