feat: Cypress cache

wallets/metamask/cypress.config.ts

@@ -14,6 +14,10 @@ export default defineConfig({
     }
   },
 
+  env: {
+    IGNORE_CHROME_PREFERENCES: true
+  },
+
   defaultCommandTimeout: 12_000,
   taskTimeout: 15_000
 })

wallets/metamask/package.json

@@ -33,7 +33,7 @@
     "clean": "rimraf dist types",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "test:cypress:headful": "cypress run --browser chrome --headed",
+    "test:cypress:headful": "export IGNORE_CHROME_PREFERENCES=true && cypress run --browser chrome --headed",
     "test:cypress:headful:no-wallet": "cypress run --browser chrome --headed --config-file ./cypress-no-wallet.config.ts",
     "test:playwright:headful": "playwright test",
     "test:playwright:headless": "HEADLESS=true playwright test",

wallets/metamask/src/cypress/configureSynpress.ts

@@ -7,6 +7,11 @@ import type { Network } from '../type/Network'
 import MetaMask from './MetaMask'
 import importMetaMaskWallet from './support/importMetaMaskWallet'
 import { initMetaMask } from './support/initMetaMask'
+import { prepareExtension } from '../prepareExtension';
+import { CACHE_DIR_NAME, createTempContextDir } from '@synthetixio/synpress-cache';
+import path from 'node:path';
+import basicSetup from '../../test/playwright/wallet-setup/basic.setup';
+import fs from 'fs-extra';
 
 let metamask: MetaMask
 
@@ -67,11 +72,35 @@ export default function configureSynpress(
     const args = Array.isArray(launchOptions) ? launchOptions : launchOptions.args
     rdpPort = ensureRdpPort(args)
 
+
+    console.log(process.env.IGNORE_CHROME_PREFERENCES)
+
     if (browser.family === 'chromium') {
-      const { extensions, browserArgs } = await initMetaMask()
+      const metamaskPath = await prepareExtension()
+
+      // We don't need the `--load-extension` arg since the extension is already loaded in the cache.
+      const browserArgs = [`--disable-extensions-except=${metamaskPath}`]
+
+      const contextPath = await createTempContextDir("test", "10")
+
+      const cacheDirPath = path.join(process.cwd(), CACHE_DIR_NAME, basicSetup.hash)
+      if (!(await fs.exists(cacheDirPath))) {
+        throw new Error(`Cache for ${basicSetup.hash} does not exist. Create it first!`)
+      }
 
-      launchOptions.extensions.push(...extensions)
+      // Copying the cache to the temporary context directory.
+      await fs.copy(cacheDirPath, contextPath)
+
+      browserArgs.push(`--user-data-dir=${contextPath}`)
+
+
+      // launchOptions.extensions.push(...extensions)
       args.push(...browserArgs)
+
+
+      console.log({
+        args
+      })
     }
 
     return launchOptions

wallets/metamask/src/cypress/support/importMetaMaskWallet.ts

@@ -21,16 +21,30 @@ export default async function importMetaMaskWallet(port: number, importDefaultWa
   let extensionPage: Page | undefined
   let cypressPage: Page | undefined
 
+  // const newContext = await chromium.launchPersistentContext(cacheDirPath, {
+  //   headless: false,
+  //   args: browserArgs
+  // })
+
+  // const context = browser.contexts()[0] as BrowserContext
+  //
+  // // await context.waitForEvent('response')
+  //
+  // let metamaskExtensionId: string | undefined
+  // let extensionPage: Page | undefined
+  // let cypressPage: Page | undefined
+  //
   const extensionPageIndex = context.pages().findIndex((page) => page.url().includes('chrome-extension://'))
   if (extensionPageIndex !== -1) {
     extensionPage = context.pages()[extensionPageIndex] as Page
     metamaskExtensionId = await getExtensionId(context, 'MetaMask')
 
-    const metamask = getPlaywrightMetamask(context, extensionPage, metamaskExtensionId)
-
-    if (importDefaultWallet) await metamask.importWallet(SEED_PHRASE)
+    // const metamask = getPlaywrightMetamask(context, extensionPage, metamaskExtensionId)
+    //
+    // if (importDefaultWallet) await metamask.importWallet(SEED_PHRASE)
 
     cypressPage = context.pages()[extensionPageIndex === 1 ? 0 : 1] as Page
+
     await cypressPage.bringToFront()
   }
 

wallets/metamask/src/cypress/support/synpressCommands.ts

@@ -17,6 +17,9 @@ import type { Network } from '../../type/Network'
 declare global {
   namespace Cypress {
     interface Chainable {
+      setLocalStorage(key: string, value: string): Chainable<void>
+
+
       importWallet(seedPhrase: string): Chainable<void>
       importWalletFromPrivateKey(privateKey: string): Chainable<void>
 
@@ -101,6 +104,15 @@ declare global {
  * Initializes Synpress commands for MetaMask
  */
 export default function synpressCommandsForMetaMask(): void {
+  // Cache
+
+  Cypress.Commands.add('setLocalStorage', (key, value) => {
+    cy.window().then((win) => {
+      win.localStorage.setItem(key, value);
+    });
+  });
+
+
   // Wallet
 
   /**

wallets/metamask/test/cypress/addNetwork.cy.ts

@@ -1,4 +1,7 @@
 it('should add network and close network added popup', () => {
+
+  cy.wait(10000000)
+
   cy.createAnvilNode().then(({ rpcUrl, chainId }) => {
     const network = {
       name: 'Anvil',