playwright-e2e
Playwright E2E Testing
Overview
This project uses Playwright for E2E testing with a focus on user-centric testing that avoids implementation details.
Test Configuration
- Unit tests: Vitest for client components and synchronous server components
- E2E tests: Playwright with automatic dev server startup
- Location:
e2e/directory - HTML reporter: Enabled with trace collection on retry
- Duration: Full E2E suite takes ~15 minutes
Core Philosophy: Test Like a User
Users interact with what they see, not technical implementation details.
✅ Test User-Visible Behavior
More from qingqishi/shiqingqi.com
react19-patterns
React 19 patterns and React Compiler behavior with Context shorthand syntax and use() hook. Use when working with Context, useContext, use() hook, Provider components, optimization patterns like useMemo, useCallback, memo, memoization, or when the user mentions React 19, React Compiler, Context.Provider, or manual optimization.
43tmdb-codegen
TMDB API code generation workflow with selective Zod schemas using pnpm codegen:tmdb. Use when working with TMDB endpoints, regenerating types, adding TMDB API functionality, modifying endpoints-config.js, tmdb-server-functions.ts, Zod schemas, or when the user mentions TMDB codegen, endpoints-config, pnpm codegen:tmdb, needsZodSchema, or auto-generated TMDB files.
13stylex-styling
StyleX styling patterns using design tokens, breakpoints, and custom css prop. Use when working with styles, CSS, design tokens, breakpoints, responsive design, themes, styling components, css prop, stylex.create, or when the user mentions StyleX, tokens.stylex, controlSize, color tokens, or breakpoints.
11i18n-patterns
Internationalization (i18n) patterns for server and client components using getTranslations and useTranslations. Use when working with translations, locales, multilingual content, translation files, TranslationContextProvider, locale switching, or when the user mentions i18n, translations, getTranslations, useTranslations, or translation.json files.
8package-management
Package management using pnpm and corepack with packageManager field in package.json. This skill should be used when installing dependencies, upgrading packages, troubleshooting package manager issues, or working with pnpm commands. Explicit triggers include "upgrade pnpm", "update pnpm", "pnpm version", "pnpm install", "pnpm add", "corepack", "package installation", "dependency updates", or "packageManager field".
8data-fetching
Data fetching patterns for server/client components using fetch API, TanStack Query, useSuspenseQuery, apiRouteWrapper, and apiRequestWrapper. Use when implementing data loading, API calls, server functions, queries, mutations, API routes, or when the user mentions TanStack Query, useSuspenseQuery, apiRouteWrapper, apiRequestWrapper, tmdb-server-functions, or data fetching.
7