javascript - 如何在 Puppeteer 中构造背对背 Promise.all 请求

Question

我正在使用 Puppeteer 在 SPA 网站上执行一系列操作，但在处理 Promise.all() 时遇到问题。我正在看Puppeteer docs并遵循该示例，但使用 waitForSelector 而不是 waitForNavigation 因为页面实际上并未更改。值得注意的是，下拉菜单是全屏的。

基本上我想在移动设备上用文字实现......

1. 访问网站
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 中的 Promise 是同时运行的，在这种情况下你必须等待第一个完成。