Can't set id on img Tag using puppeteer

Question

I am trying to set id's to all <img> tags of a page, my loop runs its iterations completely but some of the <img> tags doesn't get the id's as can be seen in the below image:

Here is my code:

const browser = await puppeteer.launch({
    args: [
        '--no-sandbox',
    ],
  });
  const page = await browser.newPage();
  await page.setViewport({ width: 1440, height: 10000 })
  await page.goto(url, {
        waitUntil: 'networkidle2',
        timeout: 0,
  });

await page.evaluate(() => {
const images = document.getElementsByTagName('img') || []
    for (let i = 0; i < images.length; i++) {
        document.getElementsByTagName('img')[i].id = `${i}`
        document.getElementsByTagName('img')[i].src = document.getElementsByTagName('img')[i].getAttribute('src')?.startsWith('https') ?
        document.getElementsByTagName('img')[i].getAttribute('src')! :
        `https://leza.notion.site${document.getElementsByTagName('img')[i].getAttribute('src')}`
    }
})

Am I missing anything? Any help would be highly appreciated!

I keep getting this warning log

PAGE LOG: %c NOTION%c WARNING %c background: black; color: white; background: black; color: orange font-weight: normal Reverting mutation of attribute src from "/image/https%3A%2F%2Fraw.githubusercontent.com%2Feirikmadland%2Fnotion-icons%2Fmaster%2Fv5%2Ficon3%2Ful-file-search-alt.svg?table=block&id=db9359ba-4fcd-4a24-9744-8514d7810939&userId=&cache=v2" -> "https://leza.notion.site/image/https%3A%2F%2Fraw.githubusercontent.com%2Feirikmadland%2Fnotion-icons%2Fmaster%2Fv5%2Ficon3%2Ful-file-search-alt.svg?table=block&id=db9359ba-4fcd-4a24-9744-8514d7810939&userId=&cache=v2" in component  JSHandle@object

Answer 1

Instead of

await page.evaluate(() => {
    const images = document.getElementsByTagName('img') || []

try using:

await page.$eval('.img', (images) => { /* DO STUFF... */ });

So the following code should work:

await page.$eval('.img', (images) => {
    for (let i = 0; i < images.length; i++) {
        const currentImage = images[i];
        const targetImageId = `${i}`;
        const currentImageSrc = currentImage.getAttribute('src');
        const targetImageSrc = currentImageSrc?.startsWith('https')
            ? currentImageSrc!
            : `https://leza.notion.site${currentImageSrc}`;

        currentImage.setAttribute("id", targetImageId);
        currentImage.setAttribute("src", targetImageSrc);
    }
});

Note that your url will look something like the following, which are probably not correct URLs for the two 1st ones:

<img src="http://www.gravatar.com/avatar/8947787d4067fa6e66e485bfc72233e4?s=48&amp;d=identicon&amp;r=PG&amp;f=1">

https://leza.notion.sitehttp://www.gravatar.com/avatar/8947787d4067fa6e66e485bfc72233e4?s=48&d=identicon&r=PG&f=1

or

<img src="image.png">

https://leza.notion.sitemyimage.png

or

<img src="/image.png">

https://leza.notion.sitemy/image.png