本文介绍了使用Puppeteer点击主链接并点击子链接？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
简化：
我有一个包含链接的网站。
点击每个链接后，它会进入我需要的新页面访问链接（通过点击，而不是导航）。
I have a website with links.
After clicking on each link , it goes to a new page that I need to visit the links ( by clicking , not navigating).
可视化：
我已成功完成99％的工作：
I've managed to do 99% percent of the job:
(async () =>
{
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
let url = "https://www.mutualart.com/Artists";
console.log(`Fetching page data for : ${url}...`);
await page.goto(url);
await page.waitForSelector(".item.col-xs-3");
let arrMainLinks: ElementHandle[] = await page.$$('.item.col-xs-3 > a'); //get the main links
console.log(arrMainLinks.length); // 16
for (let mainLink of arrMainLinks) //foreach main link let's click it
{
let hrefValue =await (await mainLink.getProperty('href')).jsonValue();
console.log("Clicking on " + hrefValue);
await Promise.all([
page.waitForNavigation(),
mainLink.click({delay: 100})
]);
// let's get the sub links
let arrSubLinks: ElementHandle[] = await page.$$('.slide >a');
//let's click on each sub click
for (let sublink of arrSubLinks)
{
console.log('██AAA');
await Promise.all([
page.waitForNavigation(),
sublink.click({delay: 100})
]);
console.log('██BBB');
// await page.goBack()
break; // for now ...
}
break;
}
await browser.close();
})();
那么问题出在哪里？
它到达██AAA
但它永远不会达到██BBB
It reaches the ██AAA
But it never reaches ██BBB
我收到一个错误：
C:\temp\puppeterr1\app>node server2.js
Fetching page data for : https://www.mutualart.com/Artists...
16
Clicking on https://www.mutualart.com/Artist/Mr--Brainwash/9B3FED6BB81E6B8E
██AAA
(node:17200) UnhandledPromiseRejectionWarning: TimeoutError: Navigation Timeout Exceeded: 30000ms exceeded
at Promise.then (C:\temp\puppeterr1\node_modules\puppeteer\lib\FrameManager.js:1230:21)
at <anonymous>
-- ASYNC --
at Frame.<anonymous> (C:\temp\puppeterr1\node_modules\puppeteer\lib\helper.js:144:27)
at Page.waitForNavigation (C:\temp\puppeterr1\node_modules\puppeteer\lib\Page.js:599:49)
at Page.<anonymous> (C:\temp\puppeterr1\node_modules\puppeteer\lib\helper.js:145:23)
at Object.<anonymous> (C:\temp\puppeterr1\app\server2.js:127:30)
at step (C:\temp\puppeterr1\app\server2.js:32:23)
at Object.next (C:\temp\puppeterr1\app\server2.js:13:53)
at fulfilled (C:\temp\puppeterr1\app\server2.js:4:58)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
(node:17200) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:17200) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
问题：
我在这里缺少什么？
为什么它不能到达██BBB？
What am I missing here ?
Why can't it reach the ██BBB ?
推荐答案
更新：
原始答案：
更新，我设法解决了这个问题，但没有通过我想要的常规方式解决。
Update , I've managed to solve it but not via the regular way that I wanted.
似乎有一个 ElementHandle 的问题。这就是为什么我转向纯粹的 DOM 对象。
It seems that there is a problem with ElementHandle. Which is why I've moved to pure DOM objects.
我仍然对更直观感兴趣解决方案而不是处理ElementHandle：
I'm still interested with a more intuitive solution rather by dealing with ElementHandle :
无论如何，这是我的解决方案：
Anyway here is my solution :
(async () =>
{
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
let url = "https://www.mutualart.com/Artists";
console.log(`Fetching page data for : ${url}...`);
await page.goto(url);
await page.waitForSelector(".item.col-xs-3");
let arrMainLinks = await page.evaluate(() =>
{
return Array.from(document.querySelectorAll('.item.col-xs-3 > a'));
});
console.log(arrMainLinks.length);
for (let i = 0; i < arrMainLinks.length; i++) //get the main links
{
await page.evaluate((a) =>
{
return ([...document.querySelectorAll('.item.col-xs-3 > a')][a] as HTMLElement ).click();
}, i);
await page.waitForNavigation();
let arrSubLinks2 = await page.evaluate(() =>
{
return Array.from(document.querySelectorAll('.slide>a'));
});
console.log(arrSubLinks2.length);
for (let j = 0; j < arrSubLinks2.length; j++)
{
console.log('███AAA');
await page.evaluate((a) =>
{
return ([...document.querySelectorAll('.slide>a')][a] as HTMLElement) .click();
}, j);
await page.waitForNavigation();
let ddd: ElementHandle[] = await page.$$('.artist-name');
console.log(ddd.length);
console.log('███BBB');
await page.waitFor(2000);
await page.goBack();
console.log('███CCC');
}
await page.waitFor(2000);
await page.goBack();
}
await browser.close();
})();
这篇关于使用Puppeteer点击主链接并点击子链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！