Base setup for Playwright tests

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm run test:e2e:headless
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -1,2 +1,8 @@
 /node_modules
 /build
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -45,7 +45,10 @@
     "start": "vite",
     "build": "tsc && eslint . --max-warnings=0 && vite build",
     "serve": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "test:serve": "vite build && vite preview",
+    "test:e2e": "playwright test --ui",
+    "test:e2e:headless": "playwright test"
   },
   "browserslist": {
     "production": [
@@ -61,6 +64,7 @@
   },
   "devDependencies": {
     "@opencast/eslint-config-ts-react": "^0.3.0",
+    "@playwright/test": "^1.52.0",
     "@redux-devtools/extension": "^3.3.0",
     "@types/lodash": "^4.17.16",
     "@types/node": "^22.15.18",

playwright.config.ts

@@ -0,0 +1,78 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: "./webtests",
+	/* 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_TEST_BASE_URL || "http://localhost:3000",
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: "on-first-retry",
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop Chrome"] },
+		},
+
+		{
+			name: "firefox",
+			use: { ...devices["Desktop Firefox"] },
+		},
+
+		{
+			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" },
+		},
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: "npm start",
+		timeout: 120 * 1000, // increase the timeout to 120s (from default 60s) for the server to start
+	},
+});

webtests/header.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect, type Page } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+});
+test.describe("Header", () => {
+    test('check existence of header items', async ({ page }) => {
+        await expect(page.getByRole('banner')).toBeVisible();
+        await expect(page.locator('#lang-dd')).toBeVisible();
+        await expect(page.locator('div:nth-child(2)').first()).toBeVisible();
+        await expect(page.locator('#nav-dd-container > div:nth-child(3)')).toBeVisible();
+        await expect(page.locator('#info-dd')).toBeVisible();
+        await expect(page.locator('#help-dd')).toBeVisible();
+    });
+
+    test('check language change dropdown', async ({ page }) => {
+        test.setTimeout(120_000);
+        await page.goto("/#/recordings/recordings");
+        await page.locator('#lang-dd').click();
+        await page.getByRole('button', { name: 'English (US)' }).click();
+        await expect(page.locator('h1')).toContainText('Locations', {timeout: 120_000}); // the full page reload after changing the color takes much longer on the firefox browser
+        await page.locator('#lang-dd').click();
+        await page.getByRole('button', { name: 'Deutsch' }).click();
+        await expect(page.locator('h1')).toContainText('Standorte', {timeout: 120_000});
+    });
+});

webtests/writing_tests.md

@@ -0,0 +1,53 @@
+# Frontend End-to-End Testing with Playwright
+
+## Overview
+
+Playwright is a testing framework that allows automated testing of web applications across multiple browsers (Chromium, Firefox, WebKit).
+
+## Setup Browsers
+
+There are multiple browsers setup in `../playwright.config.ts`:
+
+General browsers:
+
+- Desktop Chromium
+- Desktop Firefox
+- Desktop Safari
+
+Branded Browsers:
+
+- Microsoft Edge
+- Google Chrome
+
+## Basic Structure
+
+1. Import Playwright test modules
+2. Define test scenarios with `test()` function
+3. Use page interactions (click, fill, etc.)
+4. Assert expected outcomes
+
+## Developing tests
+
+### Installation
+
+Besides the dependencies in the ```package.json``` file which need to be install to run the webserver at all, playwright has browser dependencies as well. To install the extra broser dependencies, run: ```npx playwright install --with-deps```
+
+### Run tests locally
+
+To execute the tests locally, there are multiple options:
+
+**Running the tests headless:**
+Execute `npm run test:e2e:headless` or `npx playwright test` in the terminal.
+
+**Running the tests in the UI:**
+Execute `npm run test:e2e` or `npx playwright test --ui` in the terminal.
+
+In both cases you can add `--trace on` to get a trace view of the tests.
+
+### Developing
+
+Please have a look at the official playwright documentation on how to develop new tests. 
+
+## References
+
+- [Playwright Documentation](https://playwright.dev/docs/intro)