Puppeteer元素不存在时存null值问题及evaluate方法失效排查

问题根源 #

你第二段代码的核心错误是传给page.evaluate的参数错误：你把循环索引i当作DOM元素传入回调，但i是数字类型，调用el.querySelector完全不合理，直接导致代码报错，被catch捕获后name始终保持初始值'Null'，所以才会一直返回null。

修正方案 #

方案1：修复page.evaluate的用法

直接在浏览器上下文里用document.querySelector查找元素，同时先判断元素是否存在，避免访问textContent时抛错：

for (let i = 0; i < urls.length; i++) {
    let name = 'Null';
    try {
        name = await page.evaluate(() => {
            const ele = document.querySelector("div > div > span > div > h1");
            return ele ? ele.textContent : 'Null';
        });
    } catch (error) {
        console.error(`处理第${i}个URL时出错:`, error);
    }
    console.log(name);

    if (name !== "Null") {
        await fs.promises.appendFile(
            "files/data.csv",
            `${name}\n`
        );
    }
}

方案2：在原有正常代码基础上增加错误捕获

既然你的第一段代码能正常找到元素，直接给它套上try/catch就能处理元素不存在的情况，更简单：

for (let i = 0; i < urls.length; i++) {
    let name2 = 'Null';
    try {
        name2 = await page.$eval('div > div > span > div > h1', ele => ele.textContent);
    } catch (error) {
        console.log(`第${i}个URL未找到目标元素`);
    }
    console.log(name2);

    if (name2 !== "Null") {
        await fs.promises.appendFile(
            "files/data.csv",
            `${name2}\n`
        );
    }
}

额外优化提示 #

1. 把循环变量var改成let，避免闭包导致的索引混乱问题。
2. 原代码用的fs.appendFile是异步回调形式，在循环里会导致写入顺序错乱，建议换成fs.promises.appendFile并搭配await，保证写入顺序正确。

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