使用Puppeteer与Cheerio提取列表项为二维数组及本地站点访问问题

问题背景 #

你正在使用Puppeteer、Cheerio和Node.js提取网页列表项，目标是将每个<ul class="people">下的<li>内容存入二维数组，但当前代码输出不符合预期，同时需要了解如何用Puppeteer访问本地站点。

网页HTML结构：

<table>
    <td class="hr">
        <ul class="people">
            <li class = "person">Richard</li>
            <li class = "person">Linus</li>
            <li class = "person">Brian</li>
            <li class = "team_lead">Charles</li>
        </ul>
    </td>
    <td class="manufacturing">
        <ul class="people">
            <li class = "person">Alan</li>
            <li class = "person">Margret</li>
            <li class = "person">Ken</li>
            <li class = "person">Edsger</li>
            <li class = "team_lead">Dennis</li>
        </ul>
    </td>
    <td class="design">
        <ul class="people">
            <li class = "person">Bill</li>
            <li class = "person">Ada</li>
            <li class = "person">Steve</li>
            <li class = "person">Ken</li>
            <li class = "team_lead">Dennis</li>
        </ul>
    </td>
</table>

当前使用的Node.js代码：

const puppeteer = require("puppeteer");
const cheerio = require("cheerio");

async function main(){
    const browser = await puppeteer.launch({headless : false, defaultViewport: {width: 1920, height: 1080}});
    const page = await browser.newPage();
    await page.goto("${url}");
    const htmlContent = await page.content();
    const $ = cheerio.load(htmlContent);

    let peopleList = [];

    $(`table td .people`).each(function(i, li){
        peopleList.push(li.text());
    });
    console.log(`people: ${peopleList}`);
}
main();

1. 实现二维数组存储列表项 #

你的代码问题在于：$(table td .people)选中的是<ul>元素而非<li>，且直接调用DOM元素的text()方法会报错（DOM元素没有该方法，需转为Cheerio对象）。正确做法是遍历每个<ul class="people">，再遍历其下的<li>收集文本，生成子数组后推入二维数组。

修正后的代码：

const puppeteer = require("puppeteer");
const cheerio = require("cheerio");

async function main(){
    const browser = await puppeteer.launch({headless : false, defaultViewport: {width: 1920, height: 1080}});
    const page = await browser.newPage();
    await page.goto("${url}"); // 替换为实际URL或本地路径
    const htmlContent = await page.content();
    const $ = cheerio.load(htmlContent);

    let peopleList = [];

    // 遍历每个ul.people
    $(`table td .people`).each(function(){
        // 收集当前ul下所有li的文本
        const group = $(this).find("li").map(function(){
            return $(this).text().trim(); // 去除可能的空白字符
        }).get(); // 将Cheerio对象转为普通数组
        peopleList.push(group);
    });
    console.log("people:", peopleList);
}
main();

运行后将得到预期的二维数组：

peopleList = [["Richard", "Linus", "Brian", "Charles"], ["Alan", "Margret", "Ken", "Edsger", "Dennis"], ["Bill", "Ada", "Steve", "Ken", "Dennis"]];

2. Puppeteer访问本地站点 #

有两种常用方式：

• 方式一：通过本地服务器访问
  先安装静态文件服务器（如http-server）：npm install -g http-server，进入本地HTML文件所在目录后运行http-server，默认会在localhost:8080提供服务。此时Puppeteer的访问代码为：

  await page.goto("http://localhost:8080/index.html");
  

• 方式二：直接加载本地文件（无需服务器）
  使用file://协议直接加载本地文件，注意不同系统的路径格式：

  • macOS/Linux：路径以file:///开头，例如：

    await page.goto("file:///Users/yourname/Desktop/index.html");
    

  • Windows：路径格式为file:///C:/path/to/index.html（注意盘符前的斜杠），例如：

    await page.goto("file:///C:/Users/yourname/Desktop/index.html");
    

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