Puppeteer - 如何在改变innerHTML后等待img？

Question

我想在截图前添加一张图片，Puppeteer.下面的代码可以用，但我不想这样等待，而是想等到img在这里。

element.innerHTML = "<img id=\"logo_website\" src=\"http://random.com/logo.jpg\">";
await page.waitFor(2000)

我试过用下面的 "waitFor"，但没有用。

await page.waitFor("#logo_website")

Answer 1

你可以试试 page.waitForResponse() 这样一来，。

'use strict';

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto('https://example.org/');

    await Promise.all([
      page.waitForResponse('https://www.iana.org/_img/2013.1/iana-logo-header.svg'),
      page.evaluate(() => {
        document.body.innerHTML = '<img id="logo_website" src="https://www.iana.org/_img/2013.1/iana-logo-header.svg">';
      }),
    ]);

    await page.screenshot({ path: 'scr.png' });

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();