✨ feat(metamask): Add basic connectToDapp function (#922)

wallets/metamask/src/actions/connectToDapp.ts

@@ -0,0 +1,20 @@
+import type { BrowserContext } from '@playwright/test'
+import { getNotificationPage } from '../utils/getNotificationPage'
+
+export async function connectToDapp(context: BrowserContext, extensionId: string) {
+  const notificationPage = await getNotificationPage(context, extensionId)
+
+  if (!process.env.HEADLESS) {
+    // Set pop-up window viewport size to resemble the actual MetaMask pop-up window.
+    await notificationPage.setViewportSize({
+      width: 360,
+      height: 592
+    })
+  }
+
+  // Click `Next`.
+  await notificationPage.getByRole('button').nth(1).click()
+
+  // Click `Connect`.
+  await notificationPage.getByRole('button').nth(1).click()
+}

wallets/metamask/src/utils/getNotificationPage.ts

@@ -0,0 +1,29 @@
+import type { BrowserContext, Page } from '@playwright/test'
+
+export async function getNotificationPage(context: BrowserContext, extensionId: string) {
+  const notificationPageUrl = `chrome-extension://${extensionId}/notification.html`
+
+  /**
+   * If running in headless mode, create a new notification page manually.
+   *
+   * This is a workaround due to a bug in Chromium/MetaMask where pop-up windows
+   * are not created in the new headless mode.
+   */
+  if (process.env.HEADLESS) {
+    const notificationPage = await context.newPage()
+    await notificationPage.goto(notificationPageUrl)
+
+    return notificationPage
+  }
+
+  const isNotificationPage = (page: Page) => page.url().includes(notificationPageUrl)
+
+  // Check if notification page is already open.
+  const notificationPage = context.pages().find(isNotificationPage)
+
+  if (notificationPage) {
+    return notificationPage
+  }
+
+  return await context.waitForEvent('page', { predicate: isNotificationPage })
+}

wallets/metamask/test/e2e/metamask.spec.ts

@@ -1,4 +1,5 @@
 import { type BrowserContext, type Page, chromium, test as base } from '@playwright/test'
+import { connectToDapp } from '../../src/actions/connectToDapp'
 import { OnboardingPage } from '../../src/pages'
 import { prepareExtension } from '../../src/prepareExtension'
 import { getExtensionId } from '../../src/utils/getExtensionId'
@@ -43,7 +44,7 @@ const test = base.extend({
     sharedContext = context
     await use(context)
   },
-  page: async ({ context }, use) => {
+  metamaskPage: async ({ context }, use) => {
     const metamaskOnboardingPage = context.pages()[1] as Page
     await use(metamaskOnboardingPage)
   }
@@ -54,13 +55,13 @@ const { describe, expect } = test
 // Currently testing only happy paths until we have proper setup for parallel tests.
 describe('MetaMask', () => {
   describe('importWallet', () => {
-    test('should go through the onboarding flow and import wallet from seed phrase', async ({ page }) => {
-      const onboardingPage = new OnboardingPage(page)
+    test('should go through the onboarding flow and import wallet from seed phrase', async ({ metamaskPage }) => {
+      const onboardingPage = new OnboardingPage(metamaskPage)
 
       await onboardingPage.importWallet(DEFAULT_SEED_PHRASE, DEFAULT_PASSWORD)
 
-      await expect(page.getByText('Account 1')).toBeVisible()
-      await expect(page.getByText('0xf39...2266')).toBeVisible()
+      await expect(metamaskPage.getByText('Account 1')).toBeVisible()
+      await expect(metamaskPage.getByText('0xf39...2266')).toBeVisible()
     })
   })
 
@@ -70,4 +71,18 @@ describe('MetaMask', () => {
       expect(extensionId).toMatch(/^[a-z]{32}$/)
     })
   })
+
+  describe('connectToDapp', () => {
+    test('should connect wallet to dapp', async ({ context, page }) => {
+      const extensionId = await getExtensionId(context, 'MetaMask')
+
+      await page.goto('https://metamask.github.io/test-dapp/')
+
+      await page.locator('#connectButton').click()
+
+      await connectToDapp(context, extensionId)
+
+      await expect(page.locator('#accounts')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266')
+    })
+  })
 })

wallets/metamask/tsconfig.build.json

@@ -7,5 +7,6 @@
     "sourceMap": true,
     "declarationMap": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "files": ["environment.d.ts"]
 }