如何在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'),
  ])
}

this is the error

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

puppeteer : ^1.7.0

node : v9.4.0

Answer 1

Promise.all will let all the promises run to fulfillment simultaneously, so here you're simultaneously hovering and clicking on a particular element, waiting for two selectors, and clicking on an element matching the last one. You can perform these actions in a sequence by using await inside the loop as well:

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 });
}

I'm using references to the elements themselves to avoid repeatedly searching for them. I'm assuming you call hover on the overlay before clicking because the page won't register a click without hovering first; if that's not the case, you can leave out the hover entirely.