跳至主要内容
版本:22.5.0

评估 JavaScript

Puppeteer 允许在 Puppeteer 驱动的页面的上下文中评估 JavaScript 函数

// Import puppeteer
import puppeteer from 'puppeteer';

(async () => {
// Launch the browser
const browser = await puppeteer.launch();

// Create a page
const page = await browser.newPage();

// Go to your site
await page.goto('YOUR_SITE');

// Evaluate JavaScript
const three = await page.evaluate(() => {
return 1 + 2;
});

console.log(three);

// Close browser.
await browser.close();
})();
注意

尽管该函数在你的脚本上下文中定义,但它实际上会被 Puppeteer 字符串化,通过 Chrome DevTools 协议发送到目标页面并在那里进行评估。这意味着该函数无法访问你的脚本中的作用域变量。

或者,你可以提供一个函数体作为字符串

// Evaluate JavaScript
const three = await page.evaluate(`
1 + 2
`);
注意

上面的示例产生了等效的结果,但它还说明了被评估函数可用的类型和全局变量是未知的。尤其是在 TypeScript 中,你应该小心确保被评估函数引用的对象是正确的。

返回类型

您评估的函数可以返回值。如果返回值是原始类型,则它会自动由 Puppeteer 转换为脚本上下文中的原始类型,如前一个示例所示。

如果脚本返回一个对象,则 Puppeteer 会将其序列化为 JSON,并在脚本端重建它。此过程可能并不总是产生正确的结果,例如,当您返回一个 DOM 节点时

const body = await page.evaluate(() => {
return document.body;
});
console.log(body); // {}, unexpected!

为了使用返回的对象,Puppeteer 提供了一种通过引用返回对象的方法

const body = await page.evaluateHandle(() => {
return document.body;
});
console.log(body instanceof ElementHandle); // true

返回的对象要么是 JSHandle,要么是 ElementHandleElementHandle 扩展了 JSHandle,它仅为 DOM 元素创建。

有关句柄可用的方法的更多详细信息,请参阅 API 文档

将参数传递给 evaluate 函数

您可以为您的函数提供参数

const three = await page.evaluate(
(a, b) => {
return 1 + 2;
},
1,
2
);

参数可以是原始值或 JSHandle

注意

Page、JSHandle 和 ElementHandle 提供了几个不同的助手来评估 JavaScript,但它们都遵循本指南中概述的基本原则。