project: Integrate playwright for E2E tests

.changeset/fresh-trainers-sleep.md

@@ -0,0 +1,5 @@
+---
+"e2e-tests": patch
+---
+
+Add end to end tests for `Event` type field report

.changeset/smart-cars-promise.md

@@ -0,0 +1,7 @@
+---
+"e2e-tests": major
+---
+
+- Implemented Playwright for automated end-to-end testing in [#345](https://github.com/IFRCGo/go-web-app/issues/345)
+  - CI Integration: Integrated Playwright testing into the GitHub Actions CI
+  - Field Report e2e Tests: Implemented Playwright-based end-to-end tests for the Field Report module

.github/workflows/playwright.yml

@@ -0,0 +1,114 @@
+name: Playwright
+
+env:
+  PLAYWRIGHT_APP_BASE_URL: ${{ vars.PLAYWRIGHT_APP_BASE_URL }}
+  PLAYWRIGHT_USER_EMAIL: ${{ secrets.PLAYWRIGHT_USER_EMAIL }}
+  PLAYWRIGHT_USER_PASSWORD: ${{ secrets.PLAYWRIGHT_USER_PASSWORD }}
+
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - develop
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "playwright"
+  cancel-in-progress: false
+
+jobs:
+  typecheck-lint:
+    name: Typecheck & Lint
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: packages/e2e-tests
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run Typecheck
+        run: pnpm typecheck
+      - name: Run Biome Check
+        run: pnpm biome:ci
+  test-e2e:
+    name: E2E Tests
+    environment: 'test'
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: packages/e2e-tests
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run Playwright Tests
+        run: pnpm exec playwright test
+      - uses: actions/upload-artifact@v4
+        id: playwright-report-artifact
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: ./packages/e2e-tests/playwright-report/
+      - uses: actions/upload-pages-artifact@v3
+        id: playwright-report-github-pages-artifact
+        if: ${{ !cancelled() }}
+        with:
+          name: github-pages
+          path: ./packages/e2e-tests/playwright-report/
+  deploy:
+    name: Deploy Playwright Test Report to GitHub Pages
+    needs: test-e2e
+    # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4
+      - name: Output Job Summary
+        run: |
+          if [ "${{ github.event_name }}" == "pull_request" ]; then
+            BRANCH=${{ github.head_ref }}
+          else
+            BRANCH=${{ github.ref_name }}
+          fi
+          echo "## 🚀 Playwright Test Run Summary 🚀">> $GITHUB_STEP_SUMMARY
+          echo "✅ Deployed to GitHub Pages Successful!" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "👤 **Triggered by**: @${{ github.actor }}" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "### 📄 Commit Info" >> $GITHUB_STEP_SUMMARY
+          echo "- **Branch**: $BRANCH" >> $GITHUB_STEP_SUMMARY
+          echo "- **Commit SHA**: ${{ github.sha }}" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "### 🔗 Links" >> $GITHUB_STEP_SUMMARY
+          echo "- 🌐 [View Test Results](https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }})" >> $GITHUB_STEP_SUMMARY

.gitignore

@@ -24,7 +24,6 @@ build-ssr
 *.njsproj
 *.sln
 *.sw?
-
 .env*
 !.env.example
 .eslintcache
@@ -41,3 +40,7 @@ storybook-static/
 
 # Helm
 .helm-charts/
+
+#tests
+test-results/
+

app/.env.example

@@ -0,0 +1,22 @@
+APP_TITLE=IFRC GO
+APP_ENVIRONMENT=testing
+APP_API_ENDPOINT=
+APP_ADMIN_URL=
+APP_SHOW_ENV_BANNER=
+
+# Mapbox
+APP_MAPBOX_ACCESS_TOKEN=
+
+# TinyMCE
+APP_TINY_API_KEY=
+
+# GO Risk Server
+APP_RISK_API_ENDPOINT=
+
+# Sentry
+APP_SENTRY_DSN=
+APP_SENTRY_TRACES_SAMPLE_RATE=
+APP_SENTRY_REPLAYS_SESSION_SAMPLE_RATE=
+APP_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE=
+# Google Analytics
+APP_GOOGLE_ANALYTICS_ID=

app/env.ts

@@ -15,6 +15,7 @@ export default defineConfig({
         }
         return value as ('production' | 'staging' | 'testing' | `alpha-${number}` | 'development' | 'APP_ENVIRONMENT_PLACEHOLDER');
     },
+    APP_BASE_URL: Schema.string.optional(),
     APP_API_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
     APP_ADMIN_URL: Schema.string.optional({ format: 'url', protocol: true }),
     APP_MAPBOX_ACCESS_TOKEN: Schema.string(),

knip.jsonc

@@ -10,7 +10,9 @@
         // TODO: need to fix issues before un-ignoring
         "packages/ui",
         // TODO: need to fix issues before un-ignoring
-        "packages/go-ui-storybook"
+        "packages/go-ui-storybook",
+        // TODO: need to fix issues before un-ignoring
+        "packages/e2e-tests"
     ],
     "workspaces": {
         "app": {

package.json

@@ -19,7 +19,8 @@
         "preview": "pnpm -F go-web-app preview",
         "storybook": "pnpm -F go-ui-storybook storybook",
         "build-storybook": "pnpm -F go-ui-storybook build-storybook",
-        "chromatic": "pnpm -F go-ui-storybook chromatic"
+        "chromatic": "pnpm -F go-ui-storybook chromatic",
+        "test:e2e": "pnpm -F e2e-tests test"
     },
     "engines": {
         "node": "20",

packages/e2e-tests/.env.example

@@ -0,0 +1,6 @@
+# Base URL for the application where Playwright will run tests
+PLAYWRIGHT_APP_BASE_URL=
+# User name of the test user for Playwright
+PLAYWRIGHT_USER_EMAIL=
+# Password of the test user for Playwright
+PLAYWRIGHT_USER_PASSWORD=

packages/e2e-tests/.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+playwright/.auth

packages/e2e-tests/biome.json

@@ -0,0 +1,25 @@
+{
+    "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+    "organizeImports": {
+        "enabled": true
+    },
+    "linter": {
+        "enabled": true,
+        "rules": {
+            "recommended": true
+        }
+    },
+    "javascript": {
+        "formatter": {
+            "indentStyle": "space",
+            "quoteStyle": "single",
+            "indentWidth": 4
+        }
+    },
+    "json": {
+        "formatter": {
+            "indentStyle": "space",
+            "indentWidth": 4
+        }
+    }
+}

packages/e2e-tests/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "e2e-tests",
+    "version": "0.0.1",
+    "description": "End-to-End (E2E) tests using Playwright for IFRC GO",
+    "main": "index.js",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/IFRCGo/go-web-app.git",
+        "directory": "packages/e2e-tests"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "1.7.3",
+        "@playwright/test": "^1.49.1",
+        "@types/node": "^20.14.11",
+        "typescript": "^5.7.2"
+    },
+    "scripts": {
+        "install": "playwright install",
+        "typecheck": "tsc --noEmit",
+        "test": "playwright test",
+        "format": "biome format ./tests/* ./utils/*",
+        "lint": "pnpm biome lint ./tests/* ./utils/*",
+        "biome:check": "biome check ./tests/* ./utils/*",
+        "biome:ci": "biome ci ./tests/* ./utils/*",
+        "biome:fix": "biome check --apply ./tests/* ./utils/*"
+    },
+    "dependencies": {
+        "@togglecorp/fujs": "^2.1.1",
+        "dotenv": "^16.4.5"
+    }
+}

