feat(inspect): e2e tests

.github/workflows/geti-inspect.yaml

@@ -242,7 +242,7 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.57.0-jammy@sha256:6aca677c27a967caf7673d108ac67ffaf8fed134f27e17b27a05464ca0ace831
+      image: mcr.microsoft.com/playwright:v1.57.0-noble@sha256:3bed4b1a12f2338642f3d8cba28e291deef3c66bd4a964bbeb3e57bbff511dbd
     steps:
       - name: Install git lfs
         run: apt-get update && apt-get install git-lfs
@@ -253,6 +253,22 @@ jobs:
           lfs: true
           persist-credentials: false
 
+      - name: Set up Python
+        uses: actions/setup-python@83679a892e2d95755f2dac6acb0bfd1e9ac5d548 # v6.1.0
+        with:
+          python-version: "3.13"
+
+      - name: Install uv
+        uses: astral-sh/setup-uv@681c641aba71e4a1c380be3ab5e12ad51f415867 # v7.1.6
+        with:
+          version: "0.9.18"
+
+      - name: Prepare venv and install Python dependencies
+        working-directory: application/backend
+        run: |
+          uv lock --check
+          uv sync --frozen --all-extras
+
       - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
         id: setup-node
         with:
@@ -282,9 +298,15 @@ jobs:
         run: npm run build:api:types
 
       - name: Run Playwright tests
+        if: false # temporarily disabled
         working-directory: "application/ui"
         run: npm run test:component -- --project "Component tests"
 
+      - name: Run E2E tests
+        working-directory: "application/ui"
+        env:
+          AUTO_START_BACKEND: "true"
+        run: npm run test:e2e -- --reporter=list --output=playwright-report
       - name: Upload blob report to GitHub Actions Artifacts
         uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         if: always()

application/ui/package.json

@@ -25,7 +25,10 @@
         "preview": "rsbuild preview",
         "test:unit": "vitest --config vitest.config.ts",
         "test:unit:watch": "vitest --config vitest.config.ts --reporter=verbose --watch",
-        "test:component": "npx playwright test --config=playwright.config.ts",
+        "test:e2e": "npx playwright test --config=playwright.config.ts",
+        "test:e2e:ui": "npx playwright test --config=playwright.config.ts --ui",
+        "test:e2e:misc": "npx playwright test --config=playwright.config.ts --project='E2E Miscellaneous'",
+        "test:e2e:workflow": "npx playwright test --config=playwright.config.ts --project='E2E Full Workflow'",
         "type-check": "tsc --noEmit"
     },
     "dependencies": {

application/ui/playwright.config.ts

@@ -1,22 +1,20 @@
 import { defineConfig, devices } from '@playwright/test';
 
 const CI = !!process.env.CI;
+const AUTO_START_BACKEND = process.env.AUTO_START_BACKEND === 'true';
+const API_BASE_URL = process.env.API_BASE_URL || 'http://localhost:8000';
 
-/**
- * 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. */
+    fullyParallel: false,
     forbidOnly: 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 */
+    retries: CI ? 2 : 0,
+    workers: CI ? 1 : 1,
     reporter: [[CI ? 'github' : 'list'], ['html', { open: 'never' }]],
+    timeout: 5 * 60 * 1000,
+    expect: {
+        timeout: 30 * 1000,
+    },
     use: {
         baseURL: 'http://localhost:3000',
         trace: CI ? 'on-first-retry' : 'on',
@@ -27,23 +25,43 @@ export default defineConfig({
             devtools: false,
         },
         timezoneId: 'UTC',
-        actionTimeout: CI ? 10000 : 5000,
-        navigationTimeout: CI ? 10000 : 5000,
+        actionTimeout: 30 * 1000,
+        navigationTimeout: 30 * 1000,
     },
 
-    /* Configure projects for major browsers */
     projects: [
         {
-            name: 'Component tests',
+            name: 'E2E Miscellaneous',
+            testMatch: ['**/dataset-management.spec.ts', '**/project-management.spec.ts'],
+            timeout: 2 * 60 * 1000,
+            fullyParallel: false,
+            use: { ...devices['Desktop Chrome'] },
+        },
+        {
+            name: 'E2E Full Workflow',
+            testMatch: ['**/full-workflow.spec.ts'],
+            timeout: 20 * 60 * 1000,
+            fullyParallel: false,
             use: { ...devices['Desktop Chrome'] },
         },
     ],
 
-    /* Run your local dev server before starting the tests */
-    webServer: {
-        command: CI ? 'npx serve -s dist -p 3000' : 'npm run start',
-        name: 'client',
-        url: 'http://localhost:3000',
-        reuseExistingServer: CI === false,
-    },
+    webServer: [
+        {
+            command: 'npx serve -c serve.json -p 3000',
+            url: 'http://localhost:3000',
+            reuseExistingServer: !CI,
+        },
+        ...(AUTO_START_BACKEND
+            ? [
+                  {
+                      command: './run.sh',
+                      cwd: '../backend',
+                      url: `${API_BASE_URL}/api/projects`,
+                      reuseExistingServer: !CI,
+                      timeout: 60 * 1000,
+                  },
+              ]
+            : []),
+    ],
 });

application/ui/serve.json

@@ -0,0 +1,14 @@
+{
+    "public": "dist",
+    "rewrites": [
+        { "source": "**", "destination": "/index.html" }
+    ],
+    "headers": [
+        {
+            "source": "**",
+            "headers": [
+                { "key": "Cache-Control", "value": "no-cache" }
+            ]
+        }
+    ]
+}

application/ui/src/features/inspect/models/model-detail/model-detail.component.tsx

@@ -144,11 +144,12 @@ export const ModelDetail = ({ model, isActiveModel, onBack }: ModelDetailProps)
                         <Flex direction='column' gap='size-100'>
                             <Text UNSAFE_className={classes.label}>Export Format</Text>
                             <div className={classes.formatGroup} role='radiogroup' aria-label='Select export format'>
-                                {EXPORT_FORMATS.map(({ id, Icon }) => (
+                                {EXPORT_FORMATS.map(({ id, name, Icon }) => (
                                     <button
                                         key={id}
                                         type='button'
                                         role='radio'
+                                        aria-label={name}
                                         aria-checked={selectedFormat === id}
                                         onClick={() => handleFormatChange(id)}
                                         className={`${classes.formatOption} ${

application/ui/tests/e2e/dataset-management.spec.ts

@@ -0,0 +1,26 @@
+import path from 'path';
+
+import { expect, test, TEST_ASSETS_DIR } from '../fixtures';
+
+test.describe('Dataset Management', () => {
+    test('uploads images and displays them in the dataset list', async ({ page, createProject }) => {
+        const project = await createProject('Upload Test');
+
+        await page.goto(`/projects/${project.id}?mode=Dataset`);
+
+        await expect(page.getByRole('button', { name: /upload images/i })).toBeVisible();
+
+        const imagePaths = [1, 2, 3, 4, 5].map((i) =>
+            path.join(TEST_ASSETS_DIR, 'normal', `${String(i).padStart(3, '0')}.png`)
+        );
+
+        const fileInput = page.locator('input[type="file"]');
+        await fileInput.setInputFiles(imagePaths);
+
+        await expect(async () => {
+            const images = page.locator('[aria-label="sidebar-items"] img');
+            const count = await images.count();
+            expect(count).toBeGreaterThanOrEqual(5);
+        }).toPass({ timeout: 60 * 1000 });
+    });
+});