Add CI: Setup E2E using Playwright

.github/workflows/e2e.yml

@@ -0,0 +1,83 @@
+name: End-to-End Tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  e2e-testing:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.19.4' 
+
+    - name: Install Dependencies
+      run: |
+        npm install -g wait-on
+        npm ci 
+        cd client && npm ci
+        cd ../server && npm ci
+
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+
+    - name: Start Express Server
+      env:
+        SUPABASE_URL: ${{ secrets.TEST_SUPABASE_URL }}
+        SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.TEST_SUPABASE_SERVICE_ROLE_KEY }}
+        PORT: 5000
+      run: |
+        cd server
+        npm run start:ci-test & 
+        wait-on http://localhost:5000
+
+    - name: Start React Client
+      env:
+        REACT_APP_SUPABASE_URL: ${{ secrets.TEST_SUPABASE_URL }}
+        REACT_APP_SUPABASE_ANON_KEY: ${{ secrets.TEST_SUPABASE_ANON_KEY }}
+        PORT: 3000
+      run: |
+        cd client
+        npm run start:ci-test & 
+        wait-on http://localhost:3000
+
+    - name: Run Playwright Tests
+      run: npx playwright test
+      env:
+        SUPABASE_URL: ${{ secrets.TEST_SUPABASE_URL }}
+        SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.TEST_SUPABASE_SERVICE_ROLE_KEY }}
+
+    - name: Upload HTML report to Azure
+      if: always() 
+      shell: bash
+      run: |
+        # Creates a unique folder name for this specific test run
+        REPORT_DIR='run-${{ github.run_id }}-${{ github.run_attempt }}'
+
+        # Uploads the report to the $web container
+        azcopy cp --recursive "./playwright-report/*" "https://kintree2026.blob.core.windows.net/\$web/$REPORT_DIR"
+
+        # Prints a clickable link in the GitHub Actions logs
+        echo "::notice title=HTML report url::https://kintree2026.z13.web.core.windows.net/$REPORT_DIR/index.html"
+      env:
+        AZCOPY_AUTO_LOGIN_TYPE: SPN
+        AZCOPY_SPA_APPLICATION_ID: '${{ secrets.AZCOPY_SPA_APPLICATION_ID }}'
+        AZCOPY_SPA_CLIENT_SECRET: '${{ secrets.AZCOPY_SPA_CLIENT_SECRET }}'
+        AZCOPY_TENANT_ID: '${{ secrets.AZCOPY_TENANT_ID }}'
+
+    - name: Upload Playwright Report to GitHub Artifacts
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -79,6 +79,7 @@ web_modules/
 .env
 .env.development.local
 .env.test.local
+.env.test
 .env.production.local
 .env.local
 
@@ -138,3 +139,10 @@ dist
 .yarn/install-state.gz
 .pnp.*
 client/src/components/AddToTree/sample-data.json
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

README.md

@@ -39,8 +39,35 @@ Then, from the same directory, run the following command to run the server/API:
 
 `node server.js`
 
+### Testing
+
+This project uses a separate test database to run tests against. Therefore, make sure to paste in the proper env variables.
+
+Paste `TEST_SUPABASE_URL` and `TEST_SUPABASE_SERVICE_ROLE_KEY` into a .env.test file in the root directory of the project. 
+
+Additionally, add `REACT_APP_SUPABASE_URL` and `REACT_APP_SUPABASE_ANON_KEY` to a .env.test file in the /client/ directory. 
+
+Finally, `SUPABASE_URL` and `SUPABASE_SERVICE_ROLE_KEY` should be added to the .env.test file in the /server/ directory as well.
+
+Tree structure:
+```
+/SeniorProject_KinTree
+  /client
+    .env.test
+  /server
+    .env.test
+  .env.test
+```
+
+Move into the /server/ directory and run `npm run start:dev-test` to setup the auth storage and test environment.
+
+Cd into the /client/ directory and run `npm run start:dev-test` to start the frontend in test mode.
+
+Then, navigate back to the /SeniorProject_KinTree/ root directory and run:
+
+`npm run test`
 ### Emails setup
 
 Follow the steps on [sending emails with Resend](https://github.com/resend/resend-examples/tree/main/express-resend-examples) to verify your domain and obtain your RESEND_API_KEY to store in `.env`.
 
-Set EMAIL_FROM in `.env`.
+Set EMAIL_FROM in `.env`.