Merge pull request #9 from digitalservicebund/enable-e2e-tests

Enable e2e tests

.github/workflows/frontend-jobs.yml

@@ -104,60 +104,43 @@ jobs:
         if: ${{ failure() && github.ref == 'refs/heads/main' }}
         with:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
-      #
-      #
-  # Disabled as these got stuck somehow
-  #
-  # e2e-tests-frontend:
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - name: Setup Node
-  #       uses: actions/setup-node@v4
-  #       with:
-  #         node-version-file: ./frontend/package.json
-  #         cache: npm
-  #         cache-dependency-path: ./frontend/package-lock.json
-  #     - name: Cache node_modules
-  #       uses: actions/cache@v4
-  #       id: node-modules-cache
-  #       with:
-  #         path: |
-  #           ./frontend/node_modules
-  #         key: modules-${{ hashFiles('./frontend/package-lock.json') }}
-  #     - name: Install dependencies
-  #       if: steps.node-modules-cache.outputs.cache-hit != 'true'
-  #       run: |
-  #         npm ci
-  #       working-directory: ./frontend
-  #     - name: Get Playwright version
-  #       working-directory: ./frontend
-  #       run: echo "PLAYWRIGHT_VERSION=$(jq -r '.packages["node_modules/@playwright/test"].version' package-lock.json)" >> $GITHUB_ENV
-  #     - name: Cache browser binaries
-  #       id: cache-browser-binaries
-  #       uses: actions/cache@v4
-  #       with:
-  #         path: ~/.cache/ms-playwright
-  #         key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
-  #     - name: Install playwright browsers
-  #       if: steps.cache-browser-binaries.outputs.cache-hit != 'true'
-  #       run: |
-  #         npx --yes playwright install --with-deps
-  #     - name: e2e tests
-  #       run: |
-  #         npm run test:e2e
-  #       working-directory: ./frontend
-  #     # TODO: enable later
-  #     #
-  #     # - name: Send status to Slack
-  #     #   # Third-party action, pin to commit SHA!
-  #     #   # See https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions
-  #     #   uses: digitalservicebund/notify-on-failure-gha@814d0c4b2ad6a3443e89c991f8657b10126510bf # v1.5.0
-  #     #   if: ${{ failure() && github.ref == 'refs/heads/main' }}
-  #     #   with:
-  #     #     SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
-  #
-  #
+
+  e2e-tests-frontend:
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.49.1-noble
+      options: --user 1001
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ./frontend/package.json
+          cache: npm
+          cache-dependency-path: ./frontend/package-lock.json
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        id: node-modules-cache
+        with:
+          path: |
+            ./frontend/node_modules
+          key: modules-${{ hashFiles('./frontend/package-lock.json') }}
+      - name: Install dependencies
+        if: steps.node-modules-cache.outputs.cache-hit != 'true'
+        run: |
+          npm ci
+        working-directory: ./frontend
+      - name: e2e tests
+        run: |
+          npm run test:e2e
+        working-directory: ./frontend
+      - name: Send status to Slack
+        # Third-party action, pin to commit SHA!
+        # See https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions
+        uses: digitalservicebund/notify-on-failure-gha@814d0c4b2ad6a3443e89c991f8657b10126510bf # v1.5.0
+        if: ${{ failure() && github.ref == 'refs/heads/main' }}
+        with:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
 
   check-code-quality-with-sonarqube:
     runs-on: ubuntu-latest

frontend/playwright.config.ts

@@ -12,14 +12,15 @@ import { defineConfig, devices } from '@playwright/test'
  */
 export default defineConfig({
   testDir: './e2e',
+  fullyParallel: true, // ignored in CI, as workers are 1, there
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
   expect: {
     /**
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000,
+    timeout: 5 * 1000,
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
@@ -31,10 +32,13 @@ export default defineConfig({
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
+    viewport: { width: 1280, height: 720 },
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 0,
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: process.env.CI ? 'http://localhost:4173' : 'http://localhost:5173',
+    actionTimeout: 5 * 1000,
+    /* Base URL to use in actions like `await page.goto('/')`. 
+    needs to be in sync with "webserver" config below*/
+    // baseURL: process.env.CI ? 'http://localhost:4173' : 'http://localhost:5173',
+    baseURL: 'http://localhost:5173',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -103,8 +107,10 @@ export default defineConfig({
      * Use the preview server on CI for more realistic testing.
      * Playwright will re-use the local server if there is already a dev-server running.
      */
-    command: process.env.CI ? 'npm run preview' : 'npm run dev',
-    port: process.env.CI ? 4173 : 5173,
+    // command: process.env.CI ? 'npm run preview' : 'npm run dev',
+    command: 'npm run dev',
+    // port: process.env.CI ? 4173 : 5173,
+    port: 5173,
     reuseExistingServer: !process.env.CI,
   },
 })