如何用Puppeteer获取::before伪元素后的文本并仅取首个实例？

我是WebScraping和Puppeteer新手，正在学习该库的选择器方法。需要获取示例HTML中<a>标签内::before伪元素后的文本，同时也需要其后续<span>标签内的文本（前者优先级更高）。页面上有10个带有trackName和playIcon类的元素，但只需要首个实例的文本。尝试了两种方法都返回undefined，不确定是伪元素导致的问题还是语法错误。

页面HTML结构 #

<div class="details-inner">
<a class="trackName playIcon" href="/link/488824/sample-text-%40-link/" title="A Title is Here"> ::before "This is the text I want"</a>
<span class="track"> <a href="/anchor-link-to-somewhere/">I also want this text</a></span>
</div>

尝试的代码 #

尝试1

const content = await page.$$('.trackName playIcon');
const contentText = await page.evaluate(a => a.textContent, content);

console.log(contentText);

尝试2

const content1 = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.trackName playIcon'), a => a.textContent);
});
console.log(content1[0]);

问题分析与解决方法 #

1. 选择器语法错误：你的选择器.trackName playIcon逻辑错误，它会查找.trackName元素下的playIcon标签，但实际上playIcon是<a>标签的类名，正确写法是.trackName.playIcon（用点连接多个类名，表示同时拥有这两个类的元素）。
2. 伪元素不影响文本获取：::before是伪元素，不会出现在元素的textContent中，但你要的是伪元素之后的真实文本，直接取<a>标签的textContent/innerText即可，注意去除多余空格。
3. 优先获取首个实例：无需获取所有元素再取索引，用page.$()（获取单个元素）或document.querySelector()更高效。

正确代码示例 #

方法一：拆分获取逻辑

// 获取首个.trackName.playIcon元素的文本
const trackText = await page.$eval('.trackName.playIcon', el => el.textContent.trim());
// 获取后续span内的文本
const spanText = await page.$eval('.details-inner .track a', el => el.textContent.trim());

// 优先级逻辑：优先取trackText，不存在则取spanText
const result = trackText || spanText;
console.log(result);

方法二：在evaluate内完成所有逻辑

const result = await page.evaluate(() => {
    // 获取目标a元素
    const trackEl = document.querySelector('.trackName.playIcon');
    let text = trackEl?.textContent.trim();
    // 如果没有获取到，再取span内的文本
    if (!text) {
        const spanEl = document.querySelector('.details-inner .track a');
        text = spanEl?.textContent.trim() || '';
    }
    return text;
});
console.log(result);

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