rock/riotpiao.com
0
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

Functional Testing: CI-driven E2E with Playwright #5

New Issue
Open
opened 2026-09-08 04:44:20 +00:00 by rock · 0 comments
rock commented 2026-09-08 04:44:20 +00:00
Owner
Copy Link
Copy Source

Functional Testing Plan - riotpiao.com

Objective

Implement CI-driven end-to-end functional testing using Playwright. Spawn container pod per test run to verify main page interactions, user flows, and responsive behavior.

Scope

Test Coverage - Main Page (/)

  • Hero Section

    • Title, subtitle, description rendering
    • "Explore More" button → bio modal opens
    • Terminal hint visibility (Cmd+K)

  • Experience Timeline

    • Section visibility
    • Scroll animations load

  • Projects Showcase

    • All 5 projects render (Homelab, Poimen Memory, Poimen Workflow, RBC, AWS)
    • Project card interactions
    • Watch Video link functional
    • Read Article link functional

  • Bio Modal

    • Opens on button click
    • Content displays (intro, expertise, highlights, education)
    • Close button works
    • Outside click closes modal

  • Interactive Terminal (Cmd+K)

    • Keyboard shortcut activation
    • Terminal render/close

  • Responsive Layout

    • Desktop (1920x1080)
    • Tablet (768px)
    • Mobile (375px)

  • Dark Mode Toggle

    • Light/dark theme switch
    • State persistence

Implementation Strategy

Architecture

.gitea/workflows/e2e-test.yml
  ├─ Checkout code
  ├─ Build Docker image (with Playwright browsers)
  ├─ Spawn test container pod
  ├─ Run pnpm test:e2e inside pod
  └─ Report results → Gitea

Test File Structure

tests/
├── e2e/
│   ├── main-page.spec.ts           # Hero, projects, modals
│   ├── terminal.spec.ts             # Interactive terminal (Cmd+K)
│   ├── responsive.spec.ts           # Mobile/tablet/desktop
│   ├── dark-mode.spec.ts            # Theme toggle
│   └── fixtures/
│       └── test-data.ts             # Shared constants
├── playwright.config.ts             # Playwright config
└── ci/
    └── e2e-docker-compose.yml       # Test environment

Test Scenarios

  1. Default Load - Verify hero elements, all projects visible
  2. Modal Flow - Click "Explore More" → bio modal → close
  3. Terminal Interaction - Press Cmd+K → terminal activates → close
  4. Project Click - Click project card → verify navigation/modal
  5. Responsive Stack - Load at 375px (mobile) and 1920px (desktop)
  6. Dark Mode - Toggle theme, reload, verify persistence

CI Workflow

Trigger: Push to main, PR, manual dispatch

Steps:

  1. Checkout code
  2. Install dependencies
  3. Build Docker image with Playwright pre-installed
  4. Spawn test container
    • Mount test volume
    • Expose port 3000 (Next.js dev server)
    • Run: pnpm install → pnpm run build → pnpm test:e2e
  5. Collect test report (HTML + JSON)
  6. Upload artifact to Gitea
  7. Comment on PR with results
  8. Clean up container

Failed test → Workflow fails (CI gate)

Dependencies

  • @playwright/test ^1.40.0
  • Docker with Playwright image
  • Gitea Actions runner
  • pnpm ^8.0

Success Criteria

  • ✅ All tests pass in CI
  • ✅ Test report generated (HTML + JSON)
  • ✅ No flaky tests (3+ reruns stable)
  • ✅ Coverage: main page interactions 80%+
  • ✅ Performance: tests run <5min total
  • ✅ Container cleanup automatic

Timeline

Phase Duration Tasks
Setup Day 1 Playwright config, test structure, docker-compose
Core Tests Day 2-3 Hero, projects, modal, terminal tests
Responsive Day 4 Mobile/tablet/desktop viewports
CI Integration Day 5 Gitea workflow, docker build, artifact upload
Polish Day 6 Flaky test fixes, documentation

Resources

Acceptance

  • All listed test scenarios pass
  • CI workflow integrated and triggered on push
  • Test report artifact available in Gitea
  • Documentation in docs/FUNCTIONAL_TESTING.md
