feat: add Playwright E2E testing infrastructure with tree listing

dashboard/.env.example

@@ -2,3 +2,4 @@
 # Use port 80 to go through Nginx (proxy service on Docker)
 VITE_API_BASE_URL=http://localhost:8000
 VITE_FEATURE_FLAG_SHOW_DEV=false
+PLAYWRIGHT_TEST_BASE_URL=https://staging.dashboard.kernelci.org:9000

dashboard/.gitignore

@@ -28,5 +28,9 @@ dist-ssr
 # eslint cache
 .eslintcache
 
+# Playwright test reports and artifacts
+test-results/
+playwright-report/
+
 .env*
 !.env.example

dashboard/README.md

@@ -21,12 +21,45 @@ pnpm dev
 ```
 
 ## Running unit tests
+
 The frontend includes unit tests covering some parts of the source code. To run the tests, use the following command:
 
 ```sh
 pnpm test
 ```
 
+## Running end-to-end (e2e) tests
+
+The project includes Playwright-based end-to-end tests. To run the tests, first set the test environment URL in your .env file:
+
+```sh
+# Copy the example file
+cp .env.example .env
+
+# Edit the .env file to set PLAYWRIGHT_TEST_BASE_URL to your desired environment
+# Available environments:
+# - Staging: https://staging.dashboard.kernelci.org:9000 (default)
+# - Production: https://dashboard.kernelci.org
+# - Local: http://localhost:5173
+
+# Install Playwright browsers if you don't have them them
+pnpm exec playwright install
+```
+
+Then run the e2e tests:
+
+```sh
+# Run all e2e tests
+pnpm run e2e
+
+# Run e2e tests with UI mode for debugging
+pnpm run e2e-ui
+```
+
+## E2E Test Selectors
+
+To avoid complex css selectors, you can add a data-test-id attribute to elements that you want to target in your e2e tests. That way you don't need to fight with complex selectors.
+
 # Routing and State Management
 
 A big part of this project is to have shareable links
@@ -37,5 +70,5 @@ Also, we are using file based routing in the tanstack router, only files that st
 # Feature Flags
 
 They are used when we want to hide a feature for some users, without having to do branch manipulation.
-Right now the only feature flag is for Dev only and it is controlled by the env 
+Right now the only feature flag is for Dev only and it is controlled by the env
 `FEATURE_FLAG_SHOW_DEV=false` it is a boolean.

dashboard/e2e/e2e-selectors.ts

@@ -0,0 +1,29 @@
+export const TREE_LISTING_SELECTORS = {
+  table: 'table',
+  treeColumnHeader: 'th button:has-text("Tree")',
+  branchColumnHeader: 'th button:has-text("Branch")',
+
+  intervalInput: 'input[type="number"][min="1"]',
+
+  // This requires nth() selector which can't be stored as string
+  itemsPerPageDropdown: '[role="listbox"]',
+  itemsPerPageOption: (value: string) => `[role="option"]:has-text("${value}")`,
+
+  searchInput: 'input[type="text"]',
+
+  nextPageButton: '[role="button"]:has-text(">")',
+  previousPageButton: '[role="button"]:has-text("<")',
+
+  treeNameCell: (treeName: string) => `td a:has-text("${treeName}")`,
+  firstTreeCell: 'td a',
+
+  breadcrumbTreesLink: '[data-test-id="breadcrumb-link"]:has-text("Trees")',
+} as const;
+
+export const COMMON_SELECTORS = {
+  tableRow: 'tr',
+  tableHeader: 'th',
+
+  originDropdown: '[data-test-id="origin-dropdown"]',
+  originOption: (origin: string) => `[data-test-id="origin-option-${origin}"]`,
+} as const;

dashboard/e2e/tree-listing.spec.ts

@@ -0,0 +1,141 @@
+import { test, expect } from '@playwright/test';
+
+import { TREE_LISTING_SELECTORS, COMMON_SELECTORS } from './e2e-selectors';
+
+const PAGE_LOAD_TIMEOUT = 5000;
+const DEFAULT_ACTION_TIMEOUT = 1000;
+const SEARCH_UPDATE_TIMEOUT = 2000;
+const NAVIGATION_TIMEOUT = 5000;
+const GO_BACK_TIMEOUT = 3000;
+
+test.describe('Tree Listing Page Tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/tree');
+    await page.waitForTimeout(PAGE_LOAD_TIMEOUT);
+  });
+
+  test('loads tree listing page correctly', async ({ page }) => {
+    await expect(page).toHaveTitle(/KernelCI/);
+    await expect(page).toHaveURL(/\/tree/);
+
+    await expect(page.locator(TREE_LISTING_SELECTORS.table)).toBeVisible();
+
+    await expect(
+      page.locator(TREE_LISTING_SELECTORS.treeColumnHeader),
+    ).toBeVisible();
+    await expect(
+      page.locator(TREE_LISTING_SELECTORS.branchColumnHeader),
+    ).toBeVisible();
+  });
+
+  test('change time interval', async ({ page }) => {
+    await expect(page.locator(COMMON_SELECTORS.tableRow).first()).toBeVisible();
+
+    const intervalInput = page
+      .locator(TREE_LISTING_SELECTORS.intervalInput)
+      .first();
+    await expect(intervalInput).toBeVisible();
+
+    await intervalInput.fill('14');
+
+    await page.waitForTimeout(DEFAULT_ACTION_TIMEOUT);
+
+    await expect(intervalInput).toHaveValue('14');
+  });
+
+  test('change table size', async ({ page }) => {
+    await expect(page.locator(TREE_LISTING_SELECTORS.table)).toBeVisible();
+
+    const tableSizeSelector = page.locator('[role="combobox"]').nth(1);
+    await expect(tableSizeSelector).toBeVisible();
+
+    await tableSizeSelector.click();
+
+    await expect(
+      page.locator(TREE_LISTING_SELECTORS.itemsPerPageDropdown),
+    ).toBeVisible();
+
+    await page.locator(TREE_LISTING_SELECTORS.itemsPerPageOption('20')).click();
+
+    await page.waitForTimeout(DEFAULT_ACTION_TIMEOUT);
+
+    await expect(tableSizeSelector).toContainText('20');
+  });
+
+  test('search for trees', async ({ page }) => {
+    const searchInput = page.locator(TREE_LISTING_SELECTORS.searchInput).nth(0);
+    await expect(searchInput).toBeVisible();
+    await searchInput.fill('main');
+
+    await page.waitForTimeout(SEARCH_UPDATE_TIMEOUT);
+
+    const tableRows = page.locator(COMMON_SELECTORS.tableRow);
+    const count = await tableRows.count();
+    expect(count).toBeGreaterThan(1);
+  });
+
+  test('navigate to tree details and back via breadcrumb', async ({ page }) => {
+    await expect(page.locator(TREE_LISTING_SELECTORS.table)).toBeVisible();
+
+    const firstTreeLink = page.locator('td a').first();
+    await expect(firstTreeLink).toBeVisible();
+
+    await firstTreeLink.click();
+
+    await page.waitForTimeout(NAVIGATION_TIMEOUT);
+
+    const url = page.url();
+    expect(url).toMatch(/\/tree\/[^/]+\/[^/]+\/[^/]+$/);
+
+    const breadcrumbLink = page.locator(
+      TREE_LISTING_SELECTORS.breadcrumbTreesLink,
+    );
+    await expect(breadcrumbLink).toBeVisible();
+    await breadcrumbLink.click();
+    await page.waitForTimeout(GO_BACK_TIMEOUT);
+
+    await expect(page).toHaveURL(/\/tree$/);
+  });
+
+  test('pagination navigation', async ({ page }) => {
+    await expect(page.locator(TREE_LISTING_SELECTORS.table)).toBeVisible();
+
+    const nextPageButton = page
+      .locator(TREE_LISTING_SELECTORS.nextPageButton)
+      .first();
+    const hasNextPage =
+      (await nextPageButton.count()) > 0 &&
+      !(await nextPageButton.isDisabled());
+
+    if (hasNextPage) {
+      const originalPageUrl = page.url();
+      await nextPageButton.click();
+
+      await page.waitForTimeout(SEARCH_UPDATE_TIMEOUT);
+
+      const newPageUrl = page.url();
+      expect(newPageUrl).not.toBe(originalPageUrl);
+    }
+  });
+
+  test('change origin', async ({ page }) => {
+    await expect(page.locator(TREE_LISTING_SELECTORS.table)).toBeVisible();
+
+    await expect(page.locator('text="Origin"')).toBeVisible();
+
+    const originDropdown = page.locator(COMMON_SELECTORS.originDropdown);
+    await expect(originDropdown).toBeVisible({ timeout: 10000 });
+
+    await originDropdown.click();
+
+    await expect(
+      page.locator(COMMON_SELECTORS.originOption('linaro')),
+    ).toBeVisible();
+
+    await page.locator(COMMON_SELECTORS.originOption('linaro')).click();
+
+    await page.waitForTimeout(SEARCH_UPDATE_TIMEOUT);
+
+    await expect(originDropdown).toContainText('linaro');
+  });
+});

dashboard/eslint.config.mjs

@@ -54,7 +54,7 @@ export default [{
             },
 
             requireConfigFile: false,
-            project: ["./tsconfig.app.json", "./tsconfig.node.json"],
+            project: ["./tsconfig.app.json", "./tsconfig.node.json", "./tsconfig.e2e.json"],
             tsconfigRootDir: __dirname,
         }
     },
@@ -137,6 +137,7 @@ export default [{
                 ".storybook/**",
                 "src/stories/**",
                 "**/*.stories*",
+                "playwright.config.ts",
             ],
         }],
 

dashboard/package.json

@@ -16,7 +16,9 @@
     "prepare": "cd .. && husky dashboard/.husky",
     "pycommit": "cd .. && cd backend && sh pre-commit",
     "pypush": "cd .. && cd backend && sh pre-push",
-    "prettify": "prettier --write ./src"
+    "prettify": "prettier --write ./src ./e2e",
+    "e2e": "playwright test",
+    "e2e-ui": "playwright test --ui"
   },
   "dependencies": {
     "@date-fns/tz": "^1.4.1",
@@ -77,6 +79,7 @@
     "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.34.0",
+    "@playwright/test": "^1.57.0",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-links": "^8.6.14",
@@ -95,6 +98,7 @@
     "@typescript-eslint/eslint-plugin": "^8.41.0",
     "@typescript-eslint/parser": "^8.41.0",
     "@vitest/coverage-v8": "3.2.4",
+    "dotenv": "^17.2.3",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^9.1.2",
     "eslint-import-resolver-webpack": "^0.13.10",

dashboard/playwright.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from '@playwright/test';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+export default defineConfig({
+  testDir: './e2e',
+  use: {
+    baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:5173',
+  },
+});