该页面上发生的事情很少，
- 警告框仅在页面加载后加载（它在
body 标记上有一个onload 属性）。所以你应该等到网络空闲。
- 由于
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);
}
});
});
}
最终代码：
为了清楚起见，这里是我使用上面指定的所有代码 sn-ps 的方式。
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();
});
结果：
完美运行！
注意：
注意我是如何一起使用 new Promise 和 async await 的。这可能不是最佳做法，但现在您可以了解在为一些旧网站创建抓取工具时要查找的内容。