cncf · cynthia-sg · Oct 25, 2025 · Oct 25, 2025 · Oct 25, 2025 · Oct 25, 2025
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -35,9 +35,32 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v5
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@master
+        with:
+          toolchain: 1.90.0
+      - name: Install wasm-pack
+        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+      - name: Build overlay wasm package
+        working-directory: ./crates/wasm/overlay
+        run: wasm-pack build --dev --target web --out-dir ../../../ui/webapp/wasm/overlay --target-dir ../../../target-wasm
+      - name: Build quiz wasm package
+        working-directory: ./crates/wasm/quiz
+        run: wasm-pack build --dev --target web --out-dir ../../../ui/webapp/wasm/quiz --target-dir ../../../target-wasm
+      - name: Install shared package dependencies
+        working-directory: ./ui/common
+        run: yarn install --network-concurrency 1
+      - name: Build shared package
+        working-directory: ./ui/common
+        run: yarn build
       - name: Install dependencies
         working-directory: ./ui/webapp
         run: yarn install --network-concurrency 1
+      - name: Install Playwright browsers
+        working-directory: ./ui/webapp
+        run: npx playwright install --with-deps
+        env:
+          PLAYWRIGHT_BROWSERS_PATH: 0
       - name: Run prettier
         working-directory: ./ui/webapp
         run: yarn format:diff
@@ -47,6 +70,11 @@ jobs:
       - name: Run tests
         working-directory: ./ui/webapp
         run: yarn test
+      - name: Run e2e tests
+        working-directory: ./ui/webapp
+        run: yarn test:e2e
+        env:
+          PLAYWRIGHT_BROWSERS_PATH: 0
 
   lint-and-test-embed:
     runs-on:

diff --git a/.gitignore b/.gitignore
@@ -20,5 +20,9 @@ ui/embed-item/node_modules
 ui/webapp/dist
 ui/webapp/node_modules
 ui/webapp/static/*
+ui/webapp/playwright-report
+ui/webapp/test-results
+ui/webapp/blob-report
+ui/webapp/coverage
 yarn-debug.log*
 yarn-error.log*
diff --git a/ui/webapp/package.json b/ui/webapp/package.json
@@ -13,7 +13,9 @@
     "preview": "vite preview",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
+    "test:coverage": "jest --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "@solid-primitives/resize-observer": "^2.1.3",
@@ -31,6 +33,7 @@
     "yarn": "^1.22.22"
   },
   "devDependencies": {
+    "@playwright/test": "^1.56.1",
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.20",
     "eslint": "^9.36.0",

diff --git a/ui/webapp/playwright.config.ts b/ui/webapp/playwright.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: [['list'], ['html', { open: 'never' }]],
+  use: {
+    baseURL: process.env.PLAYWRIGHT_BASE_URL ?? 'http://127.0.0.1:5173',
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure'
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } }
+  ],
+  webServer: {
+    command: 'yarn dev -- --host 127.0.0.1 --port 5173',
+    url: 'http://127.0.0.1:5173',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+    env: {
+      SASS_SILENCE_DEPRECATION_WARNINGS: '1'
+    }
+  }
+});
diff --git a/ui/webapp/src/layout/games/Content.tsx b/ui/webapp/src/layout/games/Content.tsx
@@ -4,12 +4,39 @@ import isUndefined from 'lodash/isUndefined';
 import { createSignal, For, onMount, Show } from 'solid-js';
 
 import init, { Quiz, QuizOptions, State } from '../../../wasm/quiz/landscape2_quiz';
+import { BASE_PATH } from '../../data';
 import pattern from '../../media/pattern_quiz.png';
 import isWasmSupported from '../../utils/isWasmSupported';
 import itemsDataGetter from '../../utils/itemsDataGetter';
 import styles from './Content.module.css';
 import Title from './Title';
 
+const trimSlashes = (value: string) => value.replace(/^\/+|\/+$/g, '');
+
+const buildPath = (...segments: (string | undefined)[]) => {
+  const parts = segments
+    .map((segment) => segment?.trim())
+    .filter((segment) => !isUndefined(segment) && segment !== '')
+    .map((segment) => trimSlashes(segment!))
+    .filter((segment) => segment.length > 0);
+
+  if (parts.length === 0) {
+    return '';
+  }
+
+  return `/${parts.join('/')}`;
+};
+
+const normalizedBasePath = buildPath(BASE_PATH);
+const devStaticPath = buildPath(BASE_PATH, 'static') || '/static';
+
+const getQuizBaseUrl = () => {
+  if (import.meta.env.MODE === 'development') {
+    return `${window.location.origin}${devStaticPath}`;
+  }
+  return `${window.location.origin}${normalizedBasePath}`;
+};
+
 const Content = () => {
   const [loaded, setLoaded] = createSignal<boolean>(false);
   const [activeQuiz, setActiveQuiz] = createSignal<Quiz | null>(null);
@@ -18,7 +45,7 @@ const Content = () => {
   const [error, setError] = createSignal<string | undefined>();
 
   const startGame = async (initiated?: boolean) => {
-    const options = new QuizOptions(import.meta.env.MODE === 'development' ? 'http://localhost:8000' : location.origin);
+    const options = new QuizOptions(getQuizBaseUrl());
     const quiz = await Quiz.new(options);
     setActiveQuiz(quiz);
     if (initiated) setQuizState(quiz.state());
@@ -79,7 +106,7 @@ const Content = () => {
                   <div class={`ms-3 ms-xl-4 border border-2 border-light ${styles.dot} ${styles.dotWrong}`} />
                   <div
                     class={`ms-2 fw-semibold ${styles.score}`}
-                    aria-label={`${quizState()!.score.correct} wrong guesses`}
+                    aria-label={`${quizState()!.score.wrong} wrong guesses`}
                   >
                     {quizState()!.score.wrong}
                   </div>

diff --git a/ui/webapp/src/layout/games/Title.tsx b/ui/webapp/src/layout/games/Title.tsx
@@ -43,7 +43,7 @@ const Title = (props: Props) => {
   );
 
   return (
-    <div ref={setRef} class={`position-relative w-100 h-100 ${styles.container}`}>
+    <div ref={setRef} class={`position-relative w-100 h-100 ${styles.container}`} data-testid="quiz-question-title">
       <div
         ref={setTextRef}
         class={`position-absolute w-100 text-center ${styles.text}`}

diff --git a/ui/webapp/src/layout/navigation/EmbedModal.tsx b/ui/webapp/src/layout/navigation/EmbedModal.tsx
@@ -554,7 +554,7 @@ const EmbedModal = () => {
   createEffect(
     on(displayItemModal, () => {
       if (displayItemModal()) {
-        import(`${embedOrigin()}/embed-item.js`).then(() => {
+        import(/* @vite-ignore */ `${embedOrigin()}/embed-item.js`).then(() => {
           setEmbedScriptLoaded(true);
         });
       }

