🤖 Sponsored by Browserbase: Sign up today ► https://browserbase.plug.dev/ekNRhob
🎥 Watch the Episode ► How to Reduce 90% of Errors with Claude Code
Get Builder Pack ► Click Here
Welcome Insiders! This enhanced repository contains exclusive learning materials and the complete test suite from Episode 9. Learn how to reduce 90% of errors using Test-Driven Development with AI-powered testing and Stagehand's natural language testing framework.
browserbase-claude-code-stagehand/
├── README.md # This file
├── CLAUDE.md # Claude Code guidance file
├── LESSON.md # 🎓 INSIDERS EXCLUSIVE: Complete learning guide
├── PRD.md # 🎓 INSIDERS EXCLUSIVE: Product requirements document
├── .claude/ # Claude Code configuration
│ ├── agents/ # AI agent definitions
│ │ └── stagehand-expert.md # Stagehand testing specialist agent
│ ├── commands/ # Custom commands
│ │ └── agent_prompts/ # Agent prompt templates
│ │ └── stagehand_expert_prompt.md
│ └── output-styles/ # Output formatting rules
│ └── pragmatic-test-driven-developer.md # TDD enforcement style
└── my-app/
└── tests/ # Complete test suite implementations
├── README.md # Comprehensive test documentation
├── playwright/ # Traditional selector-based tests
│ ├── baseline.spec.ts # Basic structure & element presence
│ ├── interactions.spec.ts # User interactions & validations
│ └── color-mixer.spec.ts # Full workflow tests
└── stagehand/ # AI-powered natural language tests
├── baseline-stagehand.spec.ts # AI element discovery
├── interactions-stagehand.spec.ts # Natural language interactions
└── color-workflows.spec.ts # Complex AI workflows
Copy everything from .claude into the root of your Claude Code project:
cp -r .claude/* /path/to/your/project/.claude/Tag @agent-stagehand-expert in any task related to writing or running tests. This agent specializes in:
- Creating executable Stagehand test files
- Implementing hybrid AI + data-testid strategies
- Handling LOCAL vs BROWSERBASE modes
- Building robust tests with fallback strategies
Run /output-style and select "Pragmatic Test Driven Developer" to enforce the Red → Green → Verify cycle automatically in your development workflow.
# Run Playwright tests
npx playwright test tests/playwright/
# Run Stagehand tests
npx playwright test tests/stagehand/- Detailed timestamps from the episode
- Code-along exercises with solutions
- Advanced Stagehand techniques breakdown
- Multi-agent workflow patterns
- Practice exercises and community challenges
- Complete specifications for the Color Mixer app
- User stories and acceptance criteria
- Technical requirements and constraints
- Perfect for practicing TDD implementation
- Complete working Playwright tests (3 files)
- Complete Stagehand AI tests (3 files)
- Side-by-side comparisons showing 70% code reduction
- Real patterns you can adapt to your projects
- Complete agent definition for AI-powered testing
- Pre-configured with Stagehand best practices
- Natural language test patterns and examples
- Works with Claude Code multi-agent workflows
- Enforces test-first development methodology
- Automatic Red → Green → Verify cycle
- Prevents skipping tests or writing untested code
- Compatible with all Claude Code agents
As an AI Insiders Club member, you have access to:
- ✅ This complete repository with LESSON.md
- ✅ Custom command structures (
/dev:design-app,/dev:implement-mvp)
Take your skills further with the complete implementation:
- 🚀 Full Agent Team (UI Designer, shadcn Expert, Orchestrator, TypeScript Specialist)
- 🚀 Complete Design Outputs (wireframes, manifest, implementation plan)
- 🚀 Source code for the working Color Mixer app (working app with all tests passing)
Get Builder Pack ► Click Here
The Test-Driven Development cycle demonstrated in this episode:
1. RED PHASE (Write Test)
└── Write test for desired functionality
└── Run test to confirm it fails
└── State: "❌ Test written and failing"
2. GREEN PHASE (Implement Code)
└── Write minimal code to pass test
└── No extra features or additions
└── State: "✅ Test passing"
3. VERIFY PHASE (Check Results)
└── Run all tests to ensure nothing broke
└── Manual verification if needed
└── State: "✅ Ready for next feature"
This repository contains the free resources from Episode 9. Contributions welcome:
- Bug fixes in test examples
- Additional Stagehand patterns
- Documentation improvements
- Translation contributions
Please open an issue first to discuss major changes.
MIT License - See LICENSE file for details
- Browserbase for sponsoring this episode and creating Stagehand
- Claude Code Community for feedback and testing
- Anthropic for TDD best practices documentation
- Episode 8: Advanced Statuslines and Usage Tracking
- Episode 7: Multi-Agent Workflows
- Episode 6: Programmatic Videos with Remotion
- GitHub Issues: Report bugs or request features
- X/Twitter: @chongdashu
- Website: aioriented.dev
Remember: The best way to reduce errors isn't to write more code - it's to write tests first! 🧪
Start with Stagehand today ► https://browserbase.plug.dev/ekNRhob