✨ feat: MetaMask setup in Cypress

.gitignore

@@ -37,6 +37,9 @@ test-results
 playwright-report
 playwright/.cache
 
+### Cypress
+wallets/metamask/downloads
+
 ### Synpress
 
 .cache-synpress

biome.json

@@ -12,7 +12,8 @@
       "**/test-results",
       "**/playwright-report",
       "**/.cache-synpress",
-      "**/.vitepress/cache"
+      "**/.vitepress/cache",
+      "**/downloads"
     ]
   },
   "formatter": {

examples/new-dawn/package.json

@@ -21,7 +21,7 @@
   "devDependencies": {
     "@metamask/test-dapp": "8.1.0",
     "@types/node": "20.11.17",
-    "cypress": "13.9.0",
+    "cypress": "13.13.0",
     "serve": "14.2.1",
     "typescript": "5.3.3"
   }

examples/new-dawn/tsconfig.json

@@ -7,7 +7,8 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "types": ["cypress"]
   },
   "include": ["test"],
   "files": ["environment.d.ts"]

release/src/cypress/index.ts

@@ -1 +1,2 @@
 export * from '@synthetixio/ethereum-wallet-mock/cypress'
+export * from '@synthetixio/synpress-metamask/cypress'

release/src/playwright/index.ts

@@ -1,2 +1,2 @@
 export * from '@synthetixio/ethereum-wallet-mock/playwright'
-export { MetaMask, getExtensionId, metaMaskFixtures } from '@synthetixio/synpress-metamask'
+export * from '@synthetixio/synpress-metamask/playwright'

wallets/metamask/cypress.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'cypress'
+import installSynpress from './src/cypress/installSynpress'
+
+export default defineConfig({
+  chromeWebSecurity: false,
+  e2e: {
+    baseUrl: 'http://localhost:9999',
+    specPattern: 'test/cypress/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'src/cypress/support/e2e.{js,jsx,ts,tsx}',
+    testIsolation: false,
+    async setupNodeEvents(on, config) {
+      return installSynpress(on, config)
+    }
+  }
+})

wallets/metamask/package.json

@@ -3,8 +3,14 @@
   "version": "0.0.1-alpha.7",
   "type": "module",
   "exports": {
-    "types": "./types/index.d.ts",
-    "default": "./dist/index.js"
+    "./cypress": {
+      "types": "./types/cypress/index.d.ts",
+      "default": "./dist/cypress/index.js"
+    },
+    "./playwright": {
+      "types": "./types/playwright/index.d.ts",
+      "default": "./dist/playwright/index.js"
+    }
   },
   "main": "./dist/index.js",
   "types": "./types/index.d.ts",
