PART 4 · AI AND TESTABILITY · 15–20 MINUTES

Make the app
easier to test.

Give your AI coding agent the actual TestBucks source. Ask it to improve testability—not replace the application. Save the result as a separate practice copy.

1. Start with the real page

The complete HTML, CSS, and JavaScript below come from the course’s testbucks.html at build time. Copy the source alone, download it, or copy it together with the prompt in step 2.

Open original TestBucks ↗

View the complete source

Keep the supplied testbucks-cup.png image beside your HTML copy: download the cup image.

Stable data IDs

Give meaningful controls and results names such as cart-total, not position-dependent selectors.

Useful diagnostics

Record actions, state changes, and errors without exposing personal data or credentials.

Controllable data

Reset the practice shop and load repeatable synthetic scenarios on demand.

2. Copy one complete request

> Make this TestBucks page more testable. Add stable data-testid attributes to relevant elements, useful diagnostics, and deterministic test-data controls. Preserve the existing behavior.

The button copies this lesson’s detailed prompt plus the entire raw HTML. Paste directly into your AI coding agent.

Review the detailed instructions

3. Review and exercise the improved copy

Have your agent save Testbox-testable.html beside the image asset and open it locally. This lesson does not execute AI or edit the original page for you.

Relevant navigation, product controls, inputs, cart totals, errors, and confirmation elements have meaningful, stable data-testid values. Dynamic product and cart IDs use stable keys, not list positions; no duplicate IDs or user data in identifiers. Ordering, discounts, customization, and simulated checkout still work as before. Reset affects only TestBucks practice data; repeated scenario setup produces the same starting state. Diagnostics explain what happened without logging sensitive information. Test-only controls are explicitly enabled and are not a production back door.

Try a follow-up prompt

Verify your changes. Exercise a normal cart, a declined simulated payment, and a reset. Show before/after evidence, list every new data-testid and hook, and report any broken or untested behavior.

The payoff: better observability and repeatable setup for AI agents and conventional tests.

Make the appeasier to test.

1. Start with the real page

2. Copy one complete request

3. Review and exercise the improved copy

Make the app
easier to test.