如何在 Puppeteer 上跟踪弹出模式

Question

const products = await page.$$('.product-list li .hover-overlay');

for (var a = 2; a <= products.length; a++) {
  await Promise.all([
    page.hover(`.product-list li:nth-child(${a}) .hover-overlay`),
    page.click(`.product-list li:nth-child(${a}) .hover-overlay`),
    page.waitForSelector('.modal', { visible: true }),
    page.waitForSelector('.save-btn', { visible: true }),
    page.click('.save-btn'),
  ])
}

这是错误

Error: No node found for selector: .save-btn

木偶师：^1.7.0

节点：v9.4.0

Answer 1

Promise.all 会让所有的承诺运行同时实现，所以在这里你同时悬停并点击一个特定的元素，等待两个选择器，然后点击一个与最后一个匹配的元素一。您也可以通过在循环内使用 await 来按顺序执行这些操作：

const products = await page.$$('.product-list li .hover-overlay');

for (const overlay of products.slice(2)) {
  await overlay.hover();
  await overlay.click();
  await page.waitForSelector('.modal', { visible: true });
  const button = await page.waitForSelector('.save-btn', { visible: true });
  await button.click();
  await page.waitForFunction('.modal', { hidden: true });
}

我使用对元素本身的引用来避免重复搜索它们。我假设您在点击之前在叠加层上调用 hover，因为如果不首先悬停，页面将不会注册点击；如果不是这种情况，您可以完全省略 hover。

如何在 Puppeteer 上跟踪弹出模式

How to track pop-up modal on Puppeteer

javascript

node.js

puppeteer