Puppeteer page.evaluate的使用详解

18 min read

page.evaluate() 是 Puppeteer 提供的一个方法,在页面上下文中执行 JavaScript 代码,并返回执行结果。

用法:

page.evaluate(pageFunction[, ...args])

其中,pageFunction 是一个要在页面上下文中执行的 JavaScript 函数,args 是传递给 pageFunction 的参数。在页面上下文中执行的代码可以访问页面 DOM、JavaScript 变量、函数等。

page.evaluate() 执行的过程中,所有的对象都会被序列化然后传输给页面的执行环境,所以不能传递需要浏览器运行的函数。如果页面上下文中有需要与页面交互的对象,可以通过一些 transparent 函数将其传递给 page.evaluate()

使用 page.evaluate() 的目的通常有两个:

  1. 从页面上获取需要的数据,如获取元素的属性、获取页面的截图等。
  2. 在页面上执行一些操作,如点击按钮、输入文本等。

举例说明:

// 获取元素的文本内容
const textContent = await page.evaluate(() => {
  const element = document.querySelector('#myElement');
  return element.textContent;
});

console.log(textContent);

在上面的例子中,page.evaluate() 会执行页面上下文中传入的函数,在函数内部使用 document.querySelector() 来获取指定元素,并返回其文本内容。

再来看一个例子,假设我们要在页面上点击一个按钮:

await page.evaluate(() => {
  const button = document.querySelector('#myButton');
  button.click();
});

在上面的例子中,page.evaluate() 会执行页面上下文中传入的函数,通过 document.querySelector() 获取指定按钮元素,并调用 click() 方法模拟按钮点击操作。

需要注意的是,page.evaluate() 返回的结果是一个序列化后的值,如果需要返回一个 DOM 元素或者包含 DOM 元素的数据结构,需要在 JavaScript 序列化和反序列化时小心处理。

总结:

page.evaluate() 是 Puppeteer 提供的一个方法,用于在页面上下文中执行 JavaScript 代码,并返回执行结果。可以通过该方法获取页面上的数据,或者执行页面上的操作。