评估 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
,要么是 ElementHandle
。ElementHandle
扩展了 JSHandle
,它仅为 DOM 元素创建。
有关句柄可用的方法的更多详细信息,请参阅 API 文档。
将参数传递给 evaluate 函数
您可以为您的函数提供参数
const three = await page.evaluate(
(a, b) => {
return 1 + 2;
},
1,
2
);
参数可以是原始值或 JSHandle
。
注意
Page、JSHandle 和 ElementHandle 提供了几个不同的助手来评估 JavaScript,但它们都遵循本指南中概述的基本原则。