fix: improve metamask/cypress stability

wallets/metamask/cypress.config.ts

@@ -2,7 +2,8 @@ import { defineConfig } from 'cypress'
 import configureSynpress from './src/cypress/configureSynpress'
 
 export default defineConfig({
-  chromeWebSecurity: false,
+  userAgent: 'synpress',
+  chromeWebSecurity: true,
   e2e: {
     baseUrl: 'http://localhost:9999',
     specPattern: 'test/cypress/**/*.cy.{js,jsx,ts,tsx}',

wallets/metamask/src/cypress/configureSynpress.ts

@@ -1,27 +1,79 @@
 import { ensureRdpPort } from '@synthetixio/synpress-core'
-import importMetaMaskWallet from './support/importMetaMaskWallet'
 import { initMetaMask } from './support/initMetaMask'
+import type { BrowserContext, Page } from '@playwright/test'
+import { MetaMask } from '../playwright'
+import importMetaMaskWallet from './support/importMetaMaskWallet'
 
-let port: number
+let rdpPort: number
+let context: BrowserContext
+let metamaskExtensionId: string
+let metamaskExtensionPage: Page
 
 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) => {
+  on('before:browser:launch', async (browser, launchOptions) => {
     // Enable debug mode to establish playwright connection
     const args = Array.isArray(launchOptions) ? launchOptions : launchOptions.args
-    port = ensureRdpPort(args)
+    rdpPort = ensureRdpPort(args)
 
-    args.push(...(await initMetaMask()))
+    if (browser.family === 'chromium') {
+      const { extensions, browserArgs } = await initMetaMask()
+
+      launchOptions.extensions.push(...extensions)
+      args.push(...browserArgs)
+    }
 
     return launchOptions
   })
 
   on('before:spec', async () => {
-    await importMetaMaskWallet(port)
+    const {
+      context: _context,
+      metamaskExtensionId: _metamaskExtensionId,
+      extensionPage: _extensionPage
+    } = await importMetaMaskWallet(rdpPort)
+    if (_extensionPage && _metamaskExtensionId) {
+      context = _context
+      metamaskExtensionId = _metamaskExtensionId
+      metamaskExtensionPage = _extensionPage
+    }
+  })
+
+  on('task', {
+    // Configuration helpers
+    async importMetaMaskWallet() {
+      return importMetaMaskWallet(rdpPort)
+        .then(() => true)
+        .catch(() => false)
+    },
+    async getBrowserContext() {
+      return context
+    },
+    async getMetamaskExtensionId() {
+      return metamaskExtensionId
+    },
+    async getMetamaskExtensionPage() {
+      return metamaskExtensionPage
+    },
+
+    // Synpress API
+    async connectToDapp() {
+      const metamask = new MetaMask(
+        context as BrowserContext,
+        metamaskExtensionPage as Page,
+        'password',
+        metamaskExtensionId
+      )
+
+      return metamask
+        .connectToDapp()
+        .then(() => true)
+        .catch(() => false)
+    }
   })
 
   return {

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

@@ -13,16 +13,15 @@
 // 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()
+
+before(() => {
+  cy.visit('/')
+})

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

@@ -1,6 +1,6 @@
 import { type BrowserContext, type Page, chromium } from '@playwright/test'
-import { importWallet } from '../../playwright/pages/OnboardingPage/actions'
-import { onboardingPage } from '../../selectors'
+import { MetaMask } from '../../playwright'
+import { getExtensionId } from '../../playwright'
 
 const SEED_PHRASE = 'test test test test test test test test test test test junk'
 
@@ -17,12 +17,25 @@ export default async function importMetaMaskWallet(port: number) {
 
   await context.waitForEvent('response')
 
-  // 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
+  let extensionPage: Page | undefined
+  let metamaskExtensionId: string | undefined
 
-  await extensionPage.waitForSelector(onboardingPage.GetStartedPageSelectors.termsOfServiceCheckbox)
+  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')
 
-  await importWallet(extensionPage, SEED_PHRASE, 'password')
+    const metamask = new MetaMask(context, extensionPage, 'password', metamaskExtensionId)
 
-  await extensionPage.close()
+    await metamask.importWallet(SEED_PHRASE)
+
+    const cypressPage = context.pages()[extensionPageIndex === 1 ? 0 : 1] as Page
+    await cypressPage.bringToFront()
+  }
+
+  return {
+    context,
+    extensionPage,
+    metamaskExtensionId
+  }
 }

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

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

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

@@ -17,4 +17,21 @@
 //   }
 // }
 
-export default function synpressCommands() {}
+// import { connectToDapp } from '../../playwright/pages/NotificationPage/actions'
+
+// import { MetaMask } from '../../playwright/MetaMask'
+// import type { BrowserContext, Page } from '@playwright/test'
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      connectToDapp(): Chainable<void>
+    }
+  }
+}
+
+export default function synpressCommands() {
+  Cypress.Commands.add('connectToDapp', () => {
+    return cy.task('connectToDapp')
+  })
+}

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

@@ -0,0 +1,6 @@
+it('should connect account to the app', () => {
+  cy.get('#connectButton').click()
+  cy.connectToDapp()
+
+  cy.get('#accounts').should('have.text', '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266')
+})