javascript - Puppeteer 单击 span 元素中的链接
问题描述
我正在尝试解析一个漫画网站并保存所有页面。我有代码可以在保存图像的页面中运行。
我无法单击转到下一页的链接。我正在使用 Node 并使用 Puppeteer。我以为我可以document.querySelectorAll("span.next-prev-text")
用来获取链接中的跨度。
包括用于尝试获取下一页的相关代码和 html 我正在尝试单击 NEXT CHAPTER 链接。
<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);
}
解决方案
page.click()
唯一需要一个字符串选择器。我不知道为什么,但调用page.click(".next-prev-text")
会抛出一个错误,说Error: Node is either not visible or not an HTMLElement
.
解决方法是使用page.$$()
实际调用document.querySelectorAll()
. 它返回一个数组,因此您可以简单地ElementHandle
调用click()
.ElementHandle
当您单击“下一章”链接时,我还添加了处理弹出页面的代码。
这是要测试的完整代码。
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);
}
})();
推荐阅读
- python - 从硬件(GPRS 模块)发送时由对等方重置连接,但从 PC 发送时正常
- python - 使用美汤进行网页抓取(体育数据)
- scala - IntelliJ 在 udf 函数上构建了一个有 2 个错误的项目 - 没有可用于 Option[Seq[Testclass]] 的 TypeTag
- smalltalk - 最佳流大小(ReadStream、WriteStream 等)
- php - 逻辑与运算符的奇怪行为
- java - 在 Ant 任务中设置 JAVA OPTS
- python - 如何在 odoo 11 中使用报告打印记录?
- mongodb - Mongodb 嵌套数组聚合
- python - 画字母python
- firebase - Firebase 的“时间戳”值可以在客户端代码中轻松篡改吗?