Puppeteer evaluate function

Question

我是新手，正在尝试通过一些示例来了解puppeteer的实际工作原理：

所以，基本上我在这个示例中想要做的是提取YouTube视频的观看次数。我在Chrome控制台上编写了一行js代码，让我提取了这些信息：

document.querySelector('#count > yt-view-count-renderer > span.view-count.style-scope.yt-view-count-renderer').innerText

这个方法很有效。但是当我用我的pupeteer代码做同样的事情时，他无法识别我查询的元素。

const puppeteer = require('puppeteer')

const getData = async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.goto('https://www.youtube.com/watch?v=T5GSLc-i5Xo')
  
  await page.waitFor(1000)

  const result = await page.evaluate(() => {
    let views = document.querySelector('#count > yt-view-count-renderer > span.view-count.style-scope.yt-view-count-renderer').innerText
    return {views}
  })

  browser.close()
  return result
}

getData().then(value => {
  console.log(value)
})

我最终使用ytInitialData对象完成了它。然而，我想理解为什么我的第一个代码没有起作用。

谢谢。

- elkolotfi

---

似乎等待时间不够长，那么等待直到所有请求完成 page.goto( 'https://www.youtube.com/watch?v=T5GSLc-i5Xo', { waitUntil: 'networkidle2', timeout: 0 });，然后移除 page.waitFor。 - pariola

我正在努力理解这段 Puppeteer 代码。不确定是否相关，但是使用 let views = .... 的原因是什么？我的意思是为什么要用 let。而且为什么返回 {views} 而不只是 views？提前感谢！ - RocketNuts

Answer 1

似乎等待1000毫秒不够。

请使用https://try-puppeteer.appspot.com/测试您的解决方案，您将看到结果。

但是，如果您尝试以下解决方案，您将获得正确的结果。

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://www.youtube.com/watch?v=T5GSLc-i5Xo');

await page.waitForSelector('span.view-count');
const views = await page.evaluate(() => document.querySelector('span.view-count').textContent);
console.log('Number of views: ' + views);

await browser.close();

- Milan Hlinák

Answer 2

不要使用手工超时等待页面加载，除非您正在测试页面是否只能在那段时间内加载。与 selenium 不同，有时您别无选择，只能使用超时，但是使用 puppeteer 时，您应该始终找到一些可以使用的 await 函数，而不是猜测一个“好”的超时时间。正如 Milan Hlinák 所回答的那样，查看页面 HTML 代码，并找出一些 HTML 标记，您可以等待它们，而不是使用超时。通常，等待您测试所需的 HTML 元素才能正常工作。在您的情况下，就像 Milan Hlinák 已经回答的那样，等待 span.view-count。

await page.waitForSelector('span.view-count');

- user