Кукловод - Как дождаться img после изменения внутреннего HTML?

Question

Я хочу добавить картинку перед скриншотом с кукловодом. Следующий код работает, но вместо того, чтобы ждать, как это, я хотел бы подождать, пока 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);
  }
})();