如何通过Puppeteer获取指定li标签内Team对应的文本内容？

目标HTML结构 #

<div class="borderTopWhite item-sub-details">
    <ul>
        <li>Sport: <a href="#">Baseball</a></li>
        <li>Team: 
            <a href="#">Philadelphia Phillies</a> 
        </li>
    </ul>
</div>

需求是获取Team对应的文本内容「Philadelphia Phillies」，但使用以下代码时返回空对象：

错误代码示例 #

const details = await page.$$eval(
    '.item-sub-details ul li',
    els => els.map(el => el)
)

问题原因 #

$$eval 中直接返回DOM元素会导致空对象，因为浏览器环境的DOM对象无法被序列化传递回Node.js环境，必须在浏览器侧提取出可序列化的内容（比如字符串）再返回。

正确实现方法 #

方法1：直接定位Team行内的链接元素

利用CSS选择器直接定位第二个li里的a标签，提取文本：

const teamName = await page.$eval('.item-sub-details ul li:nth-child(2) a', el => el.textContent.trim());
console.log(teamName); // 输出 "Philadelphia Phillies"

方法2：遍历所有li项筛选目标

先获取所有li元素，筛选出包含「Team:」的项，再提取其中的链接文本：

const teamName = await page.$$eval('.item-sub-details ul li', els => {
    const teamLi = els.find(el => el.textContent.includes('Team:'));
    return teamLi ? teamLi.querySelector('a').textContent.trim() : '';
});
console.log(teamName); // 输出 "Philadelphia Phillies"

方法3：使用XPath定位目标li

通过XPath匹配包含「Team:」文本的li，再提取内部链接的文本：

const teamLi = await page.waitForXPath('//li[contains(text(), "Team:")]');
const teamName = await teamLi.$eval('a', el => el.textContent.trim());
console.log(teamName); // 输出 "Philadelphia Phillies"

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