feat/automated tests with metamask (#2636)

.github/workflows/ui_tests.yml

@@ -105,6 +105,25 @@ jobs:
         working-directory: ./apps/laboratory/
         run: pnpm playwright:install
 
+      - name: Build MetaMask wallet cache
+        working-directory: ./apps/laboratory/
+        run: xvfb-run pnpm synpress
+
+      - name: Run MetaMask Playwright tests (headful)
+        working-directory: ./apps/laboratory/
+        env:
+          BASE_URL: ${{ inputs.base-url }}
+          WALLET_URL: ${{ inputs.wallet-url }}
+          NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
+          SKIP_PLAYWRIGHT_WEBSERVER: ${{ inputs.skip-playwright-webserver }}
+          NEXTAUTH_SECRET: ${{ secrets.TESTS_NEXTAUTH_SECRET }}
+          MAILSAC_API_KEY: ${{ secrets.TESTS_MAILSEC_API_KEY }}
+          NEXT_PUBLIC_SECURE_SITE_SDK_URL: ${{ inputs.secure-site-url }}
+          SOCIAL_TEST_EMAIL: ${{ secrets.TESTS_SOCIAL_EMAIL }}
+          SOCIAL_TEST_PASSWORD: ${{ secrets.TESTS_SOCIAL_PASSWORD }}
+          CI: true
+        run: xvfb-run pnpm playwright:test:metamask
+
       - name: Run Playwright tests
         env:
           BASE_URL: ${{ inputs.base-url }}

.gitignore

@@ -14,4 +14,5 @@ coverage
 test-results
 .vscode/*
 apps/laboratory/playwright/.auth/user.json
-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo
+.cache-synpress

apps/laboratory/next.config.js → apps/laboratory/next.config.mjs

@@ -60,4 +60,4 @@ const nextConfig = {
   }
 }
 
-module.exports = nextConfig
+export default nextConfig

apps/laboratory/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@apps/laboratory",
+  "type": "module",
   "version": "5.0.10",
   "private": true,
   "scripts": {
@@ -9,7 +10,9 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "playwright:start": "pnpm start",
     "playwright:install": "playwright install --with-deps",
-    "playwright:test": "playwright test",
+    "synpress": "synpress ./tests/wallet-setup",
+    "playwright:test": "playwright test --grep-invert 'metamask.spec.ts'",
+    "playwright:test:metamask": "playwright test --grep 'metamask.spec.ts'",
     "playwright:test:basic": "playwright test --grep 'basic-tests.spec.ts'",
     "playwright:test:wallet": "playwright test --grep 'wallet.spec.ts'",
     "playwright:test:email": "playwright test --grep 'email.spec.ts'",
@@ -21,6 +24,7 @@
     "playwright:test:canary": "playwright test --retries=0 --grep canary.spec.ts --project='Desktop Chrome/wagmi'",
     "playwright:test:wallet-features": "playwright test --grep wallet-features.spec.ts",
     "playwright:debug": "pnpm playwright:test --debug",
+    "playwright:debug:metamask": "pnpm playwright:test:metamask --debug",
     "playwright:debug:basic": "pnpm playwright:test:basic --debug",
     "playwright:debug:wallet": "pnpm playwright:test:wallet --debug",
     "playwright:debug:email": "pnpm playwright:test:email --debug",
@@ -66,8 +70,9 @@
   },
   "devDependencies": {
     "@aws-sdk/client-cloudwatch": "3.509.0",
+    "@synthetixio/synpress": "4.0.0-alpha.7",
     "@mailsac/api": "1.0.5",
-    "@playwright/test": "1.40.1",
+    "@playwright/test": "1.44.0",
     "@types/node": "20.11.5",
     "@types/react": "18.2.62",
     "@types/react-dom": "18.2.7",

apps/laboratory/tests/metamask.spec.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test'
+import { metaMaskFixtures, testWithSynpress } from '@synthetixio/synpress'
+import { ModalValidator } from './shared/validators/ModalValidator'
+import basicSetup from './wallet-setup/basic.setup'
+
+// -- Setup --------------------------------------------------------------------
+const synpressTest = testWithSynpress(metaMaskFixtures(basicSetup)).extend<{ library: string }>({
+  library: ['wagmi', { option: true }]
+})
+
+synpressTest.describe.configure({ mode: 'serial' })
+
+synpressTest('should be connected as expected', async ({ page, metamask }) => {
+  await page.goto(`/library/wagmi`)
+  const modalValidator = new ModalValidator(page)
+  await page.getByTestId('connect-button').click()
+  const connectMetaMaskButton = page.getByTestId('wallet-selector-io.metamask')
+  await expect(connectMetaMaskButton).toBeVisible()
+  await connectMetaMaskButton.click()
+  await metamask.connectToDapp()
+  await modalValidator.expectConnected()
+})

apps/laboratory/tests/shared/utils/project.ts

@@ -43,13 +43,18 @@ const SOLANA_DISABLED_TESTS = [
   'smart-account.spec.ts',
   'social.spec.ts',
   'wallet-features.spec.ts',
-  'wallet.spec.ts'
+  'wallet.spec.ts',
+  'metamask.spec.ts'
 ]
 const WAGMI_DISABLED_TESTS = ['smart-account.spec.ts', 'social.spec.ts']
-const ETHERS_DISABLED_TESTS = ['wallet-features.spec.ts', 'social.spec.ts']
+const ETHERS_DISABLED_TESTS = ['wallet-features.spec.ts', 'social.spec.ts', 'metamask.spec.ts']
 
 const ETHERS_EMAIL_BASED_REGEX = new RegExp(ETHERS_DISABLED_TESTS.join('|'), 'u')
 const WAGMI_DISABLED_TESTS_REGEX = new RegExp(WAGMI_DISABLED_TESTS.join('|'), 'u')
+const WAGMI_DISABLED_TESTS_REGEX_FF = new RegExp(
+  [...WAGMI_DISABLED_TESTS, 'metamask.spec.ts'].join('|'),
+  'u'
+)
 const SOLANA_DISABLED_TESTS_REGEX = new RegExp(SOLANA_DISABLED_TESTS.join('|'), 'u')
 
 const customProjectProperties: CustomProjectProperties = {
@@ -71,7 +76,7 @@ const customProjectProperties: CustomProjectProperties = {
     testIgnore: WAGMI_DISABLED_TESTS_REGEX
   },
   'Desktop Firefox/wagmi': {
-    testIgnore: WAGMI_DISABLED_TESTS_REGEX
+    testIgnore: WAGMI_DISABLED_TESTS_REGEX_FF
   },
   // Exclude social.spec.ts, email.spec.ts, siwe.spec.ts, and canary.spec.ts from solana, not yet implemented
   'Desktop Chrome/solana': {

apps/laboratory/tests/wallet-setup/basic.setup.ts

@@ -0,0 +1,11 @@
+import { MetaMask, defineWalletSetup, getExtensionId } from '@synthetixio/synpress'
+
+const SEED_PHRASE = 'test test test test test test test test test test test junk'
+const PASSWORD = 'Password123'
+
+export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
+  const extensionId = await getExtensionId(context, 'MetaMask')
+  const metamask = new MetaMask(context, walletPage, PASSWORD, extensionId)
+
+  await metamask.importWallet(SEED_PHRASE)
+})

package.json

@@ -50,5 +50,10 @@
     "vitest": "1.5.0",
     "vite-plugin-node-polyfills": "0.22.0"
   },
-  "packageManager": "pnpm@9.5.0"
+  "packageManager": "pnpm@9.5.0",
+  "pnpm": {
+    "patchedDependencies": {
+      "@synthetixio/synpress-metamask@0.0.1-alpha.7": "patches/@synthetixio__synpress-metamask@0.0.1-alpha.7.patch"
+    }
+  }
 }

patches/@synthetixio__synpress-metamask@0.0.1-alpha.7.patch

@@ -0,0 +1,22 @@
+diff --git a/src/fixtures/metaMaskFixtures.ts b/src/fixtures/metaMaskFixtures.ts
+index cc2019e4baa64c8a7dee64398c09dd415169a17f..cda6d980723f3ce885d4fab99596a3e07384a65e 100644
+--- a/src/fixtures/metaMaskFixtures.ts
++++ b/src/fixtures/metaMaskFixtures.ts
+@@ -53,7 +53,7 @@ export const metaMaskFixtures = (walletSetup: ReturnType<typeof defineWalletSetu
+       // We don't need the `--load-extension` arg since the extension is already loaded in the cache.
+       const browserArgs = [`--disable-extensions-except=${metamaskPath}`]
+
+-      if (process.env.HEADLESS) {
++      if (process.env["HEADLESS"]) {
+         browserArgs.push('--headless=new')
+
+         if (slowMo > 0) {
+@@ -64,7 +64,7 @@ export const metaMaskFixtures = (walletSetup: ReturnType<typeof defineWalletSetu
+       const context = await chromium.launchPersistentContext(_contextPath, {
+         headless: false,
+         args: browserArgs,
+-        slowMo: process.env.HEADLESS ? 0 : slowMo
++        slowMo: process.env["HEADLESS"] ? 0 : slowMo
+       })
+
+       const { cookies, origins } = await currentContext.storageState()