# Functional Testing Plan - riotpiao.com ## Objective Implement CI-driven end-to-end functional testing using Playwright. Spawn container pod per test run to verify main page interactions, user flows, and responsive behavior. ## Scope ### Test Coverage - Main Page (/) - **Hero Section** - Title, subtitle, description rendering - "Explore More" button → bio modal opens - Terminal hint visibility (Cmd+K) - **Experience Timeline** - Section visibility - Scroll animations load - **Projects Showcase** - All 5 projects render (Homelab, Poimen Memory, Poimen Workflow, RBC, AWS) - Project card interactions - Watch Video link functional - Read Article link functional - **Bio Modal** - Opens on button click - Content displays (intro, expertise, highlights, education) - Close button works - Outside click closes modal - **Interactive Terminal (Cmd+K)** - Keyboard shortcut activation - Terminal render/close - **Responsive Layout** - Desktop (1920x1080) - Tablet (768px) - Mobile (375px) - **Dark Mode Toggle** - Light/dark theme switch - State persistence ## Implementation Strategy ### Architecture ``` .gitea/workflows/e2e-test.yml ├─ Checkout code ├─ Build Docker image (with Playwright browsers) ├─ Spawn test container pod ├─ Run pnpm test:e2e inside pod └─ Report results → Gitea ``` ### Test File Structure ``` tests/ ├── e2e/ │ ├── main-page.spec.ts # Hero, projects, modals │ ├── terminal.spec.ts # Interactive terminal (Cmd+K) │ ├── responsive.spec.ts # Mobile/tablet/desktop │ ├── dark-mode.spec.ts # Theme toggle │ └── fixtures/ │ └── test-data.ts # Shared constants ├── playwright.config.ts # Playwright config └── ci/ └── e2e-docker-compose.yml # Test environment ``` ### Test Scenarios 1. **Default Load** - Verify hero elements, all projects visible 2. **Modal Flow** - Click "Explore More" → bio modal → close 3. **Terminal Interaction** - Press Cmd+K → terminal activates → close 4. **Project Click** - Click project card → verify navigation/modal 5. **Responsive Stack** - Load at 375px (mobile) and 1920px (desktop) 6. **Dark Mode** - Toggle theme, reload, verify persistence ## CI Workflow **Trigger:** Push to main, PR, manual dispatch **Steps:** 1. Checkout code 2. Install dependencies 3. Build Docker image with Playwright pre-installed 4. Spawn test container - Mount test volume - Expose port 3000 (Next.js dev server) - Run: `pnpm install` → `pnpm run build` → `pnpm test:e2e` 5. Collect test report (HTML + JSON) 6. Upload artifact to Gitea 7. Comment on PR with results 8. Clean up container **Failed test → Workflow fails** (CI gate) ## Dependencies - `@playwright/test` ^1.40.0 - Docker with Playwright image - Gitea Actions runner - pnpm ^8.0 ## Success Criteria - ✅ All tests pass in CI - ✅ Test report generated (HTML + JSON) - ✅ No flaky tests (3+ reruns stable) - ✅ Coverage: main page interactions 80%+ - ✅ Performance: tests run <5min total - ✅ Container cleanup automatic ## Timeline | Phase | Duration | Tasks | |-------|----------|-------| | **Setup** | Day 1 | Playwright config, test structure, docker-compose | | **Core Tests** | Day 2-3 | Hero, projects, modal, terminal tests | | **Responsive** | Day 4 | Mobile/tablet/desktop viewports | | **CI Integration** | Day 5 | Gitea workflow, docker build, artifact upload | | **Polish** | Day 6 | Flaky test fixes, documentation | ## Resources - [Playwright Docs](https://playwright.dev) - [Docker + Playwright](https://hub.docker.com/_/microsoft-playwright) - [Gitea Actions](https://docs.gitea.io/en-us/actions/) ## Acceptance - All listed test scenarios pass - CI workflow integrated and triggered on push - Test report artifact available in Gitea - Documentation in `docs/FUNCTIONAL_TESTING.md`
rock added this to the Functional Testing milestone 2026-09-08 04:55:46 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone Functional Testing
Projects
Clear projects
No projects
Assignees
Clear assignees
rock (Rock)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: rock/riotpiao.com#5