Blog · Guides · 2026-09-15

How to QA a Vibe-Coded App: A Practical 7-Step Process

Klavity
TL;DRTo QA a vibe-coded app, test outside-in from the running app, not inside-out from the code: AI-generated code reads correctly but fails at the seams between generated pieces. Prioritise authorization boundaries, data writes, and error states, then lock every passing path into an automated test before the next AI edit undoes it.

To QA a vibe-coded app, test the things an AI coding tool cannot verify for you: authorization boundaries, anything that writes to a database or moves money, error and empty states, and the exact paths your real users take. Work outside-in from the running app rather than inside-out from the code, because AI-generated code almost always looks correct — the failures sit in the seams between generated pieces, not inside them. A repeatable pass is: list the critical paths, walk each one as a first-time user, break every input on purpose, check what the data looks like after a failure, then lock the passing paths into automated tests so the next AI edit cannot silently undo them.

Why does a vibe-coded app need a different QA approach?

Tools like Cursor, Bolt, Lovable, v0 and Replit generate code that is locally plausible. The model is optimizing for output that compiles and matches your prompt — not for a guarantee that the new code composes correctly with everything already in the project. That produces a distinct failure profile, and it is what your QA process has to target.

  • Generated code reads like a senior engineer wrote it. Clean naming, tidy structure, helpful comments. Reviewing it by eye gives false reassurance, because fluency and correctness are separate properties here.
  • Failures cluster at the seams. Each file works in isolation; the contract between them drifts. A field gets renamed on one side, a null becomes possible on the other, or the same piece of state ends up with two sources of truth.
  • Regressions arrive silently. Ask the model to change one screen and it may rewrite a shared component, a validation rule, or a route guard that four other screens depend on. Nothing in the chat window tells you it happened.

The practical consequence: QA has to be black-box and outside-in. Drive the running app the way a user does and judge observable behaviour, rather than reading a diff and deciding it looks fine. For a fuller breakdown of the bug classes involved, see the bugs vibe-coded projects ship most often.

How do you QA a vibe-coded app, step by step?

Seven steps, in this order. The order matters — the early steps are the ones that find the bugs that cost you a customer.

  1. List the critical paths, not the features. A critical path is a sentence: "a new user signs up, connects their account, and sees their first result." Most early-stage apps have only a handful. Everything else is secondary until these are solid.
  2. Walk each path once as a genuine first-time user. Fresh browser profile, no cookies, no seeded data, no accounts you created while building. A whole class of bugs in AI-generated apps only exists on an empty account, because the model was only ever prompted about the populated case.
  3. Break every input deliberately. Empty string, whitespace only, 5,000 characters, emoji, a leading apostrophe, a negative number, a date in 1900, a pasted value with a trailing space. Generated validation tends to cover the format you mentioned in your prompt and nothing else. Our edge-case checklist is a good source list.
  4. Test the authorization boundary from the wrong side. This is the single highest-value check on a vibe-coded app. Log in as user A, then request user B's record directly — change the ID in the URL, or replay the API call from the browser's network tab with A's session. AI tools routinely generate gating in the interface only: the button is hidden, the endpoint is wide open. Check the response, not the screen.
  5. Check what the data looks like after a failure. Submit a form twice quickly. Kill the tab mid-request. Force a payment or API error. Then look at the actual rows. Generated code rarely wraps multi-step writes in a transaction, so interrupted operations leave half-created records that break every later screen.
  6. Check the states you never prompted for. Empty, loading, long text, no network, slow network, third-party API down, permission denied. A generated UI renders the happy path convincingly and then shows a blank panel or an infinite spinner for everything else.
  7. Lock the passing paths into automated tests. Once a path works, it needs a test that runs on every change, or the next AI editing session will quietly undo it. This is what AutoSim exists for — end-to-end tests that repair their own selectors instead of breaking the moment the model restructures your markup.

Which parts should you test first with limited time?

If you only have an hour before a demo or a launch, spend it here.

