Compare commits

..

1 Commits

Author SHA1 Message Date
Noam Brendel 116865e6d2
Merge 1d49e045db into a50d82df1c 2026-01-17 20:56:27 +09:00
10 changed files with 66 additions and 54 deletions

View File

@ -10,7 +10,6 @@ permissions:
jobs:
bundle-and-publish:
if: ${{ false }} # Temporarily disabled while web bundles are paused.
runs-on: ubuntu-latest
steps:
- name: Checkout BMAD-METHOD

2
.gitignore vendored
View File

@ -48,7 +48,6 @@ 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/
@ -61,7 +60,6 @@ _bmad-output
.claude
.codex
.github/chatmodes
.github/agents
.agent
.agentvibes/
.kiro/

View File

@ -1,4 +1,4 @@
![BMad Method](banner-bmad-method.png)
# BMad Method
[![Version](https://img.shields.io/npm/v/bmad-method?color=blue&label=version)](https://www.npmjs.com/package/bmad-method)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 366 KiB

View File

@ -1,9 +1,11 @@
---
title: "Getting Started with Test Architect"
description: Learn Test Architect fundamentals by generating and running tests for an existing demo app in 30 minutes
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
---
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.
# 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.
## What You'll Build
@ -12,15 +14,11 @@ 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
:::note[Prerequisites]
- Node.js installed (v20 or later)
- 30 minutes of focused time
- We'll use TodoMVC (<https://todomvc.com/examples/react/>) as our demo app
:::
## Prerequisites
:::tip[Quick Path]
Load TEA (`*tea`) → scaffold framework (`*framework`) → create test plan (`*test-design`) → generate tests (`*automate`) → run with `npx playwright test`.
:::
- Node.js installed (v18 or later)
- 30 minutes of focused time
- We'll use TodoMVC (<https://todomvc.com/examples/react/dist/>) as our demo app
## TEA Approaches Explained
@ -32,6 +30,8 @@ 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,6 +45,8 @@ 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
@ -58,7 +60,7 @@ When prompted:
- **Planning artifacts folder:** Keep default
- **Implementation artifacts folder:** Keep default
- **Project knowledge folder:** Keep default
- **Enable TEA Playwright Model Context Protocol (MCP) enhancements?** Choose "No" for now (we'll explore this later)
- **Enable TEA Playwright 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.
@ -90,9 +92,9 @@ A: "We're testing a React web application (TodoMVC)"
A: "Playwright"
**Q: Testing scope?**
A: "End-to-end (E2E) testing for a web application"
A: "E2E testing for web application"
**Q: Continuous integration/continuous deployment (CI/CD) platform?**
**Q: CI/CD platform?**
A: "GitHub Actions" (or your preference)
TEA will generate:
@ -111,6 +113,8 @@ 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.
@ -127,7 +131,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 operations - creating, completing, and deleting todos"
A: "TodoMVC's core CRUD 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"
@ -152,6 +156,8 @@ 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.
@ -282,6 +288,8 @@ 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!
@ -326,18 +334,16 @@ You used **TEA Lite** to:
All in 30 minutes!
---
## What You Learned
Congratulations! You've completed the TEA Lite tutorial. You learned:
### 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 Workflows
- `*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)
@ -345,9 +351,15 @@ 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
:::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.
:::
### Key Takeaway
TEA Lite (just `*automate`) is perfect for:
- Beginners learning TEA fundamentals
- Testing existing applications
- Quick test coverage expansion
- Teams wanting fast results
---
## Understanding ATDD vs Automate
@ -358,12 +370,14 @@ 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` (Acceptance Test-Driven Development):**
- Feature doesn't exist yet (Test-Driven Development workflow)
**When to use `*atdd`:**
- Feature doesn't exist yet (TDD 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 test-drive development (TDD) approach.
See [How to Run ATDD](/docs/how-to/workflows/run-atdd.md) for the TDD approach.
---
## Next Steps
@ -397,22 +411,21 @@ 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 non-functional requirements (NFR) assessment
- Phase 2: Planning with 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
---
- [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)
## Troubleshooting
### 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:
### Tests Failing?
**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
@ -425,20 +438,26 @@ page.getByRole('listitem')
page.getByRole('checkbox')
```
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`:
**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.
**Problem:** Network timeout
**Solution:** Increase timeout in `playwright.config.ts`:
```typescript
use: {
timeout: 30000, // 30 seconds
}
```
## Getting Help
### Need 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)

View File

@ -38,10 +38,8 @@ export default defineConfig({
tagline: 'AI-driven agile development with specialized agents and workflows that scale from bug fixes to enterprise platforms.',
logo: {
light: './public/img/bmad-light.png',
dark: './public/img/bmad-dark.png',
alt: 'BMAD Method',
replacesTitle: true,
src: './public/img/logo.svg',
alt: 'BMAD Logo',
},
favicon: '/favicon.ico',

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

View File

@ -222,8 +222,6 @@ header.header .header.sl-flex {
.site-title {
font-weight: 700;
margin-left: 0;
padding-left: 0;
}
/* Logo sizing - constrain to reasonable size */
@ -472,14 +470,14 @@ footer {
/* Responsive padding on navbar row only - banner stays full-width */
@media (min-width: 50rem) {
header.header .header.sl-flex {
padding-left: 1rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 72rem) {
header.header .header.sl-flex {
padding-left: 1rem;
padding-left: 3rem;
padding-right: 3rem;
}
}