木偶在span元素中点击链接

Question

我正在尝试解析一个漫画网站并保存所有页面。我有代码工作，通过保存图像的页面运行。

我有麻烦点击到下一页的链接。我正在使用Node和Puppeteer。我想我可以只使用document.querySelectorAll("span.next-prev-text")来获得链接中的跨度。

包括试图获得下一页和html的相关代码，我试图点击下一章链接。

<div class="col-md-6 prev-post">
<a class="" href="https://tokyorevengersmanga.com/manga/tokyo-manji-revengers-vol-1-chapter-1-reborn/">
<span class="next-prev-text">PREVIOUS CHAPTER </span>
</a>
</div>
<div class="col-md-6 next-post">
<a class="" href="https://tokyorevengersmanga.com/manga/tokyo-manji-revengers-chapter-3/">
<span class="next-prev-text">NEXT CHAPTER</span>
</a>
</div>

(async() => {
try {
const browser = await puppeteer.launch();
const page = await browser.newPage();
//starting page
await page.goto(
"https://tokyorevengersmanga.com/manga/tokyo-manji-revengers-vol-1-chapter-1-reborn/"
);
console.log("page has loaded")
const chapter = await page.evaluate(() => {
const pages = Array.from(
document.querySelectorAll("img.aligncenter")
).map((image) => image.getAttribute("src"));
return pages
});
fs.writeFileSync("./data.json", JSON.stringify(chapter));
console.log("File is created!");
const nextPage = await page.evaluate(() => {
var obj = document.querySelectorAll("span.next-prev-text");
return obj[1];
})
await page.click(nextPage);
await page.waitForNavigation();
await browser.close();
} catch (error) {
console.log(error);
}

Answer 1

page.click()只接受字符串选择器。我不知道为什么，但是调用page.click(".next-prev-text")会抛出一个错误，说Error: Node is either not visible or not an HTMLElement。

解决方法是使用实际调用document.querySelectorAll()的page.$$()方法。它返回一个ElementHandle的数组，因此您可以简单地在ElementHandle上调用click()方法。

我还添加了代码来处理当您单击"下一章"时弹出的页面。链接。

下面是完整的测试代码。

const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
try {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
//starting page
await page.goto(
"https://tokyorevengersmanga.com/manga/tokyo-manji-revengers-vol-1-chapter-1-reborn/"
);
console.log("page has loaded")
const chapter = await page.evaluate(() => {
const pages = Array.from(
document.querySelectorAll("img.aligncenter")
).map((image) => image.getAttribute("src"));
return pages
});
fs.writeFileSync("./data.json", JSON.stringify(chapter));
console.log("File is created!");
const next = await page.$$(".next-prev-text");
const [popup] = await Promise.all([
new Promise((resolve) => page.once('popup', async p => {
await p.waitForNavigation({
waitUntil: 'networkidle0'
});
resolve(p);
})),
next[1].click()
]);
// do your job on the next page with 'popup' here
await browser.close();
} catch (error) {
console.log(error);
}
})();