E2E Testing Setup
Relevant source files
The following files were used as context for generating this wiki page:
The End-to-End (E2E) testing system validates browser-level behavior and accessibility compliance across the personal website. It uses Playwright to drive browser interactions and the @axe-core/playwright library for automated accessibility audits against WCAG 2.x A/AA standards.
Sources: e2e/README.md:3-4, e2e/specs/accessibility.spec.ts:1-10
Architecture and Infrastructure
The testing suite operates on a production-like build. Because the Netlify adapter does not support astro preview, the system builds the production output and serves the dist/ directory using a static preview script.
The diagram shows the sequence from building the static site to executing tests across various browser projects.
Sources: e2e/README.md:6-8, playwright.config.ts:50-55
Core Configuration
The E2E setup is configured via playwright.config.ts. It defines project environments, web server requirements, and global test settings.
| Option | Description | Default / Value |
|---|---|---|
testIdAttribute | Custom attribute for finding elements | data-testid |
webServer.command | Command to start the application | pnpm build && pnpm preview:static |
retries | Number of retries in CI environments | 1 |
baseURL | Target URL for local testing | http://127.0.0.1:4173 |
Sources: playwright.config.ts:3-10, playwright.config.ts:44-48
Test Fixtures and Composition
Specs do not import test and expect directly from @playwright/test. Instead, they use a custom implementation in e2e/fixtures/index.ts. This implementation extends the base Playwright test with Page Object Models (POMs) and utility factories.
Fixture Types
- Page Objects:
homePage,sitePage(BasePage). - Component Objects:
commandPalette,siteHeader,siteNav,skipLink,themeToggle. - Accessibility:
makeAxeBuilder()factory ensures every scan uses consistent WCAG tags.
Sources: e2e/README.md:27-35, e2e/fixtures/index.ts:13-23
Page Object Model (POM)
The BasePage class provides shared functionality for all route-specific pages, such as navigation, theme detection, and interaction with common UI elements like the skip link and site header.
The class diagram illustrates the inheritance structure where specialized pages extend the BasePage capabilities.
Sources: e2e/pages/base.page.ts:10-21, e2e/README.md:41-43
Locator and Tagging Conventions
The project enforces a strict locator strategy to ensure test stability and accessibility.
- Primary Locator:
page.getByTestId('...')is the standard for clicking or waiting on elements. - A11y Assertions:
getByRole,toHaveRole, andtoHaveAccessibleNameare used for semantic verification. - Prohibited: Direct CSS selectors, XPath, and
getByTextare discouraged to avoid breakage from copy changes or internationalization.
Test Categorization
Tests are categorized using tags for selective execution:
@axe: WCAG accessibility sweeps (Chromium only).@a11y: Specific accessibility features like skip-links.@smoke: Core site features (navigation, theme, command palette).@desktop: Features requiring fine pointers, such as hover states.
Sources: e2e/README.md:52-67, e2e/README.md:84-90
Execution Workflows
You run E2E tests through pnpm scripts defined in package.json.
- Standard Run:
pnpm test:e2eexecutes tests headlessly. - UI Mode:
pnpm test:e2e:uiopens the Playwright UI for debugging and time-travel tracing. - Filtered Run:
pnpm exec playwright test --grep @smokeruns only smoke tests.
Sources: package.json:28-29, e2e/README.md:96-103
Thematic Accessibility Testing
Accessibility tests iterate through all defined routes and themes to ensure compliance in both light and dark modes.
This sequence shows the nested loop architecture used to sweep every page under every supported visual theme.
Sources: e2e/specs/accessibility.spec.ts:5-15, e2e/pages/base.page.ts:27-41
Conclusion
The E2E Testing Setup provides a robust framework for regression testing and accessibility auditing. By leveraging Page Object Models and centralized fixtures, the suite maintains high test stability and clear separation between test logic and UI implementation details.