javascript - 无法使用 Puppeteer 访问 innerText 属性 - .$$eval 和 .$$ 未产生结果 - JavaScript

Question

我正在开发一个网络 scraper，它可以在 Google 上搜索某些内容，然后从结果页面中提取文本，但我在让 Puppeteer 返回我需要的文本时遇到了问题。我要返回的是一个字符串数组。

假设我在一个 div 中有几个嵌套的 div，每个都有这样的文本:

 <div class='mainDiv'>
   <div>Mary Doe </div>
   <div> James Dean </div>
 </div>

在 DOM 中，我可以执行以下操作以获得我需要的结果:

document.querySelectorAll('.mainDiv')[0].innerText.split('\n')

这会产生:["Mary Doe", "James Dean"]。

我知道 Puppeteer 不返回 NodeLists，而是使用 JSHandles，但我仍然无法弄清楚如何使用规定的方法获取任何信息。请参阅下面我在 Puppeteer 中尝试过的内容以及相应的控制台输出:

在每种情况下，我都会await page.waitFor('selector') 开始。

场景 1(使用 .$$eval()):

const genreElements = await page.$$eval('div.mainDiv', el => el);
console.log(genreElements) // [] 

场景 2(使用 evaluate):

function extractItems() {
   const extractedElements = document.querySelectorAll('div.mainDiv')[0].innerText.split('\n')
   return extractedElements
}
      
let items = await page.evaluate(extractItems)
console.log(items) // UnhandledPromiseRejectionWarning: Error: Evaluation failed: TypeError: Cannot read property 'innerText' of undefined

场景 3(使用 evaluateHandle):

const selectorHandle = await page.evaluateHandle(() => document.querySelectorAll('div.mainDiv'))
const resultHandle = await page.evaluate(x => x[0], selectorHandle)
console.log(resultHandle) // undefined

非常感谢任何有关我如何实现或如何实现我想要做的事情的帮助或指导。谢谢!

Answer 1

使用 page.$$eval() 或 page.evaluate():

您可以使用 page.$$eval()或 page.evaluate()运行 Array.from( document.querySelectorAll() )在页面上下文和 map() 中innerText结果数组的每个元素:

const names_1 = await page.$$eval('.mainDiv > div', divs => divs.map(div => div.innerText));
const names_2 = await page.evaluate(() => Array.from(document.querySelectorAll('.mainDiv > div'), div => div.innerText));

Note: Keep in mind that if you use Puppeteer to automate searches on Google, you may be temporarily blocked and end up with an "Unusual traffic from your computer network" notice, requiring you to solve a reCAPTCHA. This may break your web scraper, so proceed with caution.