AreaWhy it breaks in AI-generated appsFirst check
Auth & access controlGating implemented in the UI layer onlyRequest another user's record with your own session
Payments & billingHappy path generated; webhooks and failures unhandledDouble-click submit; force a declined card
Writes and deletesNo transaction boundaries; optimistic UI hides failuresHard-refresh after every write and confirm it persisted
File and image uploadSize and type limits assumed rather than enforcedUpload a 0-byte file, a wrong type, and something very large
Forms and validationClient-side only, server trusts the payloadSubmit the request directly, bypassing the form
Third-party API callsNo timeout, retry, or error branchBlock the domain in devtools and use the feature
Mobile layoutGenerated desktop-first from a desktop previewOpen every critical path at a 360px viewport

What should you check on every AI-generated feature?

A short standing checklist, applied to each new feature before you consider it done:

  • Does it still work for a user who owns no data yet?
  • Does the server reject what the form rejects?
  • What does a second, unauthorized user see if they guess the URL?
  • What happens on a refresh mid-flow?
  • What appears when the request fails — a message, or nothing?
  • Did anything else in the app change in the same AI session? Re-walk one unrelated critical path to find out.

That last item is the one people skip and the one that bites. Treat every AI editing session as a potential regression event, not a contained change.

How do you keep testing as the AI keeps editing?

QA on a vibe-coded app cannot be a launch-day event, because the code changes shape faster than a manual pass can keep up. Three habits carry most of the weight:

  • Run a smoke pass after every AI session, not before every release. Five minutes on the critical paths while the change is fresh beats an hour of archaeology a week later.
  • Capture evidence at the moment of failure. A bug you cannot reproduce is a bug you will ship. Snap captures the console, the network activity, and the DOM state with a right-click, so the report carries proof rather than a description.
  • Get someone who is not you through the app. You know where to click. Sims runs AI personas that don't — they hesitate, mistype, go back, and abandon, which is where usability and state bugs surface.

For the wider picture of how automated and AI-assisted testing fit together, start with our complete guide to AI QA.

Can you QA a vibe-coded app if you are not technical?

Mostly yes. Steps 1, 2, 3, 5 and 6 above need no code at all — they need a browser, a fresh profile, and the discipline to try the thing you assume will work. The one step that genuinely benefits from a developer is the authorization check, and even that is often visible in the browser's network tab: open it, use the feature, and look at whether the server returned data or an error when it should have refused. If you have a developer available for one hour a month, spend it on that check.

Try Klavity free

Klavity is built for exactly this gap: code that ships faster than anyone can verify it. Snap turns any bug into a reproducible report with one right-click, Sims puts AI personas through your flows before real users get there, and AutoSim keeps the paths that already work from breaking. Try Klavity free and run your first pass on the app you shipped this week.

Key takeaways

  • List your critical paths first — test those before any feature.
  • Check the authorization boundary from the wrong user's session.
  • Inspect the data after a failed or interrupted write, not just the screen.
  • Automate each passing path so the next AI edit cannot silently break it.

FAQ

How do you QA a vibe-coded app without a QA team?

Work through the critical paths yourself in a fresh browser profile with no seeded data, break every input deliberately, and confirm that data persists correctly after a refresh or a failed request. Those steps need no code. Then automate the paths that pass so they stay working as the AI keeps editing.

What is the most important thing to test in an AI-generated app?

The authorization boundary. AI coding tools frequently generate access control in the interface only, hiding a button while leaving the underlying endpoint open. Log in as one user and request another user's record directly to check whether the server actually refuses.

Is AI-generated code less safe to ship than hand-written code?

It is not inherently worse code, but it is less verified code. It is produced faster than any human reviews it, and each generation is locally plausible without any guarantee it composes with the rest of the app. The risk comes from the missing verification step, not from the model.

How often should you re-test a vibe-coded app?

After every AI editing session, not before every release. A model asked to change one screen can rewrite shared components or route guards, so treat each session as a potential regression event and re-walk at least one unrelated critical path.

Catch bugs the moment a human sees them

Klavity: right-click bug reports, AI personas that review your product, and self-healing tests.

Get started free