diff --git a/ui/webapp/tests/e2e/data/base.json b/ui/webapp/tests/e2e/data/base.json
@@ -0,0 +1,192 @@
+{
+  "finances_available": false,
+  "foundation": "DEMO",
+  "description": "Demo landscape for local development.",
+  "url": "http://127.0.0.1:8000",
+  "colors": {
+    "color1": "rgba(0, 107, 204, 1)",
+    "color2": "rgba(255, 0, 170, 1)",
+    "color3": "rgba(96, 149, 214, 1)",
+    "color4": "rgba(0, 42, 81, 0.7)",
+    "color5": "rgba(1, 107, 204, 0.7)",
+    "color6": "rgba(0, 42, 81, 0.7)",
+    "color7": "rgba(180, 219, 255, 1)"
+  },
+  "grid_items_size": "large",
+  "games_available": [
+    "quiz"
+  ],
+  "guide_summary": {
+    "Category 1": [
+      "Summary",
+      "Subcategory 1-1",
+      "Subcategory 1-2"
+    ],
+    "Category 2": [
+      "Summary",
+      "Subcategory 2-1",
+      "Subcategory 2-2"
+    ]
+  },
+  "groups": [
+    {
+      "name": "Some categories",
+      "normalized_name": "some-categories",
+      "categories": [
+        "Category 1",
+        "Category 2"
+      ]
+    },
+    {
+      "name": "Only category 2",
+      "normalized_name": "only-category-2",
+      "categories": [
+        "Category 2"
+      ]
+    }
+  ],
+  "categories": [
+    {
+      "name": "Category 1",
+      "normalized_name": "category-1",
+      "subcategories": [
+        {
+          "name": "Subcategory 1-1",
+          "normalized_name": "subcategory-1-1"
+        },
+        {
+          "name": "Subcategory 1-2",
+          "normalized_name": "subcategory-1-2"
+        }
+      ]
+    },
+    {
+      "name": "Category 2",
+      "normalized_name": "category-2",
+      "subcategories": [
+        {
+          "name": "Subcategory 2-1",
+          "normalized_name": "subcategory-2-1"
+        },
+        {
+          "name": "Subcategory 2-2",
+          "normalized_name": "subcategory-2-2"
+        }
+      ]
+    }
+  ],
+  "items": [
+    {
+      "id": "category-1--subcategory-1-1--item-1",
+      "category": "Category 1",
+      "subcategory": "Subcategory 1-1",
+      "name": "Item 1",
+      "logo": "logos/cncf.svg",
+      "description": "This is the description of item 1",
+      "maturity": "graduated"
+    },
+    {
+      "id": "category-1--subcategory-1-1--item-2",
+      "category": "Category 1",
+      "subcategory": "Subcategory 1-1",
+      "name": "Item 2",
+      "logo": "logos/cncf.svg",
+      "description": "This is the description of item 2",
+      "maturity": "sandbox"
+    },
+    {
+      "id": "category-1--subcategory-1-1--item-3",
+      "category": "Category 1",
+      "subcategory": "Subcategory 1-1",
+      "name": "Item 3",
+      "logo": "logos/cncf.svg",
+      "description": "This is the description of item 3"
+    },
+    {
+      "id": "category-1--subcategory-1-2--item-4",
+      "category": "Category 1",
+      "subcategory": "Subcategory 1-2",
+      "name": "Item 4",
+      "logo": "logos/cncf.svg",
+      "description": "This is the description of item 4"
+    },
+    {
+      "id": "category-1--subcategory-1-2--item-5",
+      "category": "Category 1",
+      "subcategory": "Subcategory 1-2",
+      "name": "Item 5",
+      "logo": "logos/cncf.svg",
+      "description": "This is the description of item 5"
+    },
+    {
+      "id": "category-2--subcategory-2-1--item-6",
+      "category": "Category 2",
+      "subcategory": "Subcategory 2-1",
+      "name": "Item 6",
+      "logo": "logos/cncf.svg",
+      "description": "This is the description of item 6",
+      "maturity": "graduated"
+    },
+    {
+      "id": "category-2--subcategory-2-1--item-7",
+      "category": "Category 2",
+      "subcategory": "Subcategory 2-1",
+      "name": "Item 7",
+      "logo": "logos/cncf.svg",
+      "description": "This is the description of item 7",
+      "maturity": "sandbox"
+    },
+    {
+      "id": "category-2--subcategory-2-1--item-8",
+      "category": "Category 2",
+      "subcategory": "Subcategory 2-1",
+      "name": "Item 8",
+      "logo": "logos/cncf.svg",
+      "description": "This is the description of item 8"
+    },
+    {
+      "id": "category-2--subcategory-2-2--item-9",
+      "category": "Category 2",
+      "subcategory": "Subcategory 2-2",
+      "name": "Item 9",
+      "logo": "logos/cncf.svg",
+      "description": "This is the description of item 9"
+    }
+  ],
+  "footer": {
+    "links": {
+      "facebook": "https://www.facebook.com/CloudNativeComputingFoundation/",
+      "flickr": "https://www.flickr.com/photos/143247548@N03/albums",
+      "github": "https://github.com/cncf",
+      "homepage": "https://cncf.io",
+      "instagram": "https://www.instagram.com/humans.of.cloudnative/",
+      "linkedin": "https://www.linkedin.com/company/cloud-native-computing-foundation/",
+      "slack": "https://slack.cncf.io/",
+      "twitch": "https://www.twitch.tv/cloudnativefdn",
+      "twitter": "https://twitter.com/cloudnativefdn",
+      "wechat": "https://www.cncf.io/wechat/",
+      "youtube": "https://www.youtube.com/c/cloudnativefdn"
+    },
+    "logo": "https://raw.githubusercontent.com/cncf/artwork/master/other/cncf/horizontal/white/cncf-white.svg",
+    "text": "<p>&copy; 2025 DEMO. <a href=\"http://127.0.0.1:8000/privacy-policy\">Privacy Policy</a> · <a href=\"http://127.0.0.1:8000/terms-of-use\">Terms of Use</a></p>"
+  },
+  "header": {
+    "links": {
+      "github": "https://github.com/cncf/landscape2"
+    },
+    "logo": "https://raw.githubusercontent.com/cncf/artwork/master/other/cncf-landscape/horizontal/color/cncf-landscape-horizontal-color.svg"
+  },
+  "featured_items": [
+    {
+      "field": "maturity",
+      "options": [
+        {
+          "value": "graduated",
+          "order": 1,
+          "label": "Graduated"
+        }
+      ]
+    }
+  ],
+  "screenshot_width": 1500
+}