На этой странице мало что происходит,
- Окно предупреждения загружается только после загрузки страницы (в теге
body
имеется свойство onload
). Поэтому вам следует подождать, пока сеть не будет работать.
- Нажатие на эти кнопки «Perito» создает новое окно / вкладку из-за кода
window.open()
, помещенного в обработчик onclick
.
- Новая вкладка перенаправляет несколько раз и показывает страницу входа, если пользователь еще не вошел в систему.
Решение:
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();
});
Результат:
Работало без нареканий!
![](https://i.imgur.com/1p834uK.png)
Примечание:
Обратите внимание, как я использовал новые Promise и async, ожидающие вместе. Возможно, это не лучшая практика, но теперь у вас есть пример того, что нужно искать при создании скребка для некоторых старых веб-сайтов.