[🐛 Bug]: Synpress 3.7.3 throws a TypeError 'Cannot read properties of undefined' while installing Metamask extension

[r-komarov]

🔎 Have you searched existing issues to avoid duplicates?

• I have made sure that my issue is not a duplicate.

🧪 Have you tested your code using latest version of Synpress?

• I have made sure that my issue still exists on latest version of Synpress.

💡 Are you able to provide enough information to be able to reproduce your issue locally?

• I can provide enough details to reproduce my issue on local environment.

Synpress version

3.7.3

Node.js version

20.10.0

Operating system

Windows 11

Run mode

Synpress (standalone)

CI platform (if applicable)

No response

Are you running your tests inside docker? (if applicable)

• This issue could be related to docker.

What happened?

I have a Playwright+Sypress TypeScript test that installs Metamask into Chrome and logs in to a website.
Used metamask fixtures from Sypress examples https://github.com/synpress-io/synpress-examples/tree/master/playwright , almost exactly copypasted the example fixture into my test adding just the seed phrase and password.

Playwright opens Chromium, goes to extensions blinks for a second, then immediately crashes with an exception:

TypeError: Cannot read properties of undefined (reading 'waitForTimeout')

at ..\fixtures.ts:46

44 |
45 | // setup metamask

46 | await initialSetup(chromium, {
| ^
47 | secretWordsOrPrivateKey:
48 | "test test test test test test test test test test test junk",
49 | network: "optimism",

at Object.fixBlankPage (C:\Users\rkoma\Documents\Work\Lisa\Src\synpress\synpress_373-examples\playwright\isolated-state\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_@[email protected]__b_kejanbpmtdrkmqkoz7n3cj7t74\node_modules\@synthetixio\synpress\commands\playwright.js:399:16)
at initialSetup (C:\Users\rkoma\Documents\Work\Lisa\Src\synpress\synpress_373-examples\playwright\isolated-state\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_@[email protected]__b_kejanbpmtdrkmqkoz7n3cj7t74\node_modules\@synthetixio\synpress\commands\metamask.js:1526:22)

If debugged through Visual Studio code -> Debug test it goes through the process and installs the extension, apparently fixBlankPage crashes or needs more time.

Everything was working fine about 3 weeks, then after a break ran the test on 12-Aug. Happens on Synpress 3.7.3 and 3.7.2-beta3.

What is your expected behavior?

Metamask extension installed

How to reproduce the bug.

1. Download examples from https://github.com/synpress-io/synpress-examples/tree/master
2. Add a new test into tests folder:

import { test, expect } from "../fixtures";
import * as metamask from "@synthetixio/synpress/commands/metamask";

const LisaUrl = process.env.PLAYWRIGHT_TEST_BASE_URL || 'https://dev.lisafoundation.com/';
const LisaMainPageTitle = 'Explore - LISA Foundation';
const extendedTimeout = 30000; // 30 sec - longer timeout for slow operations
const metamaskWallet = '';
const metamaskUserName = 'User name';

test('Metamask login', async ({ page }) => {
await page.goto(LisaUrl);
await page.getByRole('button', { name: 'Sign in' }).click();
await page.locator('div:nth-child(3) > button').first().click();
await metamask.acceptAccess();
await expect(page.getByText(metamaskUserName)).toBeVisible({ timeout: extendedTimeout });
});

3. Run the test in chromium (add a shortcut command into package.json if wanted)
   npx playwright test --project=chromium -g "Metamask login"

Relevant log output

C:\Src\synpress\synpress_373-examples\playwright\isolated-state>pnpm metamasktest

> @synpress-io/synpress-playwright-isolated-state-example@1.0.0 metamasktest C:\Src\synpress\synpress_373-examples\playwright\isolated-state
> playwright test --project=chromium -g "Metamask login"


Running 1 test using 1 worker
  1) [chromium] › Lisa-metamask-login.spec.ts:14:5 › Metamask login ────────────────────────────────

    TypeError: Cannot read properties of undefined (reading 'waitForTimeout')

       at ..\fixtures.ts:46

      44 |
      45 |     // setup metamask
    > 46 |     await initialSetup(chromium, {
         |     ^
      47 |       secretWordsOrPrivateKey:
      48 |         "test test test test test test test test test test test junk",
      49 |       network: "optimism",

        at Object.fixBlankPage (C:\Src\synpress\synpress_373-examples\playwright\isolated-state\node_modules\.pnpm\@synthetixio+synpress@3.7.3_@babel+core@7.22.9_@babel+preset-env@7.22.9_@babel+core@7.22.9__b_kejanbpmtdrkmqkoz7n3cj7t74\node_modules\@synthetixio\synpress\commands\playwright.js:399:16)
        at initialSetup (C:\Src\synpress\synpress_373-examples\playwright\isolated-state\node_modules\.pnpm\@synthetixio+synpress@3.7.3_@babel+core@7.22.9_@babel+preset-env@7.22.9_@babel+core@7.22.9__b_kejanbpmtdrkmqkoz7n3cj7t74\node_modules\@synthetixio\synpress\commands\metamask.js:1526:22)
        at Object.context (C:\Src\synpress\synpress_373-examples\playwright\isolated-state\fixtures.ts:46:5)

  1 failed
    [chromium] › Lisa-metamask-login.spec.ts:14:5 › Metamask login ─────────────────────────────────

[meanMonk]

I am also facing the same issues, after upgrading the synpress to latest version

"@playwright/test": "^1.37.0",
    "@synthetixio/synpress": "3.7.3",

Almost spent day on debugging this but seems to be issue in 3.7.3 package itself so after rolling back to release 3.7.2-beta.10

Looks like this PR has some changes which is breaking the initial setup flow : https://github.com/Synthetixio/synpress/pull/1138/files

[r-komarov]

I initially used Synpress 3.7.2-beta3, it was working fine until August 2024 when it started getting this error. Upgrade to 3.7.3 did not help, and 3.7,2-beta 3 also has the same issue.
I suspect it may be something with Metamask extension or Chrome itself, but the error does not suggest it..

[thinguyen-gft]

@r-komarov let try with fixed playwright version (remove ^)
"@playwright/test": "1.37.0",