如何使用Puppeteer实现列表页跳转后抓取内层详情页的指定内容

实现方案 #

你只需要在原有脚本收集完所有作者链接后，增加遍历作者详情页抓取字段的逻辑即可，同时建议增加去重逻辑避免重复请求同一个作者页面，优化抓取效率。

修改后完整代码 #

const puppeteer = require('puppeteer');

function run (pagesToScrape) {
    return new Promise(async (resolve, reject) => {
        try {
            if (!pagesToScrape) {
                pagesToScrape = 1;
            }
            const browser = await puppeteer.launch({headless:false});
            const [page] = await browser.pages();
            await page.goto("https://quotes.toscrape.com/");
            let currentPage = 1;
            let quotes = [];
            // 第一步：抓取所有分页的名言和作者链接
            while (currentPage <= pagesToScrape) {
                let newQuotes = await page.evaluate(() => {
                    let results = [];
                    let items = document.querySelectorAll('[class="quote"]');
                    items.forEach((item) => {
                        results.push({
                            authorUrl:  'https://quotes.toscrape.com' + item.querySelector("small.author + a").getAttribute('href'),
                            authorName: item.querySelector("small.author").innerText,
                            title: item.querySelector("span.text").innerText
                        });
                    });
                    return results;
                });
                quotes = quotes.concat(newQuotes);
                if (currentPage < pagesToScrape) {
                    // 修正原写法小问题，Promise.all内直接传Promise实例即可
                    await Promise.all([
                        page.waitForSelector('li.next > a'),
                        page.click('li.next > a'),
                        page.waitForSelector('[class="quote"]')
                    ])
                }
                currentPage++;
            }

            // 第二步：对作者链接去重，避免重复请求同一页面
            const uniqueAuthorUrls = [...new Set(quotes.map(item => item.authorUrl))];
            const authorDescMap = {};

            // 遍历所有唯一作者链接抓取描述字段
            for (const authorUrl of uniqueAuthorUrls) {
                await page.goto(authorUrl);
                await page.waitForSelector('.author-description');
                const description = await page.evaluate(() => {
                    return document.querySelector('.author-description').innerText.trim();
                });
                authorDescMap[authorUrl] = description;
            }

            // 第三步：把作者描述合并到原数据中
            const result = quotes.map(item => ({
                ...item,
                authorDescription: authorDescMap[item.authorUrl]
            }));

            browser.close();
            return resolve(result);
        } catch (e) {
            return reject(e);
        }
    })
}
run(3).then(console.log).catch(console.error);

核心改动说明 #

• 新增作者链接去重逻辑，避免同一个作者多次出现在不同名言页时重复请求，大幅提升抓取效率
• 分页内容收集完成后，遍历所有唯一的作者详情页，抓取.author-description节点的文本内容，和作者URL做映射
• 最后将作者描述字段合并到原有输出结果中，你也可以根据自身需求调整输出结构

内容的提问来源于stack exchange，提问作者MITHU