Проверьте все кадры для загрузки

Question

Я хотел бы проверить, все ли кадры на странице были загружены. Я не могу понять это, и отчасти я не до конца понимаю события фрейма (особенно, когда именно запускаются события frameattached и framenavigated?).

Вот что я сейчас делаю, но я несколько раз привязываюсь к одному и тому же событию страницы, а не к кадру.

function waitForFrames() {
  return Promise.all(page.frames().map((frame) => {
    return new Promise(resolve => {
      page.on('framenavigated', resolve);
    });
  })).then(() => {
    console.log('Frames loaded');
  })
    .catch(e => {
      console.log(e.message);
    });
}

Как я могу проверить, что все кадры загружены?

Answer 1

Документация Puppeteer для класса Frame помогает объяснить события кадра:

класс: рамка

В каждый момент времени страница отображает свое текущее дерево кадров с помощью методов page.mainFrame() и frame.childFrames().

Рамка Жизненный цикл объекта контролируется тремя событиями, отправляемыми на страницу объекта:

• 'frameattached' - срабатывает, когда фрейм прикрепляется к странице. Рамка может быть прикреплена к странице только один раз.
• 'framenavigated' - срабатывает, когда фрейм фиксирует переход на другой URL.
• 'framedetached' - срабатывает, когда рамка отрывается от страницы. Фрейм можно отсоединить от страницы только один раз.

<ч />

Вы можете дождаться кадра (по имени), используя следующую функцию:

const wait_for_frame = (page, frame_name) => {
  let fulfill_promise;
  const promise = new Promise(x => fulfill_promise = x);

  check_frame();

  return promise;

  const check_frame = () => {
    const frame = page.frames().find(current_frame => current_frame.name() === frame_name);

    if (frame) {
      fulfill_promise(frame);
    } else {
      page.once('frameattached', check_frame);
    }
  };
};

// Waiting for frame to become attached:
const frame = await wait_for_frame(page, frame_name);

// Waiting for frame to contain a certain selector:
await frame.waitForSelector(selector);

const button = await frame.$(selector);

button.click();

_{На приведенный выше фрагмент кода повлияли и улучшены: Источник .}

<ч />

Наконец, вы можете циклически проходить и await кадров один за другим.