E2e tests init

.github/workflows/playwright.yml

@@ -0,0 +1,113 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch: # Allow manual trigger
+
+jobs:
+  E2e_tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    env:
+      CI: true
+      NODE_ENV: test
+      POSTGRES_URL: postgresql://postgres:mysecretpassword@localhost:5432/postgres
+      NEXTAUTH_SECRET: 1234567890
+      NEXTAUTH_URL: http://localhost:3000
+      ZERION_API_KEY: test_api_key_for_ci
+
+
+    services:
+      postgres:
+        image: postgres:16
+        env:
+          POSTGRES_PASSWORD: mysecretpassword
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Install Playwright Browsers (Chromium only)
+        run: cd packages/nextjs && npx playwright install chromium
+
+
+      - name: Setup database
+        run: |
+          cp packages/nextjs/services/database/seed.data.example.ts packages/nextjs/services/database/seed.data.ts
+          yarn drizzle-kit migrate
+          yarn db:reset
+          yarn db:seed
+
+      - name: Build Next.js application
+        run: yarn next:build
+        env:
+          FIREBASE_SERVICE_ACCOUNT_KEY: '{
+            "type": "service_account",
+            "project_id": "your-project-id"
+          }'
+          FIREBASE_STORAGE_BUCKET: your-project-id.appspot.com
+
+      - name: Cache Synpress
+        run: |
+          cd packages/nextjs
+          xvfb-run yarn cache-synpress
+        env:
+          PLAYWRIGHT_TEST_BASE_URL: http://localhost:3000
+          CI: true
+        continue-on-error: false
+
+      - name: Rename Synpress cache folder
+        run: |
+          cd packages/nextjs
+          mv .cache-synpress/532f685e346606c2a803 .cache-synpress/08a20e3c7fc77e6ae298
+
+      - name: Run playwright tests
+        run: xvfb-run yarn next:test
+        env:
+          PLAYWRIGHT_TEST_BASE_URL: http://localhost:3000
+
+      - name: List test report contents
+        run: |
+          echo "Contents of playwright-report directory:"
+          ls -la packages/nextjs/playwright-report/ || echo "playwright-report directory does not exist"
+          echo "Contents of test-results directory:"
+          ls -la packages/nextjs/test-results/ || echo "test-results directory does not exist"
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: packages/nextjs/playwright-report/
+          retention-days: 30
+          if-no-files-found: warn
+          compression-level: 6
+          overwrite: false
+          include-hidden-files: false
+
+      - name: Upload test videos and traces
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: test-results
+          path: packages/nextjs/test-results/
+          retention-days: 7
+          if-no-files-found: ignore

README.md

@@ -99,3 +99,71 @@ FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
 Replace the content of `FIREBASE_SERVICE_ACCOUNT_KEY` with the JSON content from your service account key file (wrap the json in single quotes).
 
 The `FIREBASE_STORAGE_BUCKET` should be set to your Firebase Storage bucket name, typically in the format `your-project-id.appspot.com`.
