Puppeteer优化：如何避免重复编写选择器缺失判断语句

问题场景 #

已用Puppeteer实现多网页数据爬取，但每个数据提取逻辑都重复编写if (element)判断选择器是否存在，实际代码中有12处此类重复逻辑，仅querySelector的参数不同。尝试封装函数但无法配合await使用，寻求解决办法。

解决方案 #

方法一：利用Puppeteer内置page.$eval简化逻辑

page.$eval本身会处理元素不存在的情况——找不到元素时会抛出错误，只需捕获错误返回null即可，无需手写判断逻辑：

const puppeteer = require('puppeteer'); 
let urls = require('./assets/links.js').urls;

(async () => { 
    const browser = await puppeteer.launch(); 
    const page = await browser.newPage(); 
    
    for (const url of urls) {
        await page.goto(url);

        // 用$eval+catch直接实现原逻辑
        const title = await page.$eval('h1', el => el.innerText).catch(() => null);
        const reviews = await page.$eval('.example-class', el => el.innerText).catch(() => null);
        const description = await page.$eval('#example-id', el => el.innerText).catch(() => null);

        console.log({ url, title, reviews, description });
    }
    
    await browser.close(); 
})();

方法二：封装通用提取函数

如果需要更灵活的提取逻辑（比如提取href、src等其他属性），可以封装一个异步通用函数复用判断逻辑：

const puppeteer = require('puppeteer'); 
let urls = require('./assets/links.js').urls;

// 封装通用提取函数，支持自定义提取规则
async function extractElement(page, selector, extractFn = el => el.innerText) {
    return page.evaluate((selector, extractFn) => {
        const element = document.querySelector(selector);
        return element ? extractFn(element) : null;
    }, selector, extractFn);
}

(async () => { 
    const browser = await puppeteer.launch(); 
    const page = await browser.newPage(); 
    
    for (const url of urls) {
        await page.goto(url);

        // 调用封装函数，传入选择器即可
        const title = await extractElement(page, 'h1');
        const reviews = await extractElement(page, '.example-class');
        // 示例：自定义提取href属性
        // const link = await extractElement(page, '.detail-link', el => el.href);
        const description = await extractElement(page, '#example-id');

        console.log({ url, title, reviews, description });
    }
    
    await browser.close(); 
})();

方法三：在page.evaluate内部复用函数

如果想减少与浏览器的通信次数，可在page.evaluate内部定义复用函数，一次性提取所有数据：

const puppeteer = require('puppeteer'); 
let urls = require('./assets/links.js').urls;

(async () => { 
    const browser = await puppeteer.launch(); 
    const page = await browser.newPage(); 
    
    for (const url of urls) {
        await page.goto(url);

        // 单次evaluate提取全部数据，内部复用判断逻辑
        const data = await page.evaluate(() => {
            function getText(selector) {
                const el = document.querySelector(selector);
                return el ? el.innerText : null;
            }
            return {
                title: getText('h1'),
                reviews: getText('.example-class'),
                description: getText('#example-id')
            };
        });

        console.log({ url, ...data });
    }
    
    await browser.close(); 
})();

这种方式能减少跨进程通信次数，提升爬取性能，适合大量数据提取场景。

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