Feat/playwright e2e ci 343 rebase

.github/workflows/e2e.yml

@@ -0,0 +1,50 @@
+name: E2E Tests
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Cache Playwright binaries
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install Playwright Browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps
+
+      - name: Build Frontend
+        run: npm run build
+        working-directory: ./frontend
+
+      - name: Run Playwright tests
+        run: npx playwright test
+        working-directory: ./frontend
+        env:
+          NEXT_PUBLIC_API_URL: http://localhost:3000
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: frontend/playwright-report/
+          retention-days: 30

.gitignore

@@ -8,4 +8,8 @@ coverage
 
 # Soroban test runner — auto-generated, never commit
 **/test_snapshots/
-fix.md
+fix.md
+
+# Playwright test execution items
+frontend/playwright-report/
+frontend/test-results/

frontend/e2e/stream-lifecycle.spec.ts

@@ -0,0 +1,81 @@
+import { test, expect, type Page, type Route } from "@playwright/test";
+
+test.describe("Stream Lifecycle Flow", () => {
+  const MOCK_ADDRESS =
+    "GBRRDO6S746E56R2T2B4VAM7J6U6U7S7S7S7S7S7S7S7S7S7S7S7S7S7";
+
+  test.beforeEach(async ({ page }: { page: Page }) => {
+    // Explicitly type the address parameter in the init script
+    await page.addInitScript((addr: string) => {
+      window.localStorage.setItem("wallet-connect-status", "connected");
+      window.localStorage.setItem("wallet-address", addr);
+    }, MOCK_ADDRESS);
+
+    // Explicitly type the route parameter
+    await page.route("**/v1/users/*/summary", async (route: Route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          address: MOCK_ADDRESS,
+          totalStreamsCreated: 1,
+          totalStreamedOut: "100000000",
+          totalStreamedIn: "0",
+          currentClaimable: "0",
+          activeOutgoingCount: 1,
+          activeIncomingCount: 0,
+        }),
+      });
+    });
+
+    await page.route("**/v1/streams*", async (route: Route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify([
+          {
+            streamId: 101,
+            sender: MOCK_ADDRESS,
+            recipient: "G...RECEIVER",
+            tokenAddress: "C...TOKEN",
+            ratePerSecond: "100",
+            depositedAmount: "1000000",
+            withdrawnAmount: "0",
+            startTime: Math.floor(Date.now() / 1000),
+            isActive: true,
+          },
+        ]),
+      });
+    });
+  });
+
+  // ... previous tests ...
+
+  test("should pause, resume, and cancel a stream", async ({
+    page,
+  }: {
+    page: Page;
+  }) => {
+    await page.goto("http://localhost:3000/app/activity");
+
+    // 1. Pause
+    await page.getByRole("button", { name: /pause/i }).first().click();
+    await expect(page.getByText(/paused/i)).toBeVisible();
+
+    // 2. Resume
+    await page
+      .getByRole("button", { name: /resume/i })
+      .first()
+      .click();
+    // FIXED: Use a proper Regex for "resumed" OR "active"
+    await expect(page.locator("text=/resumed|active/i").first()).toBeVisible();
+
+    // 3. Cancel
+    await page
+      .getByRole("button", { name: /cancel/i })
+      .first()
+      .click();
+    await page.getByRole("button", { name: /confirm/i }).click();
+    await expect(page.getByText(/cancelled/i)).toBeVisible();
+  });
+});

frontend/package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.5",
+    "@playwright/test": "^1.59.1",
     "@tailwindcss/postcss": "^4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",

frontend/playwright.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    baseURL: "http://localhost:3000",
+
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  webServer: {
+    command: "npm run dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+    stdout: "ignore",
+    stderr: "pipe",
+  },
+});