如何使用Puppeteer抓取页面div内的指定文本（用户名）

你的代码中的核心错误 #

1. CSS选择器错误：
   你在document.querySelectorAll里写的.tc--g m--l--1 ellipses是错误写法，空格表示后代元素关系，但这三个都是类名，正确写法是用.连接多个类名：.tc--g.m--l--1.ellipses；或者直接复用你Cheerio里验证过的选择器.tiles_container a.tile__creator span更可靠。

2. textContent使用错误：
   textContent是DOM元素的属性，不是方法，不能加括号调用，应该写成x.textContent而非x.textContent()。

3. page.evaluate未返回结果：
   你在page.evaluate里的代码没有return数组，导致外部的itemArea变量为undefined，触发Reference Error: itemArea is not defined。

4. 错误使用jQuery的each方法：
   Puppeteer的page.evaluate返回的是普通JavaScript数组，不能用jQuery的each方法，应该用原生的forEach遍历。

修正后的完整代码 #

const puppeteer = require('puppeteer');
const url = "https://poshmark.com/category/Men-Jackets_&_Coats?sort_by=like_count&all_size=true&my_size=false";

async function main() {
    // 规范变量名，launch返回的是browser实例
    const browser = await puppeteer.launch({
        headless: true,
        executablePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    });

    const page = await browser.newPage();
    await page.goto(url);

    // 用你Cheerio里验证过的选择器等待元素加载
    await page.waitForSelector(".tiles_container a.tile__creator span");

    // 在page.evaluate里正确获取并返回用户名数组
    const usernames = await page.evaluate(() => {
        // 复用Cheerio里的可靠选择器
        return Array.from(document.querySelectorAll('.tiles_container a.tile__creator span'))
            .map(element => element.textContent.trim()); // trim去除多余空格
    });

    console.log("抓取到的用户名列表：", usernames);
    console.log("第一个用户名：", usernames[0]); // 输出ishhbang

    await browser.close(); // 关闭浏览器实例避免内存泄漏
};

main();

关键改进说明 #

• 直接复用你已用Cheerio验证过的选择器，避免重复调试选择器的麻烦
• 在page.evaluate中返回处理后的用户名数组，直接拿到结果
• 使用textContent.trim()去除用户名前后的空白字符
• 增加browser.close()，避免内存泄漏
• 去掉多余的jQuery风格遍历，改用原生数组方法处理

HTML/CSS导航学习资源推荐 #

• 学习CSS选择器：重点掌握类选择器、后代选择器、组合选择器的用法，从基础规则入手理解选择器匹配逻辑
• 学习DOM操作：掌握原生JavaScript的DOM API（比如querySelectorAll、textContent等属性方法），这是前端爬虫的核心基础
• 练习工具：用浏览器开发者工具的Elements面板，右键元素选择“Copy > Copy selector”来快速获取正确的CSS选择器，即时验证选择器是否匹配目标元素

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