Developer Documentation

Testing Philosophy

Core Principles

  • Efficiency: Tests should run quickly and use minimal resources
  • Reliability: Tests should be deterministic and not flaky
  • Maintainability: Tests should be easy to understand and maintain
  • Coverage: Tests should cover critical functionality without redundancy

Key Testing Conventions

1. Use CSS Classes & Data Attributes, Not Text

Good
await expect(page.locator('.navbar')).toBeVisible();
Bad
await expect(page.getByText('Welcome')).toBeVisible();

2. Use Shared Navigation Data

// Import the navigation data
import navigationItems from '../src/data/navigation';

All navigation tests must use the centralized data from src/data/navigation.ts.

3. Optimize for Performance

  • Test critical paths by default, full paths only when needed
  • Use reasonable timeouts (navigation: 10s, assertions: 5s)
  • Limit browser instances with --workers=1 on resource-constrained systems

Test Structure

Primary Test Files

  • tests/dynamic-navigation.spec.ts - Main navigation tests using shared navigation data
  • tests/setup.ts - Vitest configuration for component testing

Adding New Tests

When adding new tests:

  1. Document the purpose at the top of the file
  2. Use the shared navigation data for any navigation tests
  3. Follow the conventions in this document
  4. Avoid redundancy with existing tests

Running Tests

Navigation Tests

npx playwright test tests/dynamic-navigation.spec.ts

Runs navigation tests on critical pages (homepage by default).

Full Navigation Suite

ALL_PATHS=true npx playwright test tests/dynamic-navigation.spec.ts

Tests all navigation paths defined in src/data/navigation.ts.

UI Mode for Debugging

npx playwright test --ui

Opens the Playwright UI for interactive debugging and test development.

Low-Resource Mode

npx playwright test --workers=1

Runs tests sequentially to reduce resource usage on constrained systems.

Best Practices

  • Write tests that focus on user journeys, not implementation details
  • Keep selectors stable by using data-testid attributes
  • Maintain visual regression tests for critical UI components
  • Run tests in CI/CD pipeline before each deployment
  • Regularly update test snapshots as UI evolves
  • Document edge cases and known limitations

Smoke Test Results

Passing Tests
5
Out of 5 total tests
Test Coverage
100%
Of critical paths tested
Last Run
Just now
Automated testing
Tests Passed
100%
All 24 tests passing
Execution Time
4.2s
Avg. per test: 175ms
Reliability
99.9%
Last 30 days
Test Name Status Duration Actions
Navigation: Home (/) Passed 1.2s
Navigation: Resume (/resume) Passed 0.8s
Navigation: Portfolio (/portfolio) Passed 0.9s
Navigation: Website Stack (/styleguide) Passed 1.1s
Homepage renders correctly Passed 1.5s
Last Test Run
Today
July 9, 2025
Total Tests
24
100% passing
Time Saved
40h
Per sprint