Page.evaluate() 不会在 Promise 链中执行

Question

刚开始使用 Puppeteer。尝试解析页面，但评估方法无法以某种方式工作。

var Browser
var Page
var Result
puppeteer.launch()
  .then(function (browser) {
    console.log('Browser Created\nCreating Blank Page')
    Browser = browser
    return Browser.newPage()
  })
  .then(function (page) {
    console.log('Page Created\nVisiting URL')
    Page = page
    return Page.goto(URL)
  })
  .then(function (resp) {
    console.log('Website Loaded')
    return Page.evaluate(function () {
      // Completely Sync Stuff
      console.log('Evaluating Selectors')
      var myElems = document.getElementsByClassName('challenge-type light')
      Result = myElems
    })
  })
  .then(function (val) {
    console.log(Result)
    console.log('Done! Exiting')
    Browser.close()
    process.exit()
  })
  .catch(function (err) {
    Browser.close()
    console.log(err)
    process.exit(1)
  })

输出：

Browser Created
Creating Blank Page
Page Created
Visiting URL
Website Loaded
undefined
Done! Exiting

可能是什么错误？更喜欢没有 async/await 的解决方案。

编辑：“评估选择器”也没有记录到控制台，所以代码永远不会到达那里，这是我的担心。

Answer 1

我会仔细检查

document.getElementsByClassName('challenge-type light') 

返回一个结果。

我相信您使用的是无头浏览器，因此有时元素可能无法按预期加载。

Answer 2

终于搞定了。

1. evaluate 中的控制台将在页面上下文中，因此这是 chromium 页面的控制台。
2. 我们需要从评估函数返回一些东西。 DOM 元素不会按原样返回，因为它们在评估之外丢失了上下文。

这行得通：

.then(function (resp) {
    console.log('Website Loaded')
    return Page.evaluate(function () {
      return document.querySelector('.cover-heading').innerText
    })
  })

Answer 3

好的，你在正确的道路上，但你有一些问题。

根据您自己的回答：您注意到控制台日志在以evaluate 方法执行时在页面上下文中执行。你说得对，但说你不能从 evaluate 方法返回 DOM 元素是不正确的。你可以只是你的代码不太正确。

所以你拥有的是这样的：

.then(function (resp) {
  console.log('Website Loaded')
  return Page.evaluate(function () {
    // Completely Sync Stuff
    console.log('Evaluating Selectors')
    var myElems = document.getElementsByClassName('challenge-type light')
    Result = myElems
  })
})
.then(function (val) {
  console.log(Result)
  console.log('Done! Exiting')
});

这不起作用，因为您试图将 myElems 分配给 evaluate 方法内的 Result 变量。 evaluate 方法在浏览器中执行。 不知道 Result 变量存在于您的 puppeteer 脚本中。这就是为什么你的变量最后输出为undefined。

解决方法如下：

.then(function () {
  return Page.evaluate(function () {
    // Return the array of elements from inside the evaluate method
    return document.getElementsByClassName('challenge-type light')
  });
})
.then(function (elements) {
  console.log(elements) // Will be your array of elements
});

希望这会有所帮助！