Skip to content

Conversation

@WilsonNet
Copy link
Collaborator

@WilsonNet WilsonNet commented Dec 12, 2025

Summary

This PR adds comprehensive Playwright E2E testing infrastructure to the dashboard project. The implementation includes:

  • Playwright configuration and setup with proper TypeScript support
  • E2E tests for tree listing page with robust selectors and comprehensive coverage
  • Strict TypeScript configuration specifically for e2e tests
  • Environment management with staging as the default test environment
  • Documentation and configuration files for developer onboarding
  • Proper artifact management with appropriate .gitignore entries

Changes

🔧 Framework Setup

  • Added Playwright as dev dependency with proper configuration
  • Created playwright.config.ts with environment support
  • Set up strict TypeScript configuration in tsconfig.e2e.json

🧪 Test Implementation

  • Renamed and cleaned up test file from basic.spec.ts to tree-listing.spec.ts
  • Implemented comprehensive tests covering: tree listing load, time interval changes, table size changes, search, navigation, and pagination
  • Created proper selector file (e2e-selectors.ts) with robust element selectors
  • Removed obvious comments for cleaner test code

📋 Configuration & Environment

  • Updated package.json with single e2e command and e2e-ui command
  • Added staging environment as default in .env.example
  • Added comprehensive documentation to README.md explaining how to run e2e tests
  • Updated ESLint and TypeScript configurations to support e2e tests

🗂️ Git Management

  • Added Playwright artifacts (test-results/, playwright-report/) to .gitignore

Benefits

  • Better test coverage: End-to-end tests for critical user flows
  • Improved reliability: Tests run against real environments with proper selectors
  • Developer experience: Clear documentation and streamlined commands
  • Maintainability: Proper configuration separation and strict TypeScript settings
  • Consistency: Staging as default environment for consistent testing

Usage

# Run tests against default staging environment
pnpm run e2e

# Run tests with UI mode for debugging
pnpm run e2e-ui

# Run against different environments
PLAYWRIGHT_TEST_BASE_URL=https://dashboard.kernelci.org pnpm run e2e  # production
PLAYWRIGHT_TEST_BASE_URL=http://localhost:5173 pnpm run e2e           # local

@WilsonNet WilsonNet force-pushed the feat/playwright branch 2 times, most recently from d8e9951 to 425912a Compare December 12, 2025 19:57
@WilsonNet WilsonNet changed the title feat/playwright [wip]feat/playwright Dec 12, 2025
@MarceloRobert MarceloRobert added the CI/CD Most or all of the changes are about automated tests / Github's CI label Dec 15, 2025
@WilsonNet WilsonNet changed the title [wip]feat/playwright feat: add Playwright E2E testing infrastructure Dec 15, 2025
@WilsonNet WilsonNet changed the title feat: add Playwright E2E testing infrastructure feat: add Playwright E2E testing infrastructure with tree listing Dec 15, 2025
@WilsonNet WilsonNet marked this pull request as ready for review December 15, 2025 19:45
@WilsonNet WilsonNet force-pushed the feat/playwright branch 8 times, most recently from 39e3bf0 to 78202a5 Compare December 19, 2025 12:25
@WilsonNet WilsonNet force-pushed the feat/playwright branch 4 times, most recently from 59d88ee to a60819a Compare January 6, 2026 15:48
- Add Playwright configuration and test framework
- Create e2e tests for tree listing page with proper selectors
- Set up strict TypeScript configuration for e2e tests
- Add e2e commands to package.json and update scripts
- Update .env.example with staging environment as default
- Add comprehensive e2e documentation to README
- Add Playwright artifacts to .gitignore
- Update ESLint and TypeScript configs to support e2e tests
- Add vitest config to exclude the e2e folder
- Add dotenv
- Add a few test-id selectors

This establishes a complete E2E testing infrastructure using Playwright
with staging as the default test environment, strict TypeScript settings,
and proper documentation for developers.
# - Production: https://dashboard.kernelci.org
# - Local: http://localhost:5173

# Install Playwright browsers if you don't have them them
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# Install Playwright browsers if you don't have them them
# Install Playwright browsers if you don't have them yet

await originDropdown.click();

await expect(
page.locator(COMMON_SELECTORS.originOption('linaro')),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a feeling that relying on a fixed name for the tests is not the best move, it could change and break the tests... but for now I think it's ok

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CI/CD Most or all of the changes are about automated tests / Github's CI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants