Add golden master test

Author: ArneLimburg

.devcontainer/Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:next
+FROM mcr.microsoft.com/playwright:v1.50.0-noble
 RUN apt-get update && apt-get install -y wget apt-transport-https gnupg\
     && wget -O - https://packages.adoptium.net/artifactory/api/gpg/key/public | apt-key add -\
     && echo "deb https://packages.adoptium.net/artifactory/deb $(awk -F= '/^VERSION_CODENAME/{print$2}' /etc/os-release) main" | tee /etc/apt/sources.list.d/adoptium.list\

.devcontainer/devcontainer.json

@@ -10,21 +10,20 @@
       "mavenVersion": "3.8.6",
       "installGradle": "false"
     },
-    "docker-in-docker": {
-      "version": "latest",
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {
       "dockerDashComposeVersion": "v2"
     }
   },
-  "containerEnv": {
-    "DISPLAY": "host.docker.internal:0.0"
-  },
+  "postCreateCommand": "cd golden-master-tests && npm ci && npx playwright install --with-deps chromium",
+  "postStartCommand": "docker compose up -d && cd golden-master-tests && npm run test:ui:codespaces",
   "customizations": {
     "vscode": {
       "settings": {},
       "extensions": [
-        "streetsidesoftware.code-spell-checker"
+        "streetsidesoftware.code-spell-checker",
+        "ms-playwright.playwright"
       ]
     }
-  }
+  },
+  "forwardPorts": [80, 4001, 8080, 8832]
 }
-

.github/workflows/build.yaml

@@ -22,8 +22,38 @@ jobs:
       - name: Build with Docker
         run: docker compose build
 
-      - name: Start with Docker
+      - name: Start Docker services
         run: docker compose up -d
 
-      - name: Stop Docker Containers
+      - name: Wait for online shop
+        run: until curl -sf http://localhost/index.html; do sleep 2; done
+        timeout-minutes: 2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+          cache-dependency-path: golden-master-tests/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: golden-master-tests
+
+      - name: Check formatting
+        run: npm run format:check
+        working-directory: golden-master-tests
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+        working-directory: golden-master-tests
+
+      - name: Run Playwright tests
+        run: npm test
+        working-directory: golden-master-tests
+        env:
+          ONLINE_SHOP_URL: http://localhost
+
+      - name: Stop Docker services
+        if: always()
         run: docker compose down

README.md

@@ -29,5 +29,41 @@ um in die Datenbank zu schauen.
 
 ## Aufgabe
 
-Navigieren Sie zum Warenkorb und schauen Sie sich dann den Inhalt der Tabelle `tab_order` an.
-Navigieren Sie durch den Checkout-Prozess und sehen Sie, wie sich der Inhalt der Tabelle ändert.
+Die Datei `checkout.spec.ts` im Ordner `golden-master-tests/tests`
+enthält einen UI-Test mit dem Framework Playwright.
+Führen Sie den Test aus und schauen Sie, dass er grün ist.
+Überlegen Sie, welche weiteren Pfade durch den Bestellabschluss es geben könnte.
+Schreiben Sie Tests für diese Fälle.
+Schreiben Sie auch Tests für das Pflegen der Adressen in der Kundenverwaltung.
+
+## Tests ausführen
+
+### Lokal
+
+```
+cd golden-master-tests
+npm install
+npx playwright install --with-deps chromium
+npm test
+```
+
+Die Playwright UI lässt sich lokal folgendermaßen starten:
+
+```
+npm run test:ui
+```
+
+### GitHub Codespaces
+
+Im Codespace sind alle Abhängigkeiten bereits installiert. Die Playwright VS Code Extension
+ist vorinstalliert und ermöglicht das Ausführen und Debuggen der Tests direkt im Editor.
+
+Alternativ lässt sich die Playwright UI über das Terminal starten:
+
+```
+cd golden-master-tests
+npm run test:ui:codespaces
+```
+
+Anschließend öffnet GitHub Codespaces automatisch einen Dialog zum Weiterleiten von Port `8832`.
+Die Playwright UI ist dann über den angezeigten Link im Browser erreichbar.

golden-master-tests/.gitignore

@@ -0,0 +1,5 @@
+/target/
+/node_modules/
+/dist/
+/test-results/
+/playwright-report/

golden-master-tests/global-setup.ts

@@ -0,0 +1,4 @@
+export default async function globalSetup() {
+  process.env.ONLINE_SHOP_URL =
+    process.env.ONLINE_SHOP_URL ?? "http://localhost";
+}

golden-master-tests/global-teardown.ts

@@ -0,0 +1 @@
+export default async function globalTeardown() {}