👷 Improvement: fix CI test in github actions

.github/actions/build/action.yml

@@ -0,0 +1,17 @@
+name: 🏗️ Build site
+description: Build cache for Next.js App
+
+runs:
+  using: composite
+  steps:
+    - name: ⚡️ Restore Build
+      uses: actions/cache@v4
+      id: cache-build
+      with:
+        path: .next
+        key: ${{ github.sha }}-build # Key by commit SHA
+
+    - name: 🏗️ Build Site
+      if: steps.cache.outputs.cache-hit != 'true'
+      shell: bash
+      run: pnpm run build

.github/actions/clean-build-cache/action.yml

@@ -0,0 +1,24 @@
+name: Clean Cache Build
+description: Clean cache for Next.js builds
+
+inputs:
+  github-token:
+    description: "GitHub token"
+    required: true
+
+runs:
+  using: composite
+  permissions:
+    contents: write
+    actions: write
+  steps:
+    - name: 🫧 Cleanup Cache
+      shell: bash
+      run: |
+        echo "🧹 Deleting caches..."
+
+        gh cache delete ${{ github.sha }}-build
+
+        echo "✅ Cache deleted successfully."
+      env:
+        GH_TOKEN: ${{ inputs.github-token }}

.github/actions/clean-cache/action.yml

@@ -0,0 +1,38 @@
+name: Clean Cache
+description: Clean cache for Next.js builds
+
+inputs:
+  github-token:
+    description: "GitHub token"
+    required: true
+
+runs:
+  using: composite
+  steps:
+    - name: 🫧 Cleanup Cache
+      shell: bash
+      run: |
+        REF=refs/heads/${{github.ref_name}}
+
+        if [ ${{github.event_name}} = "review_requested"]
+        then
+            REF=refs/pull/${{github.event.number}}/merge
+        fi
+
+
+        echo "⏱️ Fetching list of cache key"
+        cacheKeysForPR=$(gh cache list -r $REF | cut -f 1 )
+
+        ## Setting this to not fail the workflow while deleting cache keys. 
+        set +e
+
+        echo "🧹 Deleting caches..."
+
+        for cacheKey in $cacheKeysForPR
+        do
+          gh cache delete $cacheKey
+        done
+
+        echo "✅ Cache deleted successfully."
+      env:
+        GH_TOKEN: ${{ inputs.github-token }}

.github/actions/init-pnpm/action.yml

@@ -0,0 +1,23 @@
+name: 🧶 Init Node.js
+
+description: "Set up Node.js and install dependencies"
+
+runs:
+  using: "composite"
+  steps:
+    - name: Install Pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: latest
+
+    - name: ⚡️ Restore Cache node_modules
+      id: cache
+      uses: actions/cache@v4
+      with:
+        path: node_modules
+        key: node_modules-${{hashFiles('pnpm-lock.yaml')}}
+
+    - name: 📦 Install Dependencies
+      if: steps.cache.outputs.cache-hit != 'true'
+      run: pnpm install --frozen-lockfile
+      shell: bash

.github/workflows/clean-cache.yml

@@ -0,0 +1,21 @@
+name: 🫧 Cleanup Cache
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  delete-cache:
+    runs-on: ubuntu-latest
+    name: "🫧 Clean Cache"
+    permissions:
+      contents: write
+      actions: write
+    steps:
+      - name: ✨ Checkout
+        uses: actions/checkout@v4
+
+      - name: 🫧 Cleanup Cache
+        uses: ./.github/actions/clean-cache
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/playwright.yml

@@ -1,29 +1,49 @@
-name: Playwright Tests
+name: 🧪 Playwright Tests
+
 on:
   push:
-    branches: [main, master]
+    branches: [main]
   pull_request:
-    branches: [main, master]
+    branches: [main]
+
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+
+      - name: 🧶 Set up Node.js
+        uses: ./.github/actions/init-pnpm
+
+      - name: 🏗️ Build app
+        uses: ./.github/actions/build
+
+      - name: ⚡️ Restore Cache Playwright
+        id: cache-playwright
+        uses: actions/cache@v4
         with:
-          node-version: lts/*
-      - name: Install bun
-        uses: oven-sh/setup-bun@v1
-      - name: Install dependencies
-        run: bun install
-      - name: Install Playwright Browsers
+          path: |
+            ~/.cache/ms-playwright
+          key: "${{ runner.os }}-playwright-${{hashFiles('pnpm-lock.yaml')}}"
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: 🌐 Install Playwright Browsers
+        if: steps.cache-playwright.outputs.cache-hit != 'true'
         run: npx playwright install --with-deps
-      - name: Run Playwright tests
-        run: npx playwright test
+
+      - name: 🧪 Run Playwright tests
+        run: pnpm run test:e2e-ci
+
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
+
+      - name: 🫧 Clean Build Cache
+        uses: ./.github/actions/clean-build-cache
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}

package.json

@@ -11,6 +11,7 @@
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage",
     "test:e2e": "npx playwright test",
+    "test:e2e-ci": "start-server-and-test start 3000 'npx playwright test'",
     "prepare": "husky"
   },
   "dependencies": {
@@ -35,6 +36,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-tailwindcss": "^0.6.8",
+    "start-server-and-test": "^2.0.9",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",
     "vitest": "^2.1.4"