packages/e2e-tests/playwright.config.ts

@@ -0,0 +1,96 @@
+import { defineConfig, devices } from '@playwright/test';
+import 'dotenv/config';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+    testDir: './tests',
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* 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: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: 'html',
+    /* 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_APP_BASE_URL,
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
+    },
+
+    /* Configure projects for major browsers */
+    projects: process.env.CI
+        ? [
+
+              {
+                  name: 'setup',
+                  testMatch: /.*\.setup\.ts/,
+              },
+              {
+                  name: 'chromium',
+                  use: { ...devices['Desktop Chrome'] },
+                  dependencies: ['setup'],
+              },
+
+              {
+                  name: 'firefox',
+                  use: { ...devices['Desktop Firefox'] },
+                  dependencies: ['setup'],
+              },
+
+              // FIXME: tests not working in webkit
+              // {
+              //     name: 'webkit',
+              //     use: { ...devices['Desktop Safari'] },
+              // },
+              /* Test against mobile viewports. */
+              // {
+              //   name: 'Mobile Chrome',
+              //   use: { ...devices['Pixel 5'] },
+              // },
+              // {
+              //   name: 'Mobile Safari',
+              //   use: { ...devices['iPhone 12'] },
+              // },
+
+              /* Test against branded browsers. */
+              // {
+              //   name: 'Microsoft Edge',
+              //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+              // },
+              // {
+              //   name: 'Google Chrome',
+              //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+              // },
+          ]
+        : [
+              // NOTE: WebKit is only supported on Debian and Ubuntu in Playwright.
+              {
+                  name: 'setup',
+                  testMatch: /.*\.setup\.ts/,
+              },
+              {
+                  name: 'chromium',
+                  use: { ...devices['Desktop Chrome'] },
+                  dependencies: ['setup'],
+              },
+
+              {
+                  name: 'firefox',
+                  use: { ...devices['Desktop Firefox'] },
+                  dependencies: ['setup'],
+              },
+          ],
+});

packages/e2e-tests/tests/auth.setup.ts

@@ -0,0 +1,20 @@
+import { test as setup } from '@playwright/test';
+import { login } from '#utils/auth';
+const authFile = 'playwright/.auth/user.json';
+
+/** @knipignore */
+setup('authenticate', async ({ page }) => {
+    if (
+        process.env.PLAYWRIGHT_USER_EMAIL &&
+        process.env.PLAYWRIGHT_USER_PASSWORD
+    ) {
+        await login(
+            page,
+            process.env.PLAYWRIGHT_USER_EMAIL,
+            process.env.PLAYWRIGHT_USER_PASSWORD,
+        );
+    }
+
+    // End of authentication steps.
+    await page.context().storageState({ path: authFile });
+});