木偶关闭JavaScript警报框

时间:2019-03-20 10:29:00

标签: node.js puppeteer

我正在尝试单击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

任何帮助将不胜感激,谢谢!

3 个答案:

答案 0 :(得分:3)

该页面上没有任何内容,

  • 仅在页面加载后加载警报框(它在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.evaluatedocument.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 Promisebrowser.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等待。这可能不是最佳做法,但是现在您可以在为某些旧网站创建抓取工具时找到所需的内容。

答案 1 :(得分:0)

您的按钮-#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.']");

答案 2 :(得分:0)

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

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