如何读取CDPJSHandle对象的值？Puppeteer自定义属性获取问题

问题分析 #

你遇到的CDPJSHandle {}是Puppeteer对浏览器端对象的代理引用，并非实际属性值；而evaluate返回undefined大概率是因为属性键的传递时机或上下文匹配问题。

正确解决方案 #

方案1：直接在浏览器上下文获取并处理属性 #

这种方式最可靠，回调函数直接运行在浏览器环境，能直接访问元素的所有属性：

import * as puppeteer from "puppeteer";

const main = async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://google.com');

  const jqueryPropData = await page.evaluate(() => {
    const canvasEl = document.querySelector('canvas');
    // 筛选出jQuery前缀的属性键
    const jqueryKeys = Object.keys(canvasEl).filter(k => k.startsWith('jQuery'));
    
    if (jqueryKeys.length === 0) return null;
    
    // 若需获取对象的具体内容，可在这里提取或序列化
    // 如果要操作对象方法，直接在这个回调里执行即可
    return JSON.stringify(canvasEl[jqueryKeys[0]]);
  });

  console.log('jQuery属性序列化结果:', jqueryPropData);

  await browser.close();
};

main();

方案2：结合ElementHandle与evaluate传递属性键 #

如果需要基于已获取的ElementHandle操作，确保属性键正确传递到浏览器上下文：

import * as puppeteer from "puppeteer";

const main = async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://google.com');

  const element = await page.$('canvas');
  const properties = await element.getProperties();
  const [firstKey] = properties.keys();

  // 在evaluate回调中直接访问元素的目标属性
  const propValue = await element.evaluate((el, key) => {
    // 可在此处直接操作对象（如调用方法）
    return JSON.stringify(el[key]);
  }, firstKey);

  console.log('获取到的属性值:', propValue);

  await browser.close();
};

main();

方案3：使用JSHandle的jsonValue()方法 #

对于getProperty返回的代理对象，调用jsonValue()可转换为Node.js可访问的值（注意复杂对象会被序列化）：

const propertyValue = await element.getProperty(firstKey);
const actualValue = await propertyValue.jsonValue();
console.log('代理对象转换后的值:', actualValue);

关键说明 #

• Puppeteer中，浏览器端对象与Node.js上下文是隔离的，JSHandle只是代理，必须通过jsonValue()或evaluate才能获取实际值。
• 若需操作自定义属性对象的方法（如jQuery对象的方法），必须在evaluate的回调函数内执行，因为该回调运行在浏览器环境中。

内容的提问来源于stack exchange，提问作者Eoin Traynor