木偶师评估功能

Question

我是pupetteer的新手，我试图通过一些例子来了解它实际上是如何工作的：

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

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

效果很好。但是，当我对木偶代码执行相同的操作时，他无法识别我查询的元素。

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 对象做到了。但是，我想了解我的第一个代码不起作用的原因。

谢谢

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();

Answer 2

不要使用手工制作的超时来等待页面加载，除非您正在测试页面是否只能在该时间内加载。与有时除了使用超时之外别无选择selenium不同，对于puppeteer，您应该始终找到一些可以使用的await函数，而不是猜测"好"超时。正如Milan Hlinák所回答的那样，查看页面HTML代码并找出一些可以等待的HTML标签，而不是使用超时。通常，等待您测试所需的 HTML 元素才能正常工作。在你的情况下，span.view-count，正如米兰·赫利纳克已经回答的那样：

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