[BUG] evaluate serializing fails at 1.38

[Tallyb]

[This is a closable issue, as I could not provide a failing repro. Nevertheless, I know the PW team is really good at solving my issues even when they are somewhat vague]

System info

• Playwright Version: [v1.38]
• Operating System: [All, Windows 11, Ubuntu 20, macOS 13.2, etc.]
• Browser: [Chromium]
• Other info:

Source code

We are using component.evaluate on an angular storybook to test UI components.
We use a fixture that does

  getComponent: async ({}, use) => {
    async function getComponentHelper(component: Locator): Promise<any> {
      await component.waitFor({ state: 'attached' });
      const ngCmp = await component.evaluate((c) => {
        const comp = window['ng'].getComponent(c);
        return comp;
      });
      return ngCmp;
    }
    await use(getComponentHelper);
  },

ng.getComponent is an angular browser method that returns the angular object from a DOM element.

In version 1.37 we could easily do that on any component.
Starting 1.38 the component is returned to the node context as undefined.
I managed to try and pin it down on the browser for our private repo.

Selecting an angular element in the elements console:

console.log (window.ng.getComponent($0)) -> works

Json.stringify(window.ng.getComponent($0)) -> VM3387:1 Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Window'
--- property 'window' closes the circle
at JSON.stringify ()
at :1:6

I could not reproduce a failing object on a repro, however it seems like PW (or upstream browser?) is less forgiving when trying to serializing objects on evaluate.

• I provided exact source code that allows reproducing the issue locally.

Link to the GitHub repository with the repro

https://github.com/Tallyb/angular-realworld-example-app
npx ng run ang2-conduit:storybook
run test in: src/app/article/article-component.component.test.ts

Steps

• [Run the test]
• [...]

Expected

[Describe expected behavior]

Actual

[Describe actual behavior]

[aslushnikov]

@Tallyb hey Tally! Thanks for filing, let us see what could've caused this.

Meanwhile, I tried reproing using the https://github.com/Tallyb/angular-realworld-example-app you link to, and I fail to run a test.

• the ng build fails with the following:

  Node packages may not be installed. Try installing with 'npm install'.
  Error: Could not find the '@angular-devkit/build-angular:browser' builder's node package.
  

• the npm install fails with the following:

Any chance you can help our with the repro?

[Tallyb]

Try the yarn. I believe the yarn.lock is up to date.

[aslushnikov]

@Tallyb i see. I ran all the tests with yarn playwright test, but they all passed. Is something supposed to fail?

[aslushnikov]

Oh actually, we managed to reproduce this. Thank you so much for bringing this up!

For the record, our repro:

test('should work', async ({ page }) => {
  const result = await page.evaluate(() => {
    const map = new Map();
    map.set('foo', map);
    return map;
  });
  expect(result).not.toBe(undefined);
});