Playwright E2E & Testing Strategy
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The testing strategy for KudosWall is designed to ensure the reliability of its end-to-end (E2E) flows, primarily focusing on customer testimonial collection and workspace management. By leveraging Playwright, the project automates complex user interactions across the web dashboard and public collection pages to verify that the core value proposition—collecting and managing social proof—remains functional through development cycles.
Testing is integrated into the development lifecycle through automated scripts and git hooks. This multi-layered approach includes strict TypeScript type checking, linting, and E2E browser tests to maintain high-quality standards across the monorepo architecture.
Sources: README.md:154-159, AGENTS.md:7-14
E2E Testing with Playwright
KudosWall uses Playwright for comprehensive E2E testing. These tests simulate real-world browser interactions to validate critical paths like the testimonial submission wizard.
Testimonial Submission Flow
The primary E2E test suite validates the multi-step process a visitor undergoes when submitting feedback. This flow involves navigating to a project-specific collection page, selecting a rating, providing content, and confirming consent.
The diagram above illustrates the logical sequence of the submission E2E test.
Sources: apps/web/e2e/submission.spec.ts:6-66
Key Test Components
The E2E suite utilizes specific locators and assertions to ensure UI stability:
| Component | Selector/Method | Purpose |
|---|---|---|
| Rating Stars | .group\/star | Verify 5-star count and interact with ratings |
| Mode Selection | getByRole("button", { name: /Text/i }) | Select testimonial format |
| Feedback Area | textarea#feedback | Input text testimonials |
| Personal Info | input#full_name, input#email | Capture author metadata |
| Consent Check | input#cw-consent | Validate legal compliance checkboxes |
| Network Wait | page.waitForResponse | Ensure API collect endpoint returns 200 OK |
Sources: apps/web/e2e/submission.spec.ts:16-60
Validation and Error Handling
The testing strategy includes negative testing to verify form validation logic. For instance, the system ensures that the "Next Step" button remains disabled if the testimonial content is too short, preventing the submission of low-quality or empty feedback.
Sources: apps/web/e2e/submission.spec.ts:68-78
Integrated Quality Standards
Beyond E2E tests, the project maintains a strict "Quality Standards" suite that must pass before code is committed. This is enforced via tools like Lefthook and standardized bun scripts.
Development Testing Scripts
| Command | Action | Description |
|---|---|---|
bun run test:e2e | E2E Testing | Launches Playwright browser tests |
bun run check-types | Static Analysis | Strict TypeScript compiler checking |
bun run format | Linting | Uses Prettier with Tailwind CSS integration |
bun run build | Build Verification | Verifies zero build errors in edge bundles |
Sources: README.md:154-159, AGENTS.md:7-11
Testing Infrastructure and AI Integration
The testing strategy extends to backend services and AI components. The project uses Zod for runtime validation of API inputs and AI-generated outputs, ensuring that even non-deterministic AI responses adhere to expected schemas.
This sequence shows how testing ensures data integrity between the UI and AI-driven analysis features.
Sources: apps/web/src/lib/ai/prompts.ts:40-100, AGENTS.md:104-106
Verification Milestones
As part of the operational lifecycle (e.g., during Loops.so integration or payment sync updates), a specific "Phase X: Verification" is followed:
- Static Check: Run
bun run check-typesto ensure no regression in type safety. - Build Check: Run
bun run buildto verify deployment readiness. - E2E Validation: Execute Playwright tests to ensure third-party integrations (like email syncing) do not break the core user flow.
Sources: loops-email-collection.md:65-71
Conclusion
The Playwright E2E and Testing Strategy in KudosWall provides a robust safety net for a complex monorepo. By combining browser-level automation with strict type checking and AI output validation, the project ensures that high-fidelity testimonial collection remains seamless for users while providing developers with the confidence to iterate rapidly on Cloudflare Edge infrastructure.