feat(ci): run ui tests in ci

Signed-off-by: phanirithvij <phanirithvij2000@gmail.com>

Author: phanirithvij

.github/workflows/netlify-deploy.yml

@@ -17,6 +17,8 @@ jobs:
   deploy-preview:
     name: Push Preview to Netlify
     runs-on: ubuntu-latest
+    outputs:
+      PREVIEW_URL: ${{ steps.deploy.outputs.PREVIEW_URL }}
     permissions:
       deployments: write # deployments
       statuses: write # commit statuses
@@ -63,6 +65,7 @@ jobs:
         run: npm install -g netlify-cli
 
       - name: Deploy to Netlify
+        id: deploy
         if: env.PR_NUMBER != ''
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -85,6 +88,7 @@ jobs:
             echo "DEPLOY_URL=$DEPLOY_URL"
             echo "DEPLOY_ID=$DEPLOY_ID"
           } >>"$GITHUB_ENV"
+          echo "PREVIEW_URL=$PREVIEW_URL" >> "$GITHUB_OUTPUT"
 
       - name: Post PR Comment
         if: env.PR_NUMBER != ''
@@ -222,3 +226,27 @@ jobs:
             -f state="success" \
             -f environment_url="${{ env.DEPLOY_URL }}" \
             -f description="Preview is ready!"
+
+  e2e-staging:
+    name: UI tests on staging deployment
+    runs-on: ubuntu-latest
+    needs: deploy-preview
+    if: needs.deploy-preview.result == 'success'
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ github.event.workflow_run.head_sha }}
+
+      - name: Install Nix
+        uses: cachix/install-nix-action@19effe9fe722874e6d46dd7182e4b8b7a43c4a99 # v31.10.0
+
+      - uses: cachix/cachix-action@v16
+        with:
+          name: ngi-forge
+
+      - name: Run Playwright tests
+        run: |
+          nix develop -c playwright test -c ui/tests/e2e
+        env:
+          BASE_URL: ${{ needs.deploy-preview.outputs.PREVIEW_URL }}

.github/workflows/test.yml

@@ -34,6 +34,25 @@ jobs:
       - name: Run checks
         run: nix flake check --accept-flake-config
 
+  e2e-local:
+    name: UI tests local
+    runs-on: ubuntu-latest
+    needs: test
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v6
+
+      - name: Install Nix
+        uses: cachix/install-nix-action@19effe9fe722874e6d46dd7182e4b8b7a43c4a99 # v31.10.0
+
+      - uses: cachix/cachix-action@v16
+        with:
+          name: ngi-forge
+
+      - name: Run Playwright tests
+        run: |
+          nix develop -c playwright test -c ui/tests/e2e
+
   build-preview-ui:
     name: Build UI artifact
     runs-on: ubuntu-latest

flake/develop/default.nix

@@ -26,6 +26,7 @@
         self'.packages.elm-watch
         self'.packages.elm2nix
         playwright-test
+        playwright-driver.browsers
         systemd-manager-tui
         watchman
         podman-compose
@@ -39,6 +40,20 @@
         (devShell.extend (
           final: prev: {
             packages = prev.packages ++ devPkgs;
+            env = (prev.env or [ ]) ++ [
+              {
+                name = "PLAYWRIGHT_BROWSERS_PATH";
+                value = "${pkgs.playwright-driver.browsers}";
+              }
+              {
+                name = "PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD";
+                value = "1";
+              }
+              {
+                name = "PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS";
+                value = "1";
+              }
+            ];
           }
         )).finalPackage;
     };

flake/develop/devshell.nix

@@ -67,6 +67,7 @@ let
             "commands"
             "packages"
             "packagesFrom"
+            "env"
 
             "devshell"
             "bash"