Как правильно структурировать запросы Promise.all в Puppeteer

Question

Я использую Puppeteer для выполнения ряда действий на веб-сайте SPA, но я сталкиваюсь с проблемой при работе с Promise.all (). Я просматривал документы Puppeteer и следовал этому примеру, но использовал waitForSelector вместо waitForNavigation, поскольку страница на самом деле не меняется. Это может быть важно, чтобы отметить, что раскрывающееся меню полноэкранное.

В основном то, что я хочу достичь в словах на мобильном устройстве ....

1. Go для веб-сайта
2. Нажмите на значок меню Гамбургер (чтобы раскрылось раскрывающееся меню, которое является полноэкранным)
3. Нажмите на элемент меню в раскрывающемся меню (оно перейдет к следующему подменю)
4. Нажмите на элемент подменю (это перейдет к следующему подменю)
5. Нажмите на элемент подменю (это последнее доступное меню)
6. А затем перейдите на страницу элемента под-подменю

Ниже приведена выдержка из соответствующего кода для выполнения шагов, упомянутых выше, но на шаге 5 ... Я получаю "Узел либо не видна или нет HTMLElement "ошибка, когда я знаю, что узел существует и является видимым. Любая помощь по этому поводу?

const performSteps = async () => {
  ...
  await page.goto('https://www.website.com'); // step 1
  await page.click('.hamburger-icon'); // step 2

  // Step 3
  await Promise.all([
    page.waitForSelector('menu-item'),
    page.click('menu-item'),
  ]);

  // Step 4
  await Promise.all([
    page.waitForSelector('sub-menu-item'),
    page.click('sub-menu-item'),
  ]);

  // Step 5 - results in ERR: Node is either not visible or not an HTMLElement
  await Promise.all([
    page.waitForSelector('sub-sub-menu-item'),
    page.click('sub-sub-menu-item'),
  ]);
  ...
}

Answer 1

Вы щелкаете по нему до того, как он там и виден. Попробуйте:

await page.waitForSelector('sub-sub-menu-item', {visible: true})
await page.click('sub-sub-menu-item')

Если неясно, обещания в Promise.all выполняются в одно и то же время, в этом случае вам нужно дождаться, пока первый не закончится sh.