Phantom support for Playwright (#1271)

* Phantom support for Playwright

* Update typedoc-sidebar.json

* Update typedoc-sidebar.json

* Phantom support for Playwright

* chore: build:cache:metamask and build:cache:phantom

Signed-off-by: drptbl <[email protected]>

* fix: lint errors

Signed-off-by: drptbl <[email protected]>

* chore: add playwright-report to gitignore

Signed-off-by: drptbl <[email protected]>

* Improvements

* pnpm-lock updates and selector update

* chore: update pnpm-lock.yaml dependencies

* refactor: update sign button selector to use ActionFooter component

* Fixes for waitForExtensionOnLoadPage

* Fixes for Unit and Phantom tests

---------

Signed-off-by: drptbl <[email protected]>
Co-authored-by: drptbl <[email protected]>

Author: zgz2020

.github/workflows/test.yml

@@ -27,8 +27,8 @@ jobs:
       - name: Run tests
         run: pnpm run test
 
-  test-e2e-headful:
-    name: Run E2E tests (headful)
+  test-e2e-headful-wallet-mock-and-metamask:
+    name: Run E2E tests - Wallet mock & Metamask (headful)
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # [email protected]
@@ -61,19 +61,70 @@ jobs:
         run: |
           pnpm run serve:test-dapp &
 
-      - name: Build cache
+      - name: Build cache (metamask)
         run: |
-          xvfb-run pnpm run build:cache
+          xvfb-run pnpm run build:cache:metamask
 
       - name: Run E2E tests (headful)
         run: |
-          xvfb-run pnpm run test:playwright:headful
+          xvfb-run pnpm run test:playwright:wallet-mock-and-metamask:headful
 
-      - name: Archive Playwright report
+      - name: Archive Playwright report (metamask)
         uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # [email protected]
         if: success() || failure()
         with:
-          name: playwright-report-headful
+          name: playwright-report-headful-metamask
           path: |
             wallets/metamask/playwright-report-headful/
           if-no-files-found: error
+
+  test-e2e-headful-phantom:
+    name: Run E2E tests - Phantom (headful)
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # [email protected]
+
+      - name: Setup Node & Install dependencies
+        uses: ./.github/actions/setup
+
+      - name: Install Foundry
+        uses: foundry-rs/foundry-toolchain@de808b1eea699e761c404bda44ba8f21aba30b2c # [email protected]
+
+      - name: Install Playwright dependencies
+        run: pnpm dlx [email protected] install-deps
+
+      # For now, we only need Chromium.
+      - name: Install browsers for Playwright
+        run: pnpm dlx [email protected] install chromium
+
+      - name: Build project
+        run: pnpm run build
+
+      - name: Install linux dependencies
+        run: |
+          sudo apt-get install --no-install-recommends -y \
+          xvfb
+
+      - name: Build project
+        run: pnpm run build
+
+      - name: Serve MetaMask Test Dapp
+        run: |
+          pnpm run serve:test-dapp &
+
+      - name: Build cache (phantom)
+        run: |
+          xvfb-run pnpm run build:cache:phantom
+
+      - name: Run E2E tests (headful)
+        run: |
+          xvfb-run pnpm run test:playwright:phantom:headful
+
+      - name: Archive Playwright report (phantom)
+        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # [email protected]
+        if: success() || failure()
+        with:
+          name: playwright-report-headful-phantom
+          path: |
+            wallets/phantom/playwright-report-headful/
+          if-no-files-found: error      

.gitignore

@@ -57,3 +57,5 @@ playwright/.cache
 output
 
 synpress-source.txt
+
+playwright-report*

package.json

@@ -8,8 +8,8 @@
   "license": "MIT",
   "scripts": {
     "build": "turbo build",
-    "build:cache": "turbo build:cache --filter=@synthetixio/synpress-metamask",
-    "docs:build": "turbo docs:build --filter=docs",
+    "build:cache:metamask": "turbo build:cache --filter=@synthetixio/synpress-metamask",
+    "build:cache:phantom": "turbo build:cache --filter=@synthetixio/synpress-phantom",
     "format": "biome format . --write",
     "format:check": "biome format . --error-on-warnings",
     "preinstall": "npx only-allow pnpm",
@@ -21,8 +21,10 @@
     "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: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",
+    "test:playwright:headful": "turbo test:playwright:headful --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock --filter=@synthetixio/synpress-phantom",
+    "test:playwright:headless": "turbo test:playwright:headless --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock --filter=@synthetixio/synpress-phantom",
+    "test:playwright:phantom:headful": "turbo test:playwright:headful --filter=@synthetixio/synpress-phantom",
+    "test:playwright:wallet-mock-and-metamask:headful": "turbo test:playwright:headful --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock",
     "update:deps": "ncu -u -ws --root"
   },
   "lint-staged": {

packages/cache/package.json

@@ -44,6 +44,7 @@
     "gradient-string": "2.0.2",
     "progress": "2.0.3",
     "tsup": "8.0.2",
+    "unzip-crx-3": "0.2.0",
     "unzipper": "0.10.14",
     "zod": "3.22.4"
   },

packages/cache/src/cli/cliEntrypoint.ts

@@ -7,13 +7,15 @@ import { rimraf } from 'rimraf'
 import { WALLET_SETUP_DIR_NAME } from '../constants'
 import { createCache } from '../createCache'
 import { prepareExtension } from '../prepareExtension'
+import { prepareExtensionPhantom } from '../prepareExtensionPhantom'
 import { compileWalletSetupFunctions } from './compileWalletSetupFunctions'
 import { footer } from './footer'
 
 interface CliFlags {
   headless: boolean
   force: boolean
   debug: boolean
+  phantom: boolean
 }
 
 // Helper function to check if running in WSL
@@ -41,6 +43,7 @@ export const cliEntrypoint = async () => {
     )
     .option('-f, --force', 'Force the creation of cache even if it already exists', false)
     .option('-d, --debug', 'If this flag is present, the compilation files are not going to be deleted', false)
+    .option('-p, --phantom', 'If this flag is present, Phantom extension will be installed instead of Metamask', false)
     .helpOption(undefined, 'Display help for command')
     .addHelpText('afterAll', `\n${footer}\n`)
     .parse(process.argv)
@@ -88,8 +91,12 @@ export const cliEntrypoint = async () => {
     flags.debug
   )
 
-  // TODO: We should be using `prepareExtension` function from the wallet itself!
-  await createCache(compiledWalletSetupDirPath, setupFunctionHashes, prepareExtension, flags.force)
+  // TODO: We should be using `prepareExtension` functions from the wallet itself!
+  if (flags.phantom) {
+    await createCache(compiledWalletSetupDirPath, setupFunctionHashes, prepareExtensionPhantom, flags.force)
+  } else {
+    await createCache(compiledWalletSetupDirPath, setupFunctionHashes, prepareExtension, flags.force)
+  }
 
   if (!flags.debug) {
     await rimraf(compiledWalletSetupDirPath)

packages/cache/src/index.ts

@@ -8,3 +8,4 @@ export * from './utils/createTempContextDir'
 export * from './utils/removeTempContextDir'
 export * from './prepareExtension'
 export * from './cli/cliEntrypoint'
+export * from './prepareExtensionPhantom'

packages/cache/src/prepareExtensionPhantom.ts

@@ -0,0 +1,20 @@
+import { downloadFile, ensureCacheDirExists, unzipArchivePhantom } from '.'
+
+export const PHANTOM_EXTENSION_DOWNLOAD_URL = 'https://crx-backup.phantom.dev/latest.crx'
+
+// NOTE: This function is copied from `wallets/phantom/src/prepareExtensionPhantom.ts` only TEMPORARILY!
+export async function prepareExtensionPhantom() {
+  const cacheDirPath = ensureCacheDirExists()
+
+  const downloadResult = await downloadFile({
+    url: PHANTOM_EXTENSION_DOWNLOAD_URL,
+    outputDir: cacheDirPath,
+    fileName: 'phantom-chrome-latest.crx'
+  })
+
+  const unzipResult = await unzipArchivePhantom({
+    archivePath: downloadResult.filePath
+  })
+
+  return unzipResult.outputPath
+}

packages/cache/src/unzipArchive.ts

@@ -1,5 +1,6 @@
 import path from 'node:path'
 import fs from 'fs-extra'
+import unzipCrx from 'unzip-crx-3'
 import unzippper from 'unzipper'
 
 type UnzipArchiveOptions = {
@@ -73,3 +74,27 @@ export async function unzipArchive(options: UnzipArchiveOptions) {
     throw new Error(`[UnzipFile] Error unzipping the file - ${error.message}`)
   })
 }
+
+export async function unzipArchivePhantom(options: UnzipArchiveOptions) {
+  const { archivePath, overwrite } = options
+
+  const archiveFileExtension = archivePath.split('.').slice(-1)
+  const outputPath = archivePath.replace(`.${archiveFileExtension}`, '')
+
+  const fileExists = fs.existsSync(outputPath)
+  if (fileExists && !overwrite) {
+    return {
+      outputPath,
+      unzipSkipped: true
+    }
+  }
+
+  // Creates the output directory
+  fs.mkdirSync(outputPath, { recursive: true })
+
+  await unzipCrx(archivePath, outputPath)
+
+  // TODO: Handle errors
+
+  return { outputPath }
+}

packages/cache/src/utils/createCacheForWalletSetupFunction.ts

@@ -23,7 +23,7 @@ export async function createCacheForWalletSetupFunction(
     args: browserArgs
   })
 
