Bolt Playwright test generation onto any React app

Add one script tag. Get a complete Playwright .spec.ts from a recorded QA session. No architecture changes. No test IDs to write by hand.

// dev / staging only — stripped from prod bundle by esbuild
<script src="objs.js"></script>
<script> o.autotag = 'qa'; </script>

// Option A — manual
<button data-qa="checkout-btn" onClick={fn}>Checkout</button>

// Option B — o.reactQA() utility (CamelCase → kebab auto)
<button {...o.reactQA('CheckoutButton')} onClick={fn}>Checkout</button>
// → <button data-qa="checkout-button">

// Option C — inline hook, no import needed
const useQA = n => ({ 'data-qa': n.replace(/([A-Z])/g, '-$1').toLowerCase().slice(1) });
<button {...useQA('CheckoutButton')} onClick={fn}>Checkout</button>

// In browser console or a QA toolbar:
o.startRecording();
// QA tester uses the app normally
const rec = o.stopRecording();
console.log(o.exportPlaywrightTest(rec, { testName: 'Checkout flow' }));

// 1. paste → tests/checkout.spec.ts
// 2. add assertions (see TODO comments in generated file)
// 3. npx playwright test
// data-qa selectors survive CSS refactors — no maintenance

Context window cost

How much does an AI need to know before it writes correct code?

5 React patterns AI consistently gets wrong

These are the most common bugs in AI-generated React code. In Objs, the problem doesn't exist.

Live recording demo

Record interactions, replay them visually, and export a Playwright .spec.ts with auto-generated expect() assertions — all from a single browser session.