Puppeteer：如何实现选择器精准选择并获取目标元素文本？

问题场景 #

给定以下HTML结构，需要获取第二个带selector_what_me_need类的div元素内的文本“need value”：

<div class="masterselector">
   <div class="selector_what_me_need selector01 selector02"><div>not need value</div></div>
   <div class="selector_what_me_need"><div>need value</div></div>
</div>

单个模块的解决方案 #

如果页面只有一组.masterselector模块，有两种简单实现方式：

• 用CSS伪类直接定位第二个子元素：

// 获取单个目标文本
const targetText = await page.$eval('.masterselector .selector_what_me_need:nth-child(2) div', el => el.textContent);

• 先获取所有匹配元素，再取第二个的文本：

// 先拿到所有符合外层类的元素，再通过索引取第二个
const targetText = await page.$$eval('.masterselector .selector_what_me_need div', els => els[1].textContent);

多模块通用解决方案 #

当页面存在多组.masterselector模块时，为避免误选带selector01/selector02类的元素，用排除类的CSS选择器批量获取所有符合条件的文本：

// 批量提取所有目标文本
const allTargetTexts = await page.$$eval('.masterselector .selector_what_me_need:not(.selector01):not(.selector02) div', el => el.map(e => e.textContent));

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