木偶关闭JavaScript警报框

Question

我正在尝试单击this website上的页面按钮，但是当我进入网站时，会出现一个警告框，但我不知道如何关闭它。

我刚刚开始尝试Puppeteer，这是我现在正在使用的简单代码：

const ptr = require('puppeteer');

ptr.launch().then(async browser => {

const page = await browser.newPage();

await page.setViewport({ width: 1280, height: 800 });
await page.goto('https://portaleperiti.grupporealemutua.it/PPVET/VetrinaWebPortalePeriti/');

//This is the alert button selector 
await page.click("#BoxAlertBtnOk");

//This is the button on the page i want to click on 
await page.click("input[value='Perito RE / G.F.']");

await page.screenshot({
    path: 'screenshot.png',
    fullPage: true
});

await browser.close();
});

这是我得到的错误： UnhandledPromiseRejectionWarning：错误：节点不可见或不是HTMLElement     在ElementHandle._clickablePoint

任何帮助将不胜感激，谢谢！

Answer 1

该页面上没有任何内容，

• 仅在页面加载后加载警报框（它在onload标签上具有body属性）。因此，您应该等到网络空闲为止。
• 由于window.open()处理程序中放入了onclick代码，因此单击这些“ Perito”按钮会创建一个新窗口/标签。
• 新标签会重定向多次，如果用户尚未登录，则会显示一个登录页面。

解决方案：

1。确保正确加载页面。

只需将{ waitUntil: "networkidle0" }添加到.goto或.waitForNavigation。

await page.goto(
    "https://portaleperiti.grupporealemutua.it/PPVET/VetrinaWebPortalePeriti/",
    { waitUntil: "networkidle0" }
    // <-- Make sure the whole page is completely loaded
);

2。等待元素，然后单击

已经建议其他答案，请使用waitFor等待该元素。

// wait and click the alert button
await page.waitFor("#BoxAlertBtnOk");
await page.click("#BoxAlertBtnOk");

3。可选，点击按钮后，在截图之前添加几秒钟。

// optional, add few seconds before taking this screenshot
// just to make sure it works even on slow machine
await page.waitFor(2000);
await page.screenshot({
  path: "screenshot_before.png",
  fullPage: true
});

4。使用page.evaluate和document.querySelector获取元素

page.click将无法处理所有类型的点击。有时，某些元素绑定了不同的事件，因此您必须将其分开对待。

// we can click using querySelector and the native
// just page.click does not trigger the onclick handler on this page
await page.evaluate(() =>
    document.querySelector("input[value='Perito RE / G.F.']").click()
);

5。分别对待新标签页

与browser.once('targetcreated')，new Promise和browser.pages()一起，您可以捕获新创建的标签并对其进行处理。

注意：在使用答案之前，请先阅读答案末尾的最终代码。

// this is the final page after clicking the input on previous page
// https://italy.grupporealemutua.it/FIM/sps/IDPRMA/saml20/login
function newTabCatcher(browser) {
  // we resolve this promise after doing everything we need to do on this page
  // or in error
  return new Promise((resolve, reject) => {
    // set the listener before clicking the button to have proper interaction
    // we listen for only one new tab
    browser.once("targetcreated", async function() {
      console.log("New Tab Created");
      try {
        // get the newly created window
        const tabs = await browser.pages();
        const lastTab = tabs[tabs.length - 1];

        // Wait for navigation to finish as well as specific login form
        await Promise.all([
          lastTab.waitForNavigation({ waitUntil: "networkidle0" }),
          lastTab.waitFor("#div_login")
        ]);

        // browser will switch to this tab just when it takes the screenshot
        await lastTab.screenshot({
          path: "screenshot_newtab.png",
          fullPage: true
        });

        resolve(true);
      } catch (error) {
        reject(error);
      }
    });
  });
}

最终密码：

为清楚起见，这是我使用上面指定的所有代码段的方式。

const ptr = require("puppeteer");

ptr.launch({ headless: false }).then(async browser => {
  const page = await browser.newPage();

  await page.setViewport({ width: 1280, height: 800 });
  await page.goto(
    "https://portaleperiti.grupporealemutua.it/PPVET/VetrinaWebPortalePeriti/",
    { waitUntil: "networkidle0" }
    // <-- Make sure the whole page is completely loaded
  );

  // wait and click the alert button
  await page.waitFor("#BoxAlertBtnOk");
  await page.click("#BoxAlertBtnOk");

  // optional, add few seconds before taking this screenshot
  // just to make sure it works even on slow machine
  await page.waitFor(2000);
  await page.screenshot({
    path: "screenshot_before.png",
    fullPage: true
  });

  // we can click using querySelector and the native
  // just page.click does not trigger the onclick handler on this page
  await page.evaluate(() =>
    document.querySelector("input[value='Perito RE / G.F.']").click()
  );

  // here we go and process the new tab
  // aka get screenshot, fill form etc
  await newTabCatcher(browser);

  // rest of your code
  // ... 

  await browser.close();
});

结果：

它完美无缺！

注意：

注意我如何一起使用新的Promise和async等待。这可能不是最佳做法，但是现在您可以在为某些旧网站创建抓取工具时找到所需的内容。

Answer 2

您的按钮-#BoxAlertBtnOk稍后会出现在网页上，当您调用await page.click("#BoxAlertBtnOk");时，该按钮不可见。尝试等到可见后再采取行动：

await page.waitForSelector("#BoxAlertBtnOk");
await page.click("#BoxAlertBtnOk");

await page.waitForSelector("input[value='Perito RE / G.F.']");
await page.click("input[value='Perito RE / G.F.']");

Answer 3

如果它与其他面临对话框的人有关，则以下代码为我解决了此问题：

    this.page.on('dialog', async dialog => {
        await dialog.dismiss();
    });