使用JavaScript Puppeteer获取标签inner text返回undefined问题求助

问题根因 #

你错误使用了page.$$eval() API，该API的回调参数接收的是匹配到的元素数组，数组本身不存在innerText属性，因此返回值为undefined。你第一个函数checkMatchMana中使用el.map()是正确处理数组的写法，第二个函数遗漏了数组结构处理逻辑。
你尝试的CSS选择器本身没有问题，无需修改。

修复方案 #

两种修改方式任选其一即可：

方案1：改用page.$eval()获取单个元素 #

page.$eval专门用于匹配单个元素，回调直接接收匹配到的单个元素对象：

async function getText(page) {
    // 仅需将$$eval修改为$eval即可
    const displayName= await page.$eval("div.bio__name > span.bio__name__display", el => el.innerText);
    return displayName
}

方案2：保留$$eval，从数组中取目标元素 #

如果你需要保留$$eval写法，从返回的元素数组中取第一个元素再读取属性即可：

async function getText(page) {
    const displayName= await page.$$eval("div.bio__name > span.bio__name__display", el => el[0].innerText);
    return displayName
}

优化建议 #

你当前使用的强制等待10秒逻辑稳定性较差，可以在获取元素前添加等待元素加载的逻辑，避免元素未渲染完成就执行选择器导致匹配失败：

async function getText(page) {
    // 等待目标元素加载完成，最长等待10秒，超时才抛出异常
    await page.waitForSelector("div.bio__name > span.bio__name__display", {timeout: 10000})
    const displayName= await page.$eval("div.bio__name > span.bio__name__display", el => el.innerText);
    return displayName
}

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