diff --git a/docs/tutorials/getting-started/tea-lite-quickstart.md b/docs/tutorials/getting-started/tea-lite-quickstart.md index db13c0a4..446baa26 100644 --- a/docs/tutorials/getting-started/tea-lite-quickstart.md +++ b/docs/tutorials/getting-started/tea-lite-quickstart.md @@ -1,11 +1,9 @@ --- -title: "Getting Started with TEA (Test Architect) - TEA Lite" -description: Learn TEA fundamentals by generating and running tests for an existing demo app in 30 minutes +title: "Getting Started with Test Architect" +description: Learn Test Architect fundamentals by generating and running tests for an existing demo app in 30 minutes --- -# Getting Started with TEA (Test Architect) - TEA Lite - -Welcome! **TEA Lite** is the simplest way to get started with TEA - just use `*automate` to generate tests for existing features. Perfect for beginners who want to learn TEA fundamentals quickly. +Welcome! **Test Architect (TEA) Lite** is the simplest way to get started with TEA - just use `*automate` to generate tests for existing features. Perfect for beginners who want to learn TEA fundamentals quickly. ## What You'll Build @@ -14,11 +12,15 @@ By the end of this 30-minute tutorial, you'll have: - Your first risk-based test plan - Passing tests for an existing demo app feature -## Prerequisites - +:::note[Prerequisites] - Node.js installed (v18 or later) - 30 minutes of focused time - We'll use TodoMVC () as our demo app +::: + +:::tip[Quick Path] +Load TEA (`*tea`) → scaffold framework (`*framework`) → create test plan (`*test-design`) → generate tests (`*automate`) → run with `npx playwright test`. +::: ## TEA Approaches Explained @@ -30,8 +32,6 @@ Before we start, understand the three ways to use TEA: This tutorial focuses on **TEA Lite** - the fastest way to see TEA in action. ---- - ## Step 0: Setup (2 minutes) We'll test TodoMVC, a standard demo app used across testing documentation. @@ -45,8 +45,6 @@ No installation needed - TodoMVC runs in your browser. Open the link above and: You've just explored the features we'll test! ---- - ## Step 1: Install BMad and Scaffold Framework (10 minutes) ### Install BMad Method @@ -113,8 +111,6 @@ npx playwright install You now have a production-ready test framework! ---- - ## Step 2: Your First Test Design (5 minutes) Test design is where TEA shines - risk-based planning before writing tests. @@ -156,8 +152,6 @@ TEA will analyze and create `test-design-epic-1.md` with: **Review the test design file** - notice how TEA provides a systematic approach to what needs testing and why. ---- - ## Step 3: Generate Tests for Existing Features (5 minutes) Now the magic happens - TEA generates tests based on your test design. @@ -288,8 +282,6 @@ test('should mark todo as complete', async ({ page, apiRequest }) => { See [Integrate Playwright Utils](/docs/how-to/customization/integrate-playwright-utils.md) to enable this. ---- - ## Step 4: Run and Validate (5 minutes) Time to see your tests in action! @@ -334,16 +326,18 @@ You used **TEA Lite** to: All in 30 minutes! ---- - ## What You Learned Congratulations! You've completed the TEA Lite tutorial. You learned: -### TEA Workflows -- `*framework` - Scaffold test infrastructure -- `*test-design` - Risk-based test planning -- `*automate` - Generate tests for existing features +### Quick Reference + +| Command | Purpose | +| -------------- | ------------------------------------ | +| `*tea` | Load the TEA agent | +| `*framework` | Scaffold test infrastructure | +| `*test-design` | Risk-based test planning | +| `*automate` | Generate tests for existing features | ### TEA Principles - **Risk-based testing** - Depth scales with impact (P0 vs P3) @@ -351,15 +345,9 @@ Congratulations! You've completed the TEA Lite tutorial. You learned: - **Network-first patterns** - Tests wait for actual responses (no hard waits) - **Production-ready from day one** - Not toy examples -### Key Takeaway - -TEA Lite (just `*automate`) is perfect for: -- Beginners learning TEA fundamentals -- Testing existing applications -- Quick test coverage expansion -- Teams wanting fast results - ---- +:::tip[Key Takeaway] +TEA Lite (just `*automate`) is perfect for beginners learning TEA fundamentals, testing existing applications, quick test coverage expansion, and teams wanting fast results. +::: ## Understanding ATDD vs Automate @@ -377,8 +365,6 @@ This tutorial used `*automate` to generate tests for **existing features** (test See [How to Run ATDD](/docs/how-to/workflows/run-atdd.md) for the TDD approach. ---- - ## Next Steps ### Level Up Your TEA Skills @@ -418,14 +404,15 @@ Want the complete quality operating model? Try TEA Integrated with BMad Method: See [BMad Method Documentation](/) for the full workflow. ---- +## Common Questions -## Troubleshooting +- [Why can't my tests find elements?](#why-cant-my-tests-find-elements) +- [How do I fix network timeouts?](#how-do-i-fix-network-timeouts) -### Tests Failing? +### Why can't my tests find elements? + +TodoMVC doesn't use test IDs or accessible roles consistently. The selectors in this tutorial use CSS classes that match TodoMVC's actual structure: -**Problem:** Tests can't find elements -**Solution:** TodoMVC doesn't use test IDs or accessible roles consistently. The selectors in this tutorial use CSS classes that match TodoMVC's actual structure: ```typescript // TodoMVC uses these CSS classes: page.locator('.new-todo') // Input field @@ -438,26 +425,20 @@ page.getByRole('listitem') page.getByRole('checkbox') ``` -**Note:** In production code, use accessible selectors (`getByRole`, `getByLabel`, `getByText`) for better resilience. TodoMVC is used here for learning, not as a selector best practice example. +In production code, use accessible selectors (`getByRole`, `getByLabel`, `getByText`) for better resilience. TodoMVC is used here for learning, not as a selector best practice example. + +### How do I fix network timeouts? + +Increase timeout in `playwright.config.ts`: -**Problem:** Network timeout -**Solution:** Increase timeout in `playwright.config.ts`: ```typescript use: { timeout: 30000, // 30 seconds } ``` -### Need Help? +## Getting Help - **Documentation:** - **GitHub Issues:** - **Discord:** Join the BMAD community - ---- - -## Feedback - -Found this tutorial helpful? Have suggestions? Open an issue on GitHub! - -Generated with [BMad Method](https://bmad-method.org) - TEA (Test Architect)