#205 Add e2e utility for logging into MetaMask (#240)

.github/workflows/e2e.yml

@@ -6,6 +6,8 @@ jobs:
         if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success' && contains(github.event.deployment_status.environment_url, 'rollups-explorer-sepolia')
         timeout-minutes: 30
         runs-on: ubuntu-latest
+        container:
+            image: mcr.microsoft.com/playwright:v1.47.0-jammy
         steps:
             - name: Check out code
               uses: actions/checkout@v4
@@ -28,6 +30,7 @@ jobs:
               continue-on-error: true
               env:
                   E2E_BASE_URL: ${{ github.event.deployment_status.environment_url }}
+                  HOME: /root
 
             - name: Update check status to the outcome
               run: yarn node reportGitHubCheckStatus.mjs "End-to-end (${{ github.event.deployment_status.environment }})" ${{ github.sha }} ${{ steps.e2e.outcome }}

apps/web/additional.d.ts

@@ -36,3 +36,7 @@ declare namespace NodeJS {
         VERCEL_AUTOMATION_BYPASS_SECRET?: string;
     }
 }
+
+declare module "@synthetixio/synpress/commands/metamask";
+
+declare module "@synthetixio/synpress/helpers";

apps/web/e2e/fixtures/metamask.ts

@@ -0,0 +1,46 @@
+import type { BrowserContext } from "@playwright/test";
+import { chromium, test as baseTest } from "@playwright/test";
+import { initialSetup } from "@synthetixio/synpress/commands/metamask";
+import { prepareMetamask } from "@synthetixio/synpress/helpers";
+
+export const test = baseTest.extend<{
+    context: BrowserContext;
+}>({
+    context: async ({}, use) => {
+        // Required for SynPress
+        // @ts-ignore
+        global.expect = baseTest.expect;
+
+        // Download Metamask
+        const metamaskVersion = "11.15.1";
+        const metamaskPath = await prepareMetamask(metamaskVersion);
+
+        // Prepare browser args
+        const browserArgs = [
+            `--disable-extensions-except=${metamaskPath}`,
+            `--load-extension=${metamaskPath}`,
+            "--remote-debugging-port=9222",
+        ];
+
+        // Launch browser
+        const context = await chromium.launchPersistentContext("", {
+            headless: false,
+            args: browserArgs,
+        });
+
+        // Wait for Metamask window to be shown.
+        await context.pages()[0].waitForTimeout(3000);
+
+        // Setup metamask
+        await initialSetup(chromium, {
+            secretWordsOrPrivateKey:
+                "test test test test test test test test test test test junk",
+            network: "sepolia",
+            password: "Tester@1234",
+            enableAdvancedSettings: true,
+        });
+
+        // Provide context
+        await use(context);
+    },
+});

apps/web/e2e/transactions/depositEther.spec.ts

@@ -0,0 +1,32 @@
+import { expect } from "@playwright/test";
+import { test } from "../fixtures/metamask";
+import * as metamask from "@synthetixio/synpress/commands/metamask";
+
+test.describe.configure({
+    mode: "serial",
+    timeout: 120000,
+});
+
+test.afterAll(async ({ context }) => {
+    await context.close();
+});
+
+test("should connect to MetaMask and enable 'Send Transaction' button", async ({
+    page,
+}) => {
+    await page.goto("/");
+
+    const sendTransactionButton = page.getByTestId("transaction-button");
+    await expect(sendTransactionButton).toBeDisabled();
+
+    const connectButton = page.getByText("Connect Wallet");
+    await connectButton.click();
+
+    const metamaskButton = page.getByText("Metamask");
+    await metamaskButton.click();
+
+    await metamask.acceptAccess();
+
+    await expect(sendTransactionButton).toBeEnabled();
+    await sendTransactionButton.click();
+});

apps/web/package.json

@@ -13,7 +13,8 @@
         "test:watch": "vitest",
         "test:ui": "vitest --ui",
         "test:ci": "vitest run --coverage",
-        "test:e2e": "playwright test",
+        "test:e2e": "playwright test ./e2e/layout/ ./e2e/pages && xvfb-run npx playwright test ./e2e/transactions/",
+        "test:e2e:local": "playwright test",
         "test:e2e:ui": "playwright test --ui"
     },
     "dependencies": {
@@ -63,8 +64,9 @@
         "@graphql-codegen/typescript-operations": "^4",
         "@graphql-codegen/typescript-urql": "^4",
         "@graphql-typed-document-node/core": "^3",
-        "@playwright/test": "^1.43.1",
+        "@playwright/test": "^1.37.0",
         "@sunodo/wagmi-plugin-hardhat-deploy": "^0.2",
+        "@synthetixio/synpress": "^3.7.3",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.0",
         "@types/node": "^20",