diff --git a/.github/workflows/playwright_tests.yml b/.github/workflows/playwright_tests.yml index 659648d0f1..aa19e5f817 100644 --- a/.github/workflows/playwright_tests.yml +++ b/.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 diff --git a/laboratory/.gitignore b/laboratory/.gitignore index 01226ed353..71d3228aae 100644 --- a/laboratory/.gitignore +++ b/laboratory/.gitignore @@ -1,4 +1,6 @@ node_modules/ /test-results/ /playwright-report/ -/playwright/.cache/ \ No newline at end of file +/playwright/.cache/ +/tests/shared/data/** +!/tests/shared/data/*.zip \ No newline at end of file diff --git a/laboratory/playwright.config.ts b/laboratory/playwright.config.ts index 41cbeaa13f..b8c20bab82 100644 --- a/laboratory/playwright.config.ts +++ b/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. */ diff --git a/laboratory/tests/shared/data/metamask-chrome-10.34.0.zip b/laboratory/tests/shared/data/metamask-chrome-10.34.0.zip new file mode 100644 index 0000000000..63f4974066 Binary files /dev/null and b/laboratory/tests/shared/data/metamask-chrome-10.34.0.zip differ diff --git a/laboratory/tests/shared/data/mm-storage.zip b/laboratory/tests/shared/data/mm-storage.zip new file mode 100644 index 0000000000..65e9d18fc9 Binary files /dev/null and b/laboratory/tests/shared/data/mm-storage.zip differ diff --git a/laboratory/tests/shared/fixtures/mm-fixture.ts b/laboratory/tests/shared/fixtures/mm-fixture.ts new file mode 100644 index 0000000000..c871c2afc4 --- /dev/null +++ b/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) + } +}) diff --git a/laboratory/tests/w3m-injected.spec.ts b/laboratory/tests/w3m-injected.spec.ts new file mode 100644 index 0000000000..9d8900ce09 --- /dev/null +++ b/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) +})