TypeScript + Playwright/Puppeteer Test Tab communication

I tried to test my demo broadcastChannel module with playwright. But I cannot pass Class to evaluate or inject class instance to Window. Below is the minimal reproducible example.

utils.ts

export class Utils {
  public static formatTime() { return new Date().toLocaleString(); }
  public static generateRandomStr() { /* generate random str logic*/ }
}

index.ts

import { Utils } from "./utils";

export class Channel<T extends string> {
  private uniqueID = Utils.generateRandomStr();
  private channel: BroadcastChannel;

  constructor(name: T) {
    this.channel = new BroadcastChannel(name);
    this.onMessage();
  }

  private onMessage() {
    this.channel.addEventListener("message", e => {
      console.log(e.data);
    });
  }

  public sendMsg(msg: any) {
    this.channel.postMessage({
      id: this.uniqueID,
      time: Utils.formatTime(),
      msg,
    });
  }

  public sendHelloWorld() {
    this.sendMsg("Hello World");
  }

  public sendByeWorld() {
    this.sendMsg("Bye World");
  }
}

According to @Sheldon Oliveira's answer and this stackoverflow answer, I got that there's no easy way to pass Class or class instance to evaluate. Maybe I went for the wrong way to test tab communication, I hope there's a better solution.

Below are the two different approches I tried.

import { test, expect, Page } from '@playwright/test';
import { Channel } from '../src/index';

let page1: Page, page2: Page;
test.beforeEach(async ({ context }) => {
  [page1, page2] = await Promise.all([context.newPage(), context.newPage()]);
  await Promise.all([page1.goto("https://www.google.com"), page2.goto("https://www.google.com")]);
});

test.afterEach(async ({ context }) => {
  await Promise.all([page1.close(), page2.close()]);
  await context.close();
});

test('sendHelloWorld', async () => {
  await Promise.all([
    await page1.evaluate((strClass) => {
      eval("window.Channel = " + strClass);
      window.channel = new window.Channel();
      //                     ^ReferenceError: _Utils is not defined
    }, Channel.toString()),
    await page2.evaluate((strClass) => {
      eval("window.Channel = " + strClass);
      window.channel = new window.Channel();
      //                     ^ReferenceError: _Utils is not defined
    }, Channel.toString()),
  ]);

  const msgPromise = page2.waitForEvent("console");
  await page1.evaluate(() => {
    window.channel.sendHelloWorld();
  });
  const msg = await msgPromise;
  expect((await msg.args()[0].jsonValue()).msg).toBe("Hello World");
});

test('sendByeWorld', async () => {
  await Promise.all([
    await page1.evaluate((channel) => {
      window.channel = channel;
      //             ^ no prototype method sendByeWorld
    }, new Channel()),
    await page2.evaluate((channel) => {
      window.channel = channel;
      //             ^ no prototype method sendByeWorld
    }, new Channel()),
  ]);

  const msgPromise = page2.waitForEvent("console");
  await page1.evaluate(() => {
    window.channel.sendHelloWorld();
  });
  const msg = await msgPromise;
  expect((await msg.args()[0].jsonValue()).msg).toBe("Bye World");
});

The expect console trick is from playwright documentation.

I also added puppeteer tag, cause I think the problem is the same regardless of the framework.

TLDR; you can not use a class as a parameter for evaluate.

docs:
This argument can be a mix of Serializable values and JSHandle or ElementHandle instances.

A class is not a serializable value.