01
Milliseconds, not minutes.
A component test runs in the low hundreds of ms. Full E2E for the same assertion costs a browser boot, a login, and half a payment flow.
Initiative · Component Testing
The pipeline
that writes the test.
Five skills, one orchestrator. Generates POMs, MSW mocks, and Playwright specs for a page — then reports coverage per element. Same approach we use for E2E, shifted down to the component.
“We don't want another E2E suite. We want every element to know which tests cover it, and every page to answer the question in numbers.”
Pipeline · auto-looping
Five skills. One pass. A tested page.
The orchestrator picks up a page, runs it through Plan → POMs → Mocks → Tests → Coverage, and drops a suite into the MR. Each skill owns one job; the orchestrator glues them.
orchestrator
Orchestrator
playwright-pipeline-orchestrator
01
debuggingPlan
test-plan-generator
Reads the component. Writes the test plan — what's worth covering, what's noise.
02
shipped ✓POMs
pom-generator
Generates Page Object Models from the component tree. Selectors, actions, states — the vocabulary of the test.
03
researchMocks
msw-mock-generator
Builds MSW handlers for every API the component touches. No real network in the test run.
04
activeTests
test-creator
Writes the Playwright specs that drive the POM, assert the states, and consume the mocks.
05
activeCoverage
coverage-report
Tallies coverage per page and per element. Same numbers the Chrome plugin overlays on the running product.
packet · PaymentForm.tsx
looping
Coverage · numbers + visualisation
Every page. Every element. Named specs behind them.
Coverage reports as numbers per page and per element. A Chrome plugin overlays the same data on the running product — hover any control to see the specs that cover it.
Coverage · by page
6 pages
- Payment Form/checkout/pay89%67/75inspected in the plugin →
- Refund Confirm/payments/refund93%26/28
- Checkout/checkout72%103/143
- Dashboard/dashboard45%89/198
- Merchant Onboarding/onboarding44%41/94
- Settings/settings31%22/72
Chrome plugin · live preview
Payment Form
coveredno test· hover any element to see its specs
Card number input
3 tests
- ✓card-number.formats-as-you-type.spec
- ✓card-number.rejects-invalid-luhn.spec
- ✓card-number.handles-paste.spec
Why shift left
Component first. E2E only where it counts.
Most UI regressions live in one component. A full-page E2E walks the user through the story just to assert the same thing — slow, flaky, expensive. Shifting the assertion down cuts minutes off every MR.
02
Deterministic by construction.
MSW intercepts every network call at the component boundary. No flaky staging, no expired test cards, no racing provider webhooks.
03
Signal where it breaks.
When a component test fails, it names the component, the state, and the selector. An E2E failure says “somewhere in this 12-step journey, a button didn't appear.”
04
E2E stays, for what only E2E can show.
Cross-page flows, real payment providers, full auth handshakes. The E2E suite shrinks to the stories that actually need a browser on staging — and becomes as small as possible.
“But wait —”
Three honest objections. Three honest answers.
“
AI-generated tests — can we trust them?
answer
The pipeline produces specs, not decisions. A human reviewer still owns the MR. Generation just means the boring 80% (POMs, MSW handlers, happy-path specs) lands instantly, and the reviewer spends their time on the 20% that matters — edge cases, business rules, regression traps.
“
Won't we lose integration signal?
answer
Integration signal comes from two components talking to one API. Those tests still exist — and they run at the component layer with MSW, not in a browser. The only thing E2E holds onto is the cases where a real browser + a real backend is genuinely the question.
“
Isn't component testing just unit tests with a browser?
answer
It's the other way: unit tests prove the function returns the right value; component tests prove the user sees the right state. The Chrome plugin makes the difference visible — every element on a running page either has an assertion behind it, or it doesn't.