@@ -15,15 +21,16 @@
   ],
   "scripts": {
     "build": "pnpm run clean && pnpm run build:dist && pnpm run build:types",
-    "build:cache": "synpress-cache test/wallet-setup",
-    "build:cache:headless": "synpress-cache test/wallet-setup --headless",
-    "build:cache:headless:force": "synpress-cache test/wallet-setup --headless --force",
+    "build:cache": "synpress-cache test/playwright/wallet-setup",
+    "build:cache:headless": "synpress-cache test/playwright/wallet-setup --headless",
+    "build:cache:headless:force": "synpress-cache test/playwright/wallet-setup --headless --force",
     "build:dist": "tsup --tsconfig tsconfig.build.json",
     "build:types": "tsc --emitDeclarationOnly --project tsconfig.build.json",
     "clean": "rimraf dist types",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:e2e:headful": "playwright test",
+    "test:e2e:headful:cypress": "cypress run --browser chrome --headed",
     "test:e2e:headless": "HEADLESS=true playwright test",
     "test:e2e:headless:ui": "HEADLESS=true playwright test --ui",
     "test:watch": "vitest watch",
@@ -41,6 +48,7 @@
     "@types/fs-extra": "11.0.4",
     "@types/node": "20.11.17",
     "@vitest/coverage-v8": "1.2.2",
+    "cypress": "13.13.0",
     "rimraf": "5.0.5",
     "tsup": "8.0.2",
     "typescript": "5.3.3",

wallets/metamask/playwright.config.ts

@@ -5,7 +5,7 @@ import { defineConfig, devices } from '@playwright/test'
  */
 export default defineConfig({
   // Look for test files in the "test/e2e" directory, relative to this configuration file.
-  testDir: './test/e2e',
+  testDir: './test/playwright/e2e',
 
   // We're increasing the timeout to 60 seconds to allow all traces to be recorded.
   // Sometimes it threw an error saying that traces were not recorded in the 30 seconds timeout limit.

wallets/metamask/src/cypress/MetaMask.ts

@@ -0,0 +1,11 @@
+import { lockPage } from '../selectors'
+import { MetaMaskAbstract } from '../type/MetaMaskAbstract'
+
+// @ts-ignore
+// TODO: To be implemented
+export class MetaMask extends MetaMaskAbstract {
+  unlock() {
+    cy.get(lockPage.passwordInput).type(this.password)
+    cy.get(lockPage.submitButton).click()
+  }
+}

wallets/metamask/src/cypress/index.ts

@@ -0,0 +1 @@
+export * from './MetaMask'

wallets/metamask/src/cypress/installSynpress.ts

@@ -0,0 +1,31 @@
+import { ensureRdpPort } from '@synthetixio/synpress-core'
+import importMetaMaskWallet from './support/importMetaMaskWallet'
+import { initMetaMask } from './support/initMetaMask'
+
+let port: number
+
+export default function installSynpress(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
+  const browsers = config.browsers.filter((b) => b.name === 'chrome')
+  if (browsers.length === 0) {
+    throw new Error('No Chrome browser found in the configuration')
+  }
+
+  on('before:browser:launch', async (_, launchOptions) => {
+    // Enable debug mode to establish playwright connection
+    const args = Array.isArray(launchOptions) ? launchOptions : launchOptions.args
+    port = ensureRdpPort(args)
+
+    args.push(...(await initMetaMask()))
+
+    return launchOptions
+  })
+
+  on('before:spec', async () => {
+    await importMetaMaskWallet(port)
+  })
+
+  return {
+    ...config,
+    browsers
+  }
+}

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

@@ -0,0 +1,28 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import synpressCommands from './synpressCommands'
+
+before(() => {
+  cy.visit('/')
+})
+
+Cypress.on('uncaught:exception', () => {
+  // failing the test
+  return false
+})
+
+synpressCommands()

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

@@ -0,0 +1,23 @@
+import { type BrowserContext, type Page, chromium } from '@playwright/test'
+import { importWallet } from '../../playwright/pages/OnboardingPage/actions'
+
+const SEED_PHRASE = 'test test test test test test test test test test test junk'
+
+export default async function importMetaMaskWallet(port: number) {
+  const debuggerDetails = await fetch(`http://127.0.0.1:${port}/json/version`)
+
+  const debuggerDetailsConfig = (await debuggerDetails.json()) as {
+    webSocketDebuggerUrl: string
+  }
+
+  const browser = await chromium.connectOverCDP(debuggerDetailsConfig.webSocketDebuggerUrl)
+
+  const context = browser.contexts()[0] as BrowserContext
+
+  // First page (index equal 0) is the cypress page, second one (index equal 1) is the extension page
+  const extensionPage = context.pages()[1] as Page
+
+  await importWallet(extensionPage, SEED_PHRASE, 'password')
+
+  await extensionPage.close()
+}

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

@@ -0,0 +1,13 @@
+import { prepareExtension } from '../../prepareExtension'
+
+export async function initMetaMask() {
+  const metamaskPath = await prepareExtension(false)
+
+  const browserArgs = [`--disable-extensions-except=${metamaskPath}`, `--load-extension=${metamaskPath}`]
+
+  if (process.env.HEADLESS) {
+    browserArgs.push('--headless=new')
+  }
+
+  return browserArgs
+}

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

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// TODO: To be implemented
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//     }
+//   }
+// }
+
+export default function synpressCommands() {}

wallets/metamask/src/index.ts

@@ -1,3 +0,0 @@
-export * from './MetaMask'
-export * from './fixtures/metaMaskFixtures'
-export * from './fixture-actions'