Playwright test cases

GUI/.gitignore

@@ -28,3 +28,8 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Playwright test artifacts
+tests/screenshots/
+test-results/
+playwright-report/

GUI/package.json

@@ -8,7 +8,14 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "tsc --noEmit && eslint \"./src/**/*.{js,ts,tsx}\"",
-    "prettier": "prettier --write \"{,!(node_modules)/**/}*.{ts,tsx,js,json,css,less,scss}\""
+    "prettier": "prettier --write \"{,!(node_modules)/**/}*.{ts,tsx,js,json,css,less,scss}\"",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:headed": "playwright test --headed",
+    "test:debug": "playwright test --debug",
+    "test:chrome": "playwright test --project=chromium",
+    "test:chrome:headed": "playwright test --project=chromium --headed",
+    "test:chrome:debug": "playwright test --project=chromium --debug"
   },
   "dependencies": {
     "@buerokratt-ria/styles": "^0.0.1",
@@ -69,6 +76,7 @@
     "zustand": "^4.4.4"
   },
   "devDependencies": {
+    "@playwright/test": "^1.56.1",
     "@types/howler": "^2.2.11",
     "@types/lodash": "^4.14.191",
     "@types/lodash.debounce": "^4.0.7",

GUI/playwright.config.ts

@@ -0,0 +1,54 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * @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: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /* Take screenshot on failure */
+    screenshot: 'only-on-failure',
+
+    /* Record video on failure */
+    video: 'retain-on-failure',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+
+  /* Uncomment to run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run dev',
+  //   url: 'http://localhost:3001',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

GUI/tests/README.md

@@ -1 +1,34 @@
-## Contains both unit and integration test for GUI
+## Contains both unit and integration test for GUI
+
+### Playwright E2E Tests
+
+This directory contains end-to-end tests using Playwright for the RAG Module GUI.
+
+#### Setup
+
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+2. Install Playwright browsers:
+   ```bash
+   npx playwright install
+   ```
+
+#### Running Tests
+
+- Run all tests: `npm test`
+- Run tests with UI: `npm run test:ui`
+- Run tests in headed mode: `npm run test:headed`
+- Debug tests: `npm run test:debug`
+
+#### Test Files
+
+- `auth.spec.ts` - Authentication flow tests (requires auth service running)
+- `basic-auth.spec.ts` - Basic authentication tests (can run standalone)
+
+#### Authentication Service
+
+The tests expect an authentication service running at `http://localhost:3004/et/dev-auth` (from .env.development).
+If the service is not running, some tests will gracefully handle the failure and run alternative scenarios.