不灭的焱

前言

大家在学Selenium的时候，对于页面上的有些元素不好操作的时候，可以使用driver.execute_script()方法执行JavaScript脚本。

在Puppeteer中也有类似的方法，使用page.evaluate()执行JavaScript脚本。

page.evaluate()和page.evaluateHandle()之间的唯一区别是page.evaluateHandle()返回JSHandle。

• page.evaluate()：返回调用执行的结果
• page.evaluateHandle()：返回JSHandle

page.evaluate()

此方法返回evaluate() 返回执行JavaScript脚本的结果，使用示例

简单示例：

let res = await page.evaluate("1+2");
console.log(res); // 输出：3

也可以是执行一个函数：

let res = await page.evaluate(() => 'Hello World!');
console.log(res); // 输出：Hello World!

函数也可以带上参数：

let res = await page.evaluate(([a, b]) => a + b + ' World!', ['Hello ', 'xxx']);
console.log(res); // 输出：Hello xxx World!

如果传递给page.evaluate()的函数返回一个不可序列化的值，则page.evaluate()解析为undefined

【注意】传进去的参数 args 是个数组

let companyName = await ChromeHelper.evalJS(function(args) {
    //【注意】传进来的参数 args 是个数组
    return args;
}, 'albert');
console.log("【公司名】", companyName);

输出：

【公司名】 [ 'albert' ]

操作 web 网页示例

执行document.title获取页面的title

await page.goto("https://www.baidu.com/");
let title = await page.evaluate('document.title')
console.log(title); // 输出：百度一下，你就知道

登录网站示例

await page.goto("http://127.0.0.1/login.html");
await page.evaluate(function() {
    document.getElementById('username').value = 'albert';
    document.getElementById('password').value = '******';
    document.getElementById('loginBtn').click();
})

page.evaluate()方法一般用于页面上操作元素，无法正常操作的情况，可以用执行JavaScript脚本协助解决。

page.evaluate_handle()返回JSHandle

page.evaluate()和page.evaluateHandle()之间的唯一区别是page.evaluateHandle()返回页内类型(JSHandle)

如果传给此方法的方法（参数）返回的是Promise对象，将等待promise完成并返回其返回值

也可以传一个字符串替代方法：

const aHandle = await page.evaluateHandle('document'); // 'document'对象

JSHandle 实例可以作为 page.evaluateHandle的参数：

const aHandle = await page.evaluateHandle(() => document.body);
const resultHandle = await page.evaluateHandle(body => body.innerHTML, aHandle);
console.log(await resultHandle.jsonValue());
await resultHandle.dispose();