我正在尝试单击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
任何帮助将不胜感激,谢谢!
答案 0 :(得分:3)
该页面上没有任何内容,
onload
标签上具有body
属性)。因此,您应该等到网络空闲为止。window.open()
处理程序中放入了onclick
代码,因此单击这些“ Perito”按钮会创建一个新窗口/标签。只需将{ waitUntil: "networkidle0" }
添加到.goto
或.waitForNavigation
。
await page.goto(
"https://portaleperiti.grupporealemutua.it/PPVET/VetrinaWebPortalePeriti/",
{ waitUntil: "networkidle0" }
// <-- Make sure the whole page is completely loaded
);
已经建议其他答案,请使用waitFor
等待该元素。
// 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
});
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()
);
与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等待。这可能不是最佳做法,但是现在您可以在为某些旧网站创建抓取工具时找到所需的内容。
答案 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();
});