+
+## Testing
+
+This project uses [Playwright](https://playwright.dev/) with [Synpress](https://github.com/Synthetixio/synpress) for end-to-end testing with MetaMask integration.
+
+### Running Tests
+
+To run tests locally, you have two options:
+
+#### 1. Run tests in headless mode:
+
+```bash
+yarn next:test
+```
+
+#### 2. Run tests with UI (interactive mode):
+
+```bash
+yarn next:test-ui
+```
+
+### Test Setup Requirements
+
+Before running tests, ensure you have:
+
+1. **Install Playwright browsers** (only needed the first time):
+
+   ```bash
+   yarn next:playwright-install
+   ```
+
+2. **Build wallet cache**: Set up the Synpress cache for MetaMask integration
+
+   ```bash
+   yarn next:cache-synpress
+   ```
+
+3. **Database running**: Make sure your Postgres database is up and seeded
+   ```bash
+   docker compose up -d
+   yarn drizzle-kit migrate
+   yarn db:seed
+   ```
+
+> **Note**: The tests will automatically start the dev server, so you don't need to run it manually.
+
+### Troubleshooting
+
+#### Cache Issues
+
+If you encounter an error like `Error: Cache for 08a20e3c7fc77e6ae298 does not exist. Create it first!`, you need to rename your cache folder:
+
+1. Navigate to `packages/nextjs/.cache-synpress/`
+2. Rename the existing cache folder to match the error message (e.g., rename `532f685e346606c2a803` to `08a20e3c7fc77e6ae298`), or use this command from the root folder:
+
+```
+mv packages/nextjs/.cache-synpress/532f685e346606c2a803 packages/nextjs/.cache-synpress/08a20e3c7fc77e6ae298
+```
+
+#### User Registration Issues
+
+Since tests register a test user, you may need to reset the database between test runs:
+
+```bash
+yarn db:seed
+```
+
+This will clear existing data and reseed the database with fresh test data.

package.json

@@ -44,6 +44,10 @@
     "precommit": "lint-staged",
     "start": "yarn workspace @se-2/nextjs dev",
     "test": "yarn hardhat:test",
+    "next:playwright-install": "yarn workspace @se-2/nextjs exec playwright install --with-deps chromium",
+    "next:test": "yarn workspace @se-2/nextjs test",
+    "next:test-ui": "yarn workspace @se-2/nextjs test-ui",
+    "next:cache-synpress": "yarn workspace @se-2/nextjs cache-synpress",
     "vercel": "yarn workspace @se-2/nextjs vercel",
     "vercel:login": "yarn workspace @se-2/nextjs vercel:login",
     "vercel:yolo": "yarn workspace @se-2/nextjs vercel:yolo",

packages/nextjs/.gitignore

@@ -38,3 +38,13 @@ yarn-error.log*
 
 # database
 services/database/seed.data.ts
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# Synpress
+.cache-synpress/

packages/nextjs/app/_components/RegisterUser.tsx

@@ -40,7 +40,10 @@ export const RegisterUser = () => {
       </button>
 
       {showTooltip && (
-        <div className="absolute top-full left-[-250px] mt-2 p-8 w-64 md:w-[290px] bg-base-200 rounded-xl shadow-lg border border-base-300 z-10 flex flex-col items-center text-center">
+        <div
+          data-testid="register-user-tooltip"
+          className="absolute top-full left-[-250px] mt-2 p-8 w-64 md:w-[290px] bg-base-200 rounded-xl shadow-lg border border-base-300 z-10 flex flex-col items-center text-center"
+        >
           <h3 className="text-lg font-bold mb-1">Register as a builder</h3>
           <p className="m-0 mb-4 text-sm font-light text-neutral">
             Sign a message with your wallet to create a builder profile.
@@ -57,6 +60,7 @@ export const RegisterUser = () => {
             className="flex items-center justify-center py-1.5 lg:py-2 px-3 lg:px-4 border-2 border-primary rounded-full bg-base-300 hover:bg-base-200 transition-colors cursor-pointer mt-4 text-sm w-full"
             onClick={() => handleRegister({ referrer: storedReferrer, originalUtmParams: parsedUtmParams })}
             disabled={isRegistering}
+            data-testid="register-user-tooltip-button"
           >
             {isRegistering ? (
               <span className="loading loading-spinner loading-sm"></span>

packages/nextjs/app/api/builds/upload-img/route.ts

@@ -4,6 +4,11 @@ import { bucket } from "~~/services/firebase";
 
 export async function POST(request: NextRequest) {
   try {
+    // Check if Firebase is available
+    if (!bucket) {
+      return NextResponse.json({ error: "File upload service unavailable" }, { status: 503 });
+    }
+
     if (!request.body) {
       return NextResponse.json({ error: "No request body" }, { status: 400 });
     }

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx

@@ -58,7 +58,7 @@ export const AddressInfoDropdown = ({
           className="btn btn-secondary min-h-0 py-1 lg:py-2 px-2 border-2 !border-primary shadow-md dropdown-toggle gap-0 !h-auto"
         >
           <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
-          <span className="ml-2 mr-1 text-sm lg:text-base font-medium">
+          <span className="ml-2 mr-1 text-sm lg:text-base font-medium" data-testid="account-address-or-ens">
             {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}
           </span>
           <ChevronDownIcon className="h-6 w-4" />

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx

@@ -58,6 +58,7 @@ export const RainbowKitCustomConnectButton = () => {
             <button
               className="flex items-center py-1.5 lg:py-2 px-3 lg:px-4 border-2 border-primary rounded-full bg-base-300 hover:bg-base-200 transition-colors cursor-pointer"
               onClick={openConnectModal}
+              data-testid="connect-button"
               type="button"
             >
               Connect <span className="hidden md:inline-block md:ml-1">Wallet</span>

packages/nextjs/package.json

@@ -13,6 +13,9 @@
     "lint": "next lint",
     "serve": "next start",
     "start": "next dev",
+    "test": "playwright test",
+    "cache-synpress": "yarn exec synpress",
+    "test-ui": "playwright test --ui",
     "vercel": "vercel --build-env YARN_ENABLE_IMMUTABLE_INSTALLS=false --build-env ENABLE_EXPERIMENTAL_COREPACK=1 --build-env VERCEL_TELEMETRY_DISABLED=1",
     "vercel:login": "vercel login",
     "vercel:yolo": "vercel --build-env YARN_ENABLE_IMMUTABLE_INSTALLS=false --build-env ENABLE_EXPERIMENTAL_COREPACK=1 --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true --build-env VERCEL_TELEMETRY_DISABLED=1"
@@ -57,6 +60,8 @@
     "zustand": "~5.0.0"
   },
   "devDependencies": {
+    "@playwright/test": "1.48.2",
+    "@synthetixio/synpress": "4.0.10",
     "@tailwindcss/typography": "^0.5.16",
     "@trivago/prettier-plugin-sort-imports": "~4.3.0",
     "@types/mime-types": "^2.1.4",

packages/nextjs/playwright.config.ts

@@ -0,0 +1,62 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./test",
+  /* Run tests in files in parallel */
+  fullyParallel: false, // Synpress requires sequential execution
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: 1, // Synpress requires single worker
+  /* Timeout for each test */
+  timeout: 60 * 1000, // 60 seconds
+  /* Global timeout for the whole test run */
+  globalTimeout: process.env.CI ? 20 * 60 * 1000 : undefined, // 20 minutes in CI
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: process.env.CI
+    ? [["github"], ["html", { outputFolder: "playwright-report", open: "never" }], ["list"]]
+    : [["html", { outputFolder: "playwright-report", open: "never" }], ["list"]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || "http://localhost:3000",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+    /* Record video on failure in CI */
+    // video: process.env.CI ? "retain-on-failure" : "off",
+    /* Take screenshot on failure */
+    screenshot: "only-on-failure",
+    /* Action timeout */
+    actionTimeout: 30 * 1000, // 30 seconds
+    /* Navigation timeout */
+    navigationTimeout: 30 * 1000, // 30 seconds
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: process.env.CI ? "yarn serve" : "yarn start",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+  },
+});

packages/nextjs/services/database/scripts/update-onchain-data.ts

@@ -9,7 +9,11 @@ import { fetchOnchainData } from "~~/services/onchainData";
 
 dotenv.config({ path: path.resolve(__dirname, "../../../.env.development") });
 
-if (!process.env.POSTGRES_URL || !process.env.NEXT_PUBLIC_ALCHEMY_API_KEY || !process.env.ZERION_API_KEY) {
+if (
+  !process.env.POSTGRES_URL ||
+  !process.env.NEXT_PUBLIC_ALCHEMY_API_KEY ||
+  (!process.env.CI && !process.env.ZERION_API_KEY)
+) {
   console.error(
     "Error: POSTGRES_URL, NEXT_PUBLIC_ALCHEMY_API_KEY, or ZERION_API_KEY environment variables are not set",
   );