✨ feat: MetaMask setup in Cypress (#1157)

* feat: MetaMask setup in Cypress part 1

* feat: wallet setup is working as expected

* fix: gitignore cleanup

* fix: clean imports

* fix: export from metamask package

* fix: dependencies issues

* fix: cleanup

* fix: test scripts

* fix: format

* fix: renamed configureBeforeSynpress.ts to configureSynpress.ts

* fix: metamask output dir

.github/workflows/test.yml

@@ -67,7 +67,7 @@ jobs:
 
       - name: Run E2E tests (headful)
         run: |
-          xvfb-run pnpm run test:e2e:headful
+          xvfb-run pnpm run test:playwright:headful
 
       - name: Archive Playwright report
         uses: actions/upload-artifact@v3

.gitignore

@@ -37,6 +37,9 @@ test-results
 playwright-report
 playwright/.cache
 
+### Cypress
+wallets/**/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/README.md

@@ -66,9 +66,9 @@ pnpm run build:cache:headless
 
 ```bash
 # Use one of our scripts:
-pnpm run test:e2e:headful
-pnpm run test:e2e:headless
-pnpm run test:e2e:headless:ui
+pnpm run test:playwright:headful
+pnpm run test:playwright:headless
+pnpm run test:playwright:headless:ui
 
 # Or use Playwright directly:
 playwright test

examples/new-dawn/cypress.config.ts

@@ -1,4 +1,4 @@
-import { installSynpress } from '@synthetixio/synpress/cypress'
+import { configureSynpress } from '@synthetixio/synpress/cypress'
 import { defineConfig } from 'cypress'
 
 export default defineConfig({
@@ -9,7 +9,7 @@ export default defineConfig({
     supportFile: 'test/cypress/support/e2e.{js,jsx,ts,tsx}',
     testIsolation: false,
     async setupNodeEvents(on, config) {
-      return installSynpress(on, config)
+      return configureSynpress(on, config)
     }
   }
 })

examples/new-dawn/package.json

@@ -8,10 +8,10 @@
     "build:cache:force": "synpress --force",
     "build:cache:headless": "synpress --headless",
     "serve:test-dapp": "serve node_modules/@metamask/test-dapp/dist -p 9999",
-    "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:cypress:headful": "cypress run --browser chrome --headed",
+    "test:playwright:headful": "playwright test",
+    "test:playwright:headless": "HEADLESS=true playwright test",
+    "test:playwright:headless:ui": "HEADLESS=true playwright test --ui"
   },
   "dependencies": {
     "@playwright/test": "1.44.0",
@@ -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"]

package.json

@@ -15,8 +15,8 @@
     "sort-package-json": "sort-package-json 'package.json' '{packages,wallets,examples}/*/package.json'",
     "sort-package-json:check": "sort-package-json 'package.json' '{packages,wallets,examples}/*/package.json' --check",
     "test": "turbo test",
-    "test:e2e:headful": "turbo test:e2e:headful --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock",
-    "test:e2e:headless": "turbo test:e2e:headless --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock",
+    "test:playwright:headful": "turbo test:playwright:headful --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock",
+    "test:playwright:headless": "turbo test:playwright:headless --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock",
     "update:deps": "ncu -u -ws --root"
   },
   "lint-staged": {

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'

turbo.json

@@ -11,10 +11,10 @@
     "build:cache": {
       "dependsOn": ["build"]
     },
-    "test:e2e:headful": {
+    "test:playwright:headful": {
       "dependsOn": ["build", "build:cache"]
     },
-    "test:e2e:headless": {
+    "test:playwright:headless": {
       "dependsOn": ["build", "build:cache"]
     },
     "docs:build": {

wallets/ethereum-wallet-mock/cypress.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'cypress'
-import { installSynpress } from './src/cypress'
+import { configureSynpress } from './src/cypress'
 
 export default defineConfig({
   chromeWebSecurity: false,
@@ -10,7 +10,7 @@ export default defineConfig({
     fixturesFolder: 'src/cypress/fixtures',
     testIsolation: false,
     async setupNodeEvents(on, config) {
-      return installSynpress(on, config)
+      return configureSynpress(on, config)
     }
   }
 })

wallets/ethereum-wallet-mock/package.json

@@ -26,11 +26,10 @@
     "build:dist": "tsup --tsconfig tsconfig.build.json",
     "build:types": "tsc --emitDeclarationOnly --project tsconfig.build.json",
     "clean": "rimraf dist types",
-    "test:e2e:headful": "playwright test",
-    "test:e2e:headful:cypress": "cypress run --browser chrome --headed",
-    "test:e2e:headless": "HEADLESS=true playwright test",
-    "test:e2e:headless:cypress": "cypress run --headless --browser chrome",
-    "test:e2e:headless:ui": "HEADLESS=true playwright test --ui",
+    "test:cypress:headful": "cypress run --browser chrome --headed",
+    "test:playwright:headful": "playwright test",
+    "test:playwright:headless": "HEADLESS=true playwright test",
+    "test:playwright:headless:ui": "HEADLESS=true playwright test --ui",
     "test:watch": "vitest watch",
     "types:check": "tsc --noEmit"
   },

wallets/ethereum-wallet-mock/src/cypress/index.ts

@@ -1,2 +1,2 @@
-export { default as installSynpress } from './utils/installSynpress'
+export { default as configureSynpress } from './utils/configureSynpress'
 export { default as EthereumWalletMock } from './EthereumWalletMock'

wallets/ethereum-wallet-mock/src/cypress/utils/installSynpress.ts → wallets/ethereum-wallet-mock/src/cypress/utils/configureSynpress.ts

@@ -4,7 +4,7 @@ import { initEthereumWalletMock } from './initEthereumWalletMock'
 
 let port: number
 
-export default function installSynpress(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
+export default function configureSynpress(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')

wallets/metamask/cypress.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'cypress'
+import configureSynpress from './src/cypress/configureSynpress'
+
+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 configureSynpress(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,17 +21,18 @@
   ],
   "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:headless": "HEADLESS=true playwright test",
-    "test:e2e:headless:ui": "HEADLESS=true playwright test --ui",
+    "test:cypress:headful": "cypress run --browser chrome --headed",
+    "test:playwright:headful": "playwright test",
+    "test:playwright:headless": "HEADLESS=true playwright test",
+    "test:playwright:headless:ui": "HEADLESS=true playwright test --ui",
     "test:watch": "vitest watch",
     "types:check": "tsc --noEmit"
   },
@@ -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/configureSynpress.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 configureSynpress(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/index.ts

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

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()