[MetaMask] - Fix issues with MetaMask

.github/workflows/chainwright.yaml

@@ -97,3 +97,14 @@ jobs:
       - name: Skip e2e tests (no relevant file changes)
         if: github.event_name != 'workflow_dispatch' && steps.changed-tests.outputs.test_files == ''
         run: echo "No relevant test files changed - skipping tests"
+
+      - name: Upload Playwright artifacts
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-test-results
+          path: |
+            test-results/
+            tests/test-results/
+          retention-days: 4
+          if-no-files-found: ignore

src/utils/wallets/get-popup-page-from-context.ts

@@ -19,7 +19,7 @@ export async function getPopupPageFromContext({ context, path, locator }: GetPop
                     return !!popupPage;
                 },
                 {
-                    timeout: 30_000,
+                    timeout: 60_000,
                 },
             )
             .toBe(true);

src/wallets/keplr/actions/onboard.keplr.ts

@@ -1,6 +1,5 @@
 import { styleText } from "node:util";
 import { expect, type Page } from "@playwright/test";
-import { sleep } from "@/utils/sleep";
 import { homepageSelectors } from "../selectors/homepage-selectors.keplr";
 import type { OnboardingArgs } from "../types";
 import { addWalletViaPrivateKey, addWalletViaSeedPhrase, goToOnboardingPage } from "../utils";
@@ -115,6 +114,5 @@ export default async function onboard({ page, onboard }: Onboard) {
         }
     }
 
-    await sleep(3_000);
     console.info(styleText("greenBright", "✨ Keplr onboarding completed successfully", { validateStream: false }));
 }

src/wallets/keplr/keplr-fixture.ts

@@ -9,6 +9,7 @@ import persistLocalStorage from "@/utils/persist-local-storage";
 import { teardownContext } from "@/utils/teardown-context";
 import waitForStablePage from "@/utils/wait-for-stable-page";
 import { getWalletExtensionPathFromCache } from "@/utils/wallets/get-wallet-extension-path-from-cache";
+import { getBrowserArgs } from "../utils/get-browser-args";
 import { unlock } from "./actions/unlock.keplr";
 import { Keplr } from "./keplr";
 import { KeplrProfile } from "./keplr-profile";
@@ -36,15 +37,7 @@ export const keplrFixture = ({ slowMo = 0, profileName }: WalletProfileFixtureAr
 
             fs.cpSync(walletDataDir, tempWalletDataDir, { recursive: true, force: true });
 
-            const browserArgs = [`--disable-extensions-except=${extensionPath}`, `--load-extension=${extensionPath}`];
-            if (process.env.HEADLESS) {
-                browserArgs.push("--headless=new");
-
-                if (slowMo > 0) {
-                    console.warn("⚠️ Slow motion makes no sense in headless mode. It will be ignored!");
-                }
-            }
-
+            const browserArgs = getBrowserArgs(extensionPath, slowMo);
             const walletPageContext = await chromium.launchPersistentContext(tempWalletDataDir, {
                 headless: false,
                 args: browserArgs,

src/wallets/metamask/actions/onboard.metamask.ts

@@ -1,11 +1,11 @@
 import { styleText } from "node:util";
 import { expect, type Page } from "@playwright/test";
-import { sleep } from "@/utils/sleep";
 import { getWalletPasswordFromCache } from "@/utils/wallets/get-wallet-password-from-cache";
 import { MetamaskProfile } from "../metamask-profile";
 import { homepageSelectors } from "../selectors/homepage-selectors.metamask";
 import { onboardSelectors } from "../selectors/onboard-selectors.metamask";
 import type { OnboardingArgs } from "../types";
+import { ensureMetaMaskOnboardingCompleted } from "../utils";
 import { switchAccount } from "./switch-account.metamask";
 import { toggleShowTestnetNetwork } from "./toggle-show-testnet-network.metamask";
 
@@ -142,6 +142,6 @@ export default async function onboard({ page, mainAccountName, ...args }: Onboar
         await switchAccount(page, mainAccountName);
     }
 
-    await sleep(5_000);
+    await ensureMetaMaskOnboardingCompleted(page);
     console.info(styleText("greenBright", "✨ MetaMask onboarding completed successfully", { validateStream: false }));
 }

src/wallets/metamask/actions/switch-account.metamask.ts

@@ -40,5 +40,7 @@ export async function switchAccount(page: Page, accountName: string) {
         throw Error(`Account with name "${accountName}" not found.`);
     }
 
-    await currentAccount?.click();
+    await currentAccount.click();
+    const loadingSpinner = page.locator("div[class='spinner loading-overlay__spinner']");
+    await loadingSpinner.waitFor({ state: "detached" });
 }

src/wallets/metamask/metamask-fixture.ts

@@ -9,6 +9,7 @@ import getPageFromContext from "@/utils/get-page-from-context";
 import persistLocalStorage from "@/utils/persist-local-storage";
 import { teardownContext } from "@/utils/teardown-context";
 import { getWalletExtensionPathFromCache } from "@/utils/wallets/get-wallet-extension-path-from-cache";
+import { getBrowserArgs } from "../utils/get-browser-args";
 import unlock from "./actions/unlock.metamask";
 import { Metamask } from "./metamask";
 import { MetamaskProfile } from "./metamask-profile";
@@ -35,18 +36,10 @@ export const metamaskFixture = ({ slowMo = 0, profileName }: WalletProfileFixtur
 
             fs.cpSync(walletDataDir, tempWalletDataDir, { recursive: true, force: true });
 
-            const browserArgs = [`--disable-extensions-except=${extensionPath}`, `--load-extension=${extensionPath}`];
-            if (process.env.HEADLESS) {
-                browserArgs.push("--headless=new");
-
-                if (slowMo > 0) {
-                    console.warn("⚠️ Slow motion makes no sense in headless mode. It will be ignored!");
-                }
-            }
-
+            const browserArgs = getBrowserArgs(extensionPath, slowMo);
             const walletPageContext = await chromium.launchPersistentContext(tempWalletDataDir, {
                 headless: false,
-                args: [`--disable-extensions-except=${extensionPath}`],
+                args: browserArgs,
                 slowMo: process.env.HEADLESS ? 0 : slowMo,
             });
 
@@ -68,7 +61,7 @@ export const metamaskFixture = ({ slowMo = 0, profileName }: WalletProfileFixtur
             }
 
             const loadingSpinner = _metamaskPage.locator("img[class='loading-spinner']");
-            await loadingSpinner.waitFor({ state: "detached" });
+            await loadingSpinner.waitFor({ state: "detached", timeout: 45_000 });
 
             await unlock(_metamaskPage);
             await use(walletPageContext);

src/wallets/metamask/metamask-worker-scope-fixture.ts

@@ -20,7 +20,6 @@ export const metamaskWorkerScopeFixture = ({ profileName, slowMo }: WalletProfil
                     profileName,
                     slowMo,
                 });
-                await context.grantPermissions(["clipboard-read"]);
                 const metamask = new Metamask(walletPageFromContext);
                 await metamask.unlock();
 

src/wallets/metamask/utils.ts

@@ -1,4 +1,4 @@
-import { errors, type Page } from "@playwright/test";
+import { errors, expect, type Page } from "@playwright/test";
 import { sleep } from "@/utils/sleep";
 import waitForStablePage from "@/utils/wait-for-stable-page";
 import { loadingSelectors } from "./selectors/loading-selectors.metamask";
@@ -35,3 +35,53 @@ export const waitForMetaMaskLoad = async (page: Page) => {
 
     return page;
 };
+
+export async function ensureMetaMaskOnboardingCompleted(page: Page) {
+    const extensionUrl = new URL(page.url());
+    const extensionOrigin = `${extensionUrl.protocol}//${extensionUrl.host}`;
+    const context = page.context();
+
+    const serviceWorker =
+        context.serviceWorkers().find((worker) => worker.url().startsWith(extensionOrigin)) ??
+        (await context.waitForEvent("serviceworker", {
+            predicate: (worker) => worker.url().startsWith(extensionOrigin),
+            timeout: 60_000,
+        }));
+
+    await expect
+        .poll(
+            async () => {
+                try {
+                    return await serviceWorker.evaluate(
+                        `(async () => {
+                            const state = await chrome.storage.local.get([
+                                "OnboardingController",
+                                "KeyringController",
+                                "PreferencesController",
+                            ]);
+                            const record = (value) => value && typeof value === "object" ? value : {};
+
+                            const onboarding = record(state.OnboardingController);
+                            const keyring = record(state.KeyringController);
+                            const preferencesController = record(state.PreferencesController);
+                            const preferences = record(preferencesController.preferences);
+
+                            return (
+                                onboarding.completedOnboarding === true &&
+                                typeof keyring.vault === "string" &&
+                                keyring.vault.length > 0 &&
+                                preferences.showTestNetworks === true
+                            );
+                        })()`,
+                    );
+                } catch {
+                    return false;
+                }
+            },
+            {
+                message: "MetaMask onboarding state was not persisted to extension storage",
+                timeout: 60_000,
+            },
+        )
+        .toBe(true);
+}

src/wallets/metamask/worker-scope-context.metamask.ts

@@ -5,6 +5,7 @@ import createTempContextDirectory from "@/utils/create-temp-context-directory";
 import getCacheDirectory from "@/utils/get-cache-directory";
 import waitForStablePage from "@/utils/wait-for-stable-page";
 import { getWalletExtensionPathFromCache } from "@/utils/wallets/get-wallet-extension-path-from-cache";
+import { getBrowserArgs } from "../utils/get-browser-args";
 import { MetamaskProfile } from "./metamask-profile";
 
 type WorkerScopeContext = {
@@ -27,9 +28,10 @@ export async function workerScopeContextMetamask({ workerInfo, profileName, slow
     fs.cpSync(walletDataDir, contextPath, { recursive: true, force: true });
     const walletPath = await getWalletExtensionPathFromCache(wallet.name);
 
+    const browserArgs = getBrowserArgs(walletPath, slowMo ?? 0);
     const context = await chromium.launchPersistentContext(contextPath, {
         headless: false,
-        args: [`--disable-extensions-except=${walletPath}`],
+        args: browserArgs,
         slowMo: process.env.HEADLESS ? 0 : slowMo,
     });
 
@@ -52,5 +54,8 @@ export async function workerScopeContextMetamask({ workerInfo, profileName, slow
         }
     }
 
+    const loadingSpinner = page.locator("img[class='loading-spinner']");
+    await loadingSpinner.waitFor({ state: "detached" });
+
     return { context, walletPage: page, contextPath };
 }

src/wallets/meteor/actions/onboard.meteor.ts

@@ -148,6 +148,5 @@ export default async function onboard({ page, network, accountName, additionalAc
         await switchAccount(page, accountName);
     }
 
-    await sleep(3_000);
     console.info(styleText("greenBright", "✨ Meteor onboarding completed successfully"));
 }

src/wallets/meteor/meteor-fixture.ts

@@ -8,6 +8,7 @@ import getPageFromContext from "@/utils/get-page-from-context";
 import persistLocalStorage from "@/utils/persist-local-storage";
 import { teardownContext } from "@/utils/teardown-context";
 import { getWalletExtensionPathFromCache } from "@/utils/wallets/get-wallet-extension-path-from-cache";
+import { getBrowserArgs } from "../utils/get-browser-args";
 import { unlock } from "./actions/unlock.meteor";
 import { Meteor } from "./meteor";
 import { MeteorProfile } from "./meteor-profile";
@@ -34,15 +35,11 @@ export const meteorFixture = ({ slowMo = 0, profileName }: WalletProfileFixtureA
 
             fs.cpSync(walletDataDir, tempWalletDataDir, { recursive: true, force: true });
 
-            if (process.env.HEADLESS) {
-                if (slowMo > 0) {
-                    console.warn("⚠️ Slow motion makes no sense in headless mode. It will be ignored!");
-                }
-            }
+            const browserArgs = getBrowserArgs(extensionPath, slowMo);
 
             const walletPageContext = await chromium.launchPersistentContext(tempWalletDataDir, {
                 headless: false,
-                args: [`--disable-extensions-except=${extensionPath}`, `--load-extension=${extensionPath}`],
+                args: browserArgs,
                 slowMo: process.env.HEADLESS ? 0 : slowMo,
             });
 

src/wallets/petra/actions/onboard.petra.ts

@@ -1,6 +1,5 @@
 import { styleText } from "node:util";
 import { expect, type Page } from "@playwright/test";
-import { sleep } from "@/utils/sleep";
 import waitForStablePage from "@/utils/wait-for-stable-page";
 import { getWalletPasswordFromCache } from "@/utils/wallets/get-wallet-password-from-cache";
 import { PetraProfile } from "../petra-profile";
@@ -121,6 +120,5 @@ export default async function onboard({ page, network, ...args }: Onboard) {
 
     await switchNetwork(page, network);
 
-    await sleep(1_500);
     console.info(styleText("greenBright", "✨ Petra onboarding completed successfully", { validateStream: false }));
 }

src/wallets/petra/petra-fixture.ts

@@ -8,6 +8,7 @@ import getPageFromContext from "@/utils/get-page-from-context";
 import persistLocalStorage from "@/utils/persist-local-storage";
 import { teardownContext } from "@/utils/teardown-context";
 import { getWalletExtensionPathFromCache } from "@/utils/wallets/get-wallet-extension-path-from-cache";
+import { getBrowserArgs } from "../utils/get-browser-args";
 import unlock from "./actions/unlock.petra";
 import { Petra } from "./petra";
 import { PetraProfile } from "./petra-profile";
@@ -34,18 +35,10 @@ export const petraFixture = ({ slowMo = 0, profileName }: WalletProfileFixtureAr
 
             fs.cpSync(walletDataDir, tempWalletDataDir, { recursive: true, force: true });
 
-            const browserArgs = [`--disable-extensions-except=${extensionPath}`, `--load-extension=${extensionPath}`];
-            if (process.env.HEADLESS) {
-                browserArgs.push("--headless=new");
-
-                if (slowMo > 0) {
-                    console.warn("⚠️ Slow motion makes no sense in headless mode. It will be ignored!");
-                }
-            }
-
+            const browserArgs = getBrowserArgs(extensionPath, slowMo);
             const walletPageContext = await chromium.launchPersistentContext(tempWalletDataDir, {
                 headless: false,
-                args: [`--disable-extensions-except=${extensionPath}`],
+                args: browserArgs,
                 slowMo: process.env.HEADLESS ? 0 : slowMo,
             });
 

src/wallets/phantom/actions/onboard.phantom.ts

@@ -216,6 +216,5 @@ export default async function onboard({ page, additionalAccounts, ...args }: Onb
         await switchNetwork({ page: newPage, ...args.toggleNetworkMode });
     }
 
-    await sleep(3_000);
     console.info(styleText("greenBright", "✨ Phantom onboarding completed successfully", { validateStream: false }));
 }

src/wallets/phantom/phantom-fixture.ts

@@ -8,6 +8,7 @@ import getPageFromContext from "@/utils/get-page-from-context";
 import persistLocalStorage from "@/utils/persist-local-storage";
 import { teardownContext } from "@/utils/teardown-context";
 import { getWalletExtensionPathFromCache } from "@/utils/wallets/get-wallet-extension-path-from-cache";
+import { getBrowserArgs } from "../utils/get-browser-args";
 import { unlock } from "./actions/unlock.phantom";
 import { Phantom } from "./phantom";
 import { PhantomProfile } from "./phantom-profile";
@@ -36,15 +37,10 @@ export const phantomFixture = ({ slowMo = 0, profileName }: WalletProfileFixture
 
             fs.cpSync(walletDataDir, tempWalletDataDir, { recursive: true, force: true });
 
-            if (process.env.HEADLESS) {
-                if (slowMo > 0) {
-                    console.warn("⚠️ Slow motion makes no sense in headless mode. It will be ignored!");
-                }
-            }
-
+            const browserArgs = getBrowserArgs(extensionPath, slowMo);
             const walletPageContext = await chromium.launchPersistentContext(tempWalletDataDir, {
                 headless: false,
-                args: [`--disable-extensions-except=${extensionPath}`, `--load-extension=${extensionPath}`],
+                args: browserArgs,
                 slowMo: process.env.HEADLESS ? 0 : slowMo,
             });
 

src/wallets/phantom/worker-scope-context.phantom.ts

@@ -5,6 +5,7 @@ import createTempContextDirectory from "@/utils/create-temp-context-directory";
 import getCacheDirectory from "@/utils/get-cache-directory";
 import getPageFromContext from "@/utils/get-page-from-context";
 import { getWalletExtensionPathFromCache } from "@/utils/wallets/get-wallet-extension-path-from-cache";
+import { getBrowserArgs } from "../utils/get-browser-args";
 import { PhantomProfile } from "./phantom-profile";
 
 type WorkerScopeContext = {
@@ -27,9 +28,10 @@ export async function workerScopeContextPhantom({ workerInfo, profileName, slowM
     fs.cpSync(walletDataDir, contextPath, { recursive: true, force: true });
     const walletPath = await getWalletExtensionPathFromCache(wallet.name);
 
+    const browserArgs = getBrowserArgs(walletPath, slowMo ?? 0);
     const context = await chromium.launchPersistentContext(contextPath, {
         headless: false,
-        args: [`--disable-extensions-except=${walletPath}`],
+        args: browserArgs,
         slowMo: process.env.HEADLESS ? 0 : slowMo,
     });
 

src/wallets/solflare/solflare-fixture.ts

@@ -8,6 +8,7 @@ import getPageFromContext from "@/utils/get-page-from-context";
 import persistLocalStorage from "@/utils/persist-local-storage";
 import { teardownContext } from "@/utils/teardown-context";
 import { getWalletExtensionPathFromCache } from "@/utils/wallets/get-wallet-extension-path-from-cache";
+import { getBrowserArgs } from "../utils/get-browser-args";
 import { unlock } from "./actions/unlock.solflare";
 import { Solflare } from "./solflare";
 import { SolflareProfile } from "./solflare-profile";
@@ -35,18 +36,10 @@ export const solflareFixture = ({ slowMo = 0, profileName }: WalletProfileFixtur
 
             await fs.promises.cp(walletDataDir, tempWalletDataDir, { recursive: true, force: true });
 
-            const browserArgs = [`--disable-extensions-except=${extensionPath}`, `--load-extension=${extensionPath}`];
-            if (process.env.HEADLESS) {
-                browserArgs.push("--headless=new");
-
-                if (slowMo > 0) {
-                    console.warn("⚠️ Slow motion makes no sense in headless mode. It will be ignored!");
-                }
-            }
-
+            const browserArgs = getBrowserArgs(extensionPath, slowMo);
             const walletPageContext = await chromium.launchPersistentContext(tempWalletDataDir, {
                 headless: false,
-                args: [`--disable-extensions-except=${extensionPath}`],
+                args: browserArgs,
                 slowMo: process.env.HEADLESS ? 0 : slowMo,
             });