🚧 wip(metamask): Connect wallet to DApp

wallets/metamask/src/actions/connectWalletToDapp.ts

@@ -0,0 +1,29 @@
+import type { BrowserContext, Page } from '@playwright/test'
+
+async function getNotificationPage(context: BrowserContext, extensionId: string) {
+  const isNotificationPage = (page: Page) => page.url().includes(`chrome-extension://${extensionId}/notification.html`)
+
+  const notificationPage = context.pages().find(isNotificationPage)
+
+  if (notificationPage) {
+    return notificationPage
+  }
+
+  return await context.waitForEvent('page', { predicate: isNotificationPage })
+}
+
+export async function connectWalletToDapp(context: BrowserContext, extensionId: string) {
+  const notificationPage = await getNotificationPage(context, extensionId)
+
+  // Set viewport size to resemble actual MetaMask pop-up window.
+  await notificationPage.setViewportSize({
+    width: 360,
+    height: 592
+  })
+
+  // Next
+  await notificationPage.getByRole('button').nth(1).click()
+
+  // Connect
+  await notificationPage.getByRole('button').nth(1).click()
+}

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

@@ -1,4 +1,5 @@
 import { type BrowserContext, type Page, chromium, test as base } from '@playwright/test'
+import { connectWalletToDapp } from '../../src/actions/connectWalletToDapp'
 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('connectWalletToDapp', () => {
+    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 connectWalletToDapp(context, extensionId)
+
+      await expect(page.locator('#accounts')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266')
+    })
+  })
 })