feat: added injected wallet back in, configured simple test with w3m …

…prefer injected flag, added in extension, added in data storage location, configured playwright to use projects, updated workflow

.github/workflows/playwright_tests.yml

@@ -61,3 +61,42 @@ jobs:
             name: playwright-report-${{ matrix.project }}
             path: ./laboratory/playwright-report/
             retention-days: 7
+
+  e2e_injected_tests:
+      name: 'Playwright Injected Wallet Tests'
+      runs-on: ubuntu-latest
+      timeout-minutes: 10
+      steps:
+        - name: checkout
+          uses: actions/checkout@v3
+
+        - name: setup-node
+          uses: actions/setup-node@v3
+          with:
+            node-version: 18.x
+            cache: 'npm'
+            cache-dependency-path: 'package-lock.json'
+
+        - name: unzip extension data
+          working-directory: ./laboratory/tests/shared/data
+          run: 7z x *.zip -o*.zip
+
+        - name: Install deps
+          run: npm ci
+
+        - name: build
+          run: npm run build
+
+        - name: Install Playwright Browsers
+          run: npx playwright install --with-deps chromium
+
+        - name: Run Playwright tests
+          working-directory: ./laboratory
+          run: npx playwright test --project=injected
+
+        - uses: actions/upload-artifact@v3
+          if: always()
+          with:
+            name: playwright-report-injected
+            path: ./laboratory/playwright-report/
+            retention-days: 7

laboratory/.gitignore

@@ -1,4 +1,6 @@
 node_modules/
 /test-results/
 /playwright-report/
-/playwright/.cache/
+/playwright/.cache/
+/tests/shared/data/**
+!/tests/shared/data/*.zip

laboratory/playwright.config.ts

@@ -31,12 +31,20 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
+      testIgnore: '**/w3m-injected.spec.ts',
       use: { ...devices['Desktop Chrome'] }
     },
 
     {
       name: 'firefox',
+      testIgnore: '**/w3m-injected.spec.ts',
       use: { ...devices['Desktop Firefox'] }
+    },
+
+    {
+      name: 'injected',
+      testMatch: '**/w3m-injected.spec.ts',
+      use: { ...devices['Desktop Chrome'] }
     }
 
     /* Test against mobile viewports. */

laboratory/tests/shared/fixtures/mm-fixture.ts

@@ -0,0 +1,34 @@
+/* eslint-disable prefer-destructuring */
+/* eslint-disable no-empty-pattern */
+import { test as base, chromium, type BrowserContext } from '@playwright/test'
+import path from 'path'
+
+export const testWithMM = base.extend<{
+  contextMM: BrowserContext
+  extensionId: string
+}>({
+  context: async ({}, use) => {
+    const pathToExtension = path.join(__dirname, '../data/metamask-chrome-10.34.0')
+    const pathToStorage = path.join(__dirname, '../data/mm-storage')
+
+    const context = await chromium.launchPersistentContext(pathToStorage, {
+      headless: false,
+      args: [
+        // `--headless=new`,
+        `--disable-extensions-except=${pathToExtension}`,
+        `--load-extension=${pathToExtension}`
+      ]
+    })
+    await use(context)
+    await context.close()
+  },
+  extensionId: async ({ context }, use) => {
+    let [background] = context.serviceWorkers()
+    if (!background) {
+      background = await context.waitForEvent('serviceworker')
+    }
+
+    const extensionId = background.url().split('/')[2]
+    await use(extensionId)
+  }
+})

laboratory/tests/w3m-injected.spec.ts

@@ -0,0 +1,33 @@
+import { testWithMM } from './shared/fixtures/mm-fixture'
+import { expect } from '@playwright/test'
+
+/**
+ * R&D testing for inject wallets, WIP
+ */
+
+testWithMM('should prefer injected wallets', async ({ page, context }) => {
+  const mmPageEvent = context.waitForEvent('page')
+  const mmPage = await mmPageEvent
+  await mmPage.getByTestId('unlock-password').fill('password')
+  await mmPage.getByTestId('unlock-submit').click()
+
+  await page.goto('https://lab.web3modal.com/with-wagmi/react?w3mPreferInjected=true')
+  await page.getByTestId('partial-core-connect-button').focus()
+  await page.getByTestId('partial-core-connect-button').click()
+
+  await mmPage.reload()
+  await expect(mmPage.getByText(/Connect with MetaMask/u)).toBeVisible()
+})
+
+/* You can use this mock test + playwright debug to open/modify the mm extension */
+testWithMM.skip('debug extension', async ({ page, context }) => {
+  const mmPageEvent = context.waitForEvent('page')
+  const mmPage = await mmPageEvent
+  await mmPage.getByTestId('unlock-password').fill('password')
+  await mmPage.getByTestId('unlock-submit').click()
+
+  // eslint-disable-next-line no-promise-executor-return
+  await new Promise(resolve => setTimeout(resolve, 10000000))
+  await page.goto('https://example.com')
+  expect(true).toBe(true)
+})