如何在Puppeteer的evaluate方法中使用自定义类？

可以实现，但不能直接将类作为参数传递给page.evaluate——你的示例中NewInstance变成undefined，是因为Puppeteer会将evaluate的参数序列化为JSON，而类的原型链、方法等无法通过JSON序列化完整传递，最终浏览器端接收不到有效的类定义。

下面是几种可行的解决方案，适配不同场景：

方案1：将类转为字符串，在浏览器端重建类 #

利用类的toString()方法获取源码字符串，在evaluate内部通过eval重新定义类：

class MyClass {
  public add(num: number): number {
    return num + 2;
  }
}

const result = await page.evaluate((classSource) => {
  // 在浏览器环境重新创建类
  const MyClass = eval(`(${classSource})`);
  const instance = new MyClass();
  return instance.add(10);
}, MyClass.toString());

方案2：注入类脚本到页面 #

如果类的代码量较大，适合用page.addScriptTag将类注入到页面上下文，之后直接在evaluate中使用：

// 注入类定义到页面
await page.addScriptTag({
  content: `
    class MyClass {
      add(num) {
        return num + 2;
      }
    }
  `
});

// 直接在evaluate中实例化并调用
const result = await page.evaluate(() => {
  const instance = new MyClass();
  return instance.add(10);
});

如果类代码保存在单独文件中，也可以通过url参数注入：

await page.addScriptTag({ url: './path/to/MyClass.js' });

方案3：拆分类逻辑为纯函数 #

如果类的核心是独立的方法，可以直接传递函数而非整个类，适合逻辑简单的场景：

const add = (num: number): number => num + 2;

const result = await page.evaluate((addFn) => {
  return addFn(10);
}, add);

这些方法都能帮你将逻辑从evaluate内部抽离出来，保持代码的可维护性。

内容的提问来源于stack exchange，提问作者Shannon Hochkins