-  const extensionPage = await waitForExtensionOnLoadPage(context)
+  const extensionPage = await waitForExtensionOnLoadPage(context, extensionPath)
 
   try {
     await walletSetup(context, extensionPage)

packages/cache/src/utils/waitForExtensionOnLoadPage.ts

@@ -15,26 +15,34 @@ const RELOAD_DELAY = 1000
 // Polling interval for finding extension page
 const POLLING_INTERVAL = 500
 
-// MetaMask specific selectors
-const METAMASK_SELECTORS = {
-  APP: '#app-content .app'
+const APP_SELECTORS = {
+  METAMASK: '#app-content .app',
+  PHANTOM: '#root'
 }
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
 /**
- * Checks if a page is blank (no MetaMask app content)
+ * Checks if a page is blank (no MetaMask or Phantom app content)
  */
-async function isPageBlank(page: Page): Promise<boolean> {
+async function isPageBlank(page: Page, extensionPath: string): Promise<boolean> {
+  const app = (extensionPath: string) => {
+    if (extensionPath.includes('metamask')) {
+      return 'METAMASK'
+    } else {
+      return 'PHANTOM'
+    }
+  }
+
   try {
-    // Check specifically for MetaMask app element
+    // Check for specific app element
     const appElementCount = await page
-      .locator(METAMASK_SELECTORS.APP)
+      .locator(APP_SELECTORS[app(extensionPath)])
       .count()
       .catch(() => 0)
 
     if (appElementCount === 0) {
-      console.log('[WaitForExtensionOnLoadPage] MetaMask app element not found, page appears to be blank')
+      console.log(`[WaitForExtensionOnLoadPage] ${app(extensionPath)} app element not found, page appears to be blank`)
       return true
     }
 
@@ -50,11 +58,11 @@ async function isPageBlank(page: Page): Promise<boolean> {
 /**
  * Attempts to fix a blank page by reloading
  */
-async function fixBlankPage(page: Page): Promise<boolean> {
+async function fixBlankPage(page: Page, extensionPath: string): Promise<boolean> {
   for (let attempt = 0; attempt < MAX_BLANK_PAGE_RETRIES; attempt++) {
     console.log(`[WaitForExtensionOnLoadPage] Checking page state (attempt ${attempt + 1}/${MAX_BLANK_PAGE_RETRIES})`)
 
-    const isBlank = await isPageBlank(page)
+    const isBlank = await isPageBlank(page, extensionPath)
 
     if (isBlank) {
       console.log('[WaitForExtensionOnLoadPage] Page is blank, reloading...')
@@ -90,7 +98,7 @@ async function findExtensionPage(context: BrowserContext): Promise<Page | null>
 /**
  * Waits for the extension page to load and ensures it's not blank or has errors
  */
-export async function waitForExtensionOnLoadPage(context: BrowserContext): Promise<Page> {
+export async function waitForExtensionOnLoadPage(context: BrowserContext, extensionPath: string): Promise<Page> {
   let retries = 0
   console.log(
     `[WaitForExtensionOnLoadPage] Starting with timeout: ${EXTENSION_LOAD_TIMEOUT}ms and max retries: ${MAX_RETRIES}`
@@ -136,7 +144,7 @@ export async function waitForExtensionOnLoadPage(context: BrowserContext): Promi
 
       // Now check if the page is blank or has errors and fix if needed
       console.log('[WaitForExtensionOnLoadPage] Checking if extension page is properly loaded...')
-      const isFixed = await fixBlankPage(extensionPage)
+      const isFixed = await fixBlankPage(extensionPage, extensionPath)
 
       if (isFixed) {
         console.log('[WaitForExtensionOnLoadPage] Extension page is properly loaded and ready')