Compare commits
5 Commits
116865e6d2
...
39655bc65f
| Author | SHA1 | Date |
|---|---|---|
Noam Brendel
|
39655bc65f | |
forcetrainer
|
e0318d9da8 | |
MarkRadaba
|
4a983d64a7 | |
Murat K Ozcan
|
f25fcc686c | |
|
forcetrainer
|
411cded4d0 |
|
|
@ -10,6 +10,7 @@ permissions:
|
|||
|
||||
jobs:
|
||||
bundle-and-publish:
|
||||
if: ${{ false }} # Temporarily disabled while web bundles are paused.
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout BMAD-METHOD
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ CLAUDE.local.md
|
|||
|
||||
# Bundler temporary files and generated bundles
|
||||
.bundler-temp/
|
||||
web-bundles/
|
||||
|
||||
# Generated web bundles (built by CI, not committed)
|
||||
src/modules/bmm/sub-modules/
|
||||
|
|
@ -60,6 +61,7 @@ _bmad-output
|
|||
.claude
|
||||
.codex
|
||||
.github/chatmodes
|
||||
.github/agents
|
||||
.agent
|
||||
.agentvibes/
|
||||
.kiro/
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
# BMad Method
|
||||
|
||||
|
||||
[](https://www.npmjs.com/package/bmad-method)
|
||||
[](LICENSE)
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
|
|
@ -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
|
||||
|
||||
- Node.js installed (v18 or later)
|
||||
:::note[Prerequisites]
|
||||
- Node.js installed (v20 or later)
|
||||
- 30 minutes of focused time
|
||||
- We'll use TodoMVC (<https://todomvc.com/examples/react/dist/>) as our demo app
|
||||
- We'll use TodoMVC (<https://todomvc.com/examples/react/>) 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
|
||||
|
|
@ -60,7 +58,7 @@ When prompted:
|
|||
- **Planning artifacts folder:** Keep default
|
||||
- **Implementation artifacts folder:** Keep default
|
||||
- **Project knowledge folder:** Keep default
|
||||
- **Enable TEA Playwright MCP enhancements?** Choose "No" for now (we'll explore this later)
|
||||
- **Enable TEA Playwright Model Context Protocol (MCP) enhancements?** Choose "No" for now (we'll explore this later)
|
||||
- **Using playwright-utils?** Choose "No" for now (we'll explore this later)
|
||||
|
||||
BMad is now installed! You'll see a `_bmad/` folder in your project.
|
||||
|
|
@ -92,9 +90,9 @@ A: "We're testing a React web application (TodoMVC)"
|
|||
A: "Playwright"
|
||||
|
||||
**Q: Testing scope?**
|
||||
A: "E2E testing for web application"
|
||||
A: "End-to-end (E2E) testing for a web application"
|
||||
|
||||
**Q: CI/CD platform?**
|
||||
**Q: Continuous integration/continuous deployment (CI/CD) platform?**
|
||||
A: "GitHub Actions" (or your preference)
|
||||
|
||||
TEA will generate:
|
||||
|
|
@ -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.
|
||||
|
|
@ -131,7 +127,7 @@ In your chat with TEA, run:
|
|||
A: "Epic-level - I want to test TodoMVC's basic functionality"
|
||||
|
||||
**Q: What feature are you testing?**
|
||||
A: "TodoMVC's core CRUD operations - creating, completing, and deleting todos"
|
||||
A: "TodoMVC's core operations - creating, completing, and deleting todos"
|
||||
|
||||
**Q: Any specific risks or concerns?**
|
||||
A: "We want to ensure the filter buttons (All, Active, Completed) work correctly"
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -370,14 +358,12 @@ This tutorial used `*automate` to generate tests for **existing features** (test
|
|||
- Want to add test coverage
|
||||
- Tests should pass on first run
|
||||
|
||||
**When to use `*atdd`:**
|
||||
- Feature doesn't exist yet (TDD workflow)
|
||||
**When to use `*atdd` (Acceptance Test-Driven Development):**
|
||||
- Feature doesn't exist yet (Test-Driven Development workflow)
|
||||
- Want failing tests BEFORE implementation
|
||||
- Following red → green → refactor cycle
|
||||
|
||||
See [How to Run ATDD](/docs/how-to/workflows/run-atdd.md) for the TDD approach.
|
||||
|
||||
---
|
||||
See [How to Run ATDD](/docs/how-to/workflows/run-atdd.md) for the test-drive development (TDD) approach.
|
||||
|
||||
## Next Steps
|
||||
|
||||
|
|
@ -411,21 +397,22 @@ See [TEA Overview](/docs/explanation/features/tea-overview.md) for engagement mo
|
|||
### Go Full TEA Integrated
|
||||
|
||||
Want the complete quality operating model? Try TEA Integrated with BMad Method:
|
||||
- Phase 2: Planning with NFR assessment
|
||||
- Phase 2: Planning with non-functional requirements (NFR) assessment
|
||||
- Phase 3: Architecture testability review
|
||||
- Phase 4: Per-epic test design → ATDD → automate
|
||||
- Release Gate: Coverage traceability and gate decisions
|
||||
|
||||
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:** <https://docs.bmad-method.org>
|
||||
- **GitHub Issues:** <https://github.com/bmad-code-org/bmad-method/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)
|
||||
|
|
|
|||
|
|
@ -38,8 +38,10 @@ export default defineConfig({
|
|||
tagline: 'AI-driven agile development with specialized agents and workflows that scale from bug fixes to enterprise platforms.',
|
||||
|
||||
logo: {
|
||||
src: './public/img/logo.svg',
|
||||
alt: 'BMAD Logo',
|
||||
light: './public/img/bmad-light.png',
|
||||
dark: './public/img/bmad-dark.png',
|
||||
alt: 'BMAD Method',
|
||||
replacesTitle: true,
|
||||
},
|
||||
favicon: '/favicon.ico',
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -222,6 +222,8 @@ header.header .header.sl-flex {
|
|||
|
||||
.site-title {
|
||||
font-weight: 700;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* Logo sizing - constrain to reasonable size */
|
||||
|
|
@ -470,14 +472,14 @@ footer {
|
|||
/* Responsive padding on navbar row only - banner stays full-width */
|
||||
@media (min-width: 50rem) {
|
||||
header.header .header.sl-flex {
|
||||
padding-left: 2.5rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 72rem) {
|
||||
header.header .header.sl-flex {
|
||||
padding-left: 3rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue