Is there a way to use a class inside Puppeteer evaluate?

Consider this really simple example:

class MyClass {
  public add(num: number): number {
    return num + 2;
  }
}
const result = await page.evaluate((NewInstance) => {
  console.log("typeof instance", typeof NewInstance); // undefined
  const d = new NewInstance();
  console.log("result", d.add(10));
  return d.add(10);
}, MyClass);

I've tried everything I could think of. The main reason I want to use a class here, is because there's a LOT of code I don't want to just include inside the evaluate method directly. It's messy and hard to keep track of it, so I wanted to move all logic to a class so it's easier to understand what's going on.

Is this possible?

It's possible, but not necessarily great design, depending on what you're trying to do. It's hard to suggest the best solution without knowing the actual use case, so I'll just provide options and let you make the decision.

One approach is to stringify the class (either by hand or with .toString()) or put it in a separate file, then addScriptTag:

const puppeteer = require("puppeteer"); // ^19.6.3

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

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.goto(
    "https://www.example.com",
    {waitUntil: "domcontentloaded"}
  );
  await page.addScriptTag({content: MyClass.toString()});
  const result = await page.evaluate(() => new MyClass().add(10));
  console.log(result); // => 12
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

See this answer for more examples.

Something like eval is also feasible. If it looks scary, consider that anything you put into a page.evaluate() or page.addScriptTag() is effectively the same thing as far as security goes.

const result = await page.evaluate(MyClassStringified => {
  const MyClass = eval(`(${MyClassStringified})`);
  return new MyClass().add(10);
}, MyClass.toString());

Many other patterns are also possible, like exposing your library via exposeFunction if the logic is Node-based rather than browser-based.

That said, defining the class inside an evaluate may not be as bad as you think:

const addTonsOfCode = () => {

MyClass = class {
  add(num) {
    return num + 2;
  }
}

// ... tons of code ...
};

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.goto(
    "https://www.example.com",
    {waitUntil: "domcontentloaded"}
  );
  await page.evaluate(addTonsOfCode);
  const result = await page.evaluate(() => new MyClass().add(10));
  console.log(result); // => 12
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

I'd prefer to namespace this all into a library:

const addTonsOfCode = () => {

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

// ... tons of code ...

window.MyLib = {
  MyClass,
  // ...
};

};

Then use with:

await page.evaluate(addTonsOfCode);
await page.evaluate(() => new MyLib.MyClass().add(10));