Puppeteer选取DOM元素时date属性调用replace报空引用错误如何解决

你需要实现的逻辑是遍历页面.s-item商品节点，提取标题匹配标记、价格、日期三个字段，目标元素参考：

原实现代码：

const items =  document.querySelectorAll(".s-item")

for (const item of  items) {
    list.push(
        {
            title: item.querySelector(".s-item__title").innerText.includes('2/102'),    
            price:   item.querySelector(".s-item__price").innerText.replace('$', ''),
            date: item.querySelector(".s-item__title--tagblock").innerText.replace("o", "")
        }
    )
}

运行时抛出错误：Cannot read properties of null (reading 'replace')，错误指向date字段赋值逻辑。

报错根因 #

querySelector匹配不到目标元素时会返回null。你遍历的所有.s-item节点里，存在部分节点内部没有.s-item__title--tagblock子元素——这类节点一般是列表插入的广告占位、布局空节点、懒加载未完成渲染的商品项，直接对null调用.innerText就会触发空指针错误。
不止date字段，原代码里title、price的取值逻辑也有同样隐患，只要某一个item缺对应子元素就会抛错。

修复代码 #

加两层防护：一是提前等待目标元素渲染完成，二是遍历的时候对每个子元素做判空，缺核心字段的无效项直接跳过：

// Puppeteer环境下先等列表元素渲染完成再执行后续逻辑，避免懒加载导致DOM不存在
await page.waitForSelector('.s-item');

const items = document.querySelectorAll(".s-item");
const list = [];

for (const item of items) {
    // 先缓存各字段对应的DOM节点，统一判空
    const titleNode = item.querySelector(".s-item__title");
    const priceNode = item.querySelector(".s-item__price");
    const dateNode = item.querySelector(".s-item__title--tagblock");

    // 三个字段缺任意一个的无效节点直接跳过，不进入结果集
    if (!titleNode || !priceNode || !dateNode) continue;

    list.push({
        title: titleNode.innerText.includes('2/102'),
        price: priceNode.innerText.replace('$', ''),
        // 原逻辑replace("o")只会替换匹配到的第一个字符"o"，要移除所有"o"用replaceAll更符合预期
        date: dateNode.innerText.replaceAll("o", "")
    })
}

补充排查技巧：可以先在浏览器控制台分别执行document.querySelectorAll('.s-item').length和document.querySelectorAll('.s-item .s-item__title--tagblock').length，两个返回值的差值就是不带日期标签的无效节点数量，能快速验证是不是空节点导致的问题。

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