VVibeFootprintWebsite intelligence

Test the contract beyond the demo

How to test a vibe-coded website before users do

The fastest useful test plan does not try to cover every component. It identifies the few promises the product cannot break, then attacks their inputs, timing, permissions and recovery paths with repeatable evidence.

Format
Website testing lab
For
Builders and product owners preparing an AI-assisted website for external feedback or launch
Reading time
13 minutes

Published by VibeFootprint EditorialPublished · Last reviewed

Test protocol

Six experiments for the first test lab

Each experiment begins with a user promise and includes a negative case. Automate the stable assertions; keep exploratory review for behavior that still needs human judgment.

Experiment 01

Critical journey

SetupStart from a clean account and complete the product’s primary job

AssertionsThe intended outcome occurs once, persists and is visible after reload

Experiment 02

Input boundary

SetupUse empty, long, malformed, duplicated and unexpected values

AssertionsValidation is specific, safe and consistent at the server boundary

Experiment 03

Permission boundary

SetupCreate at least two users or organizations with different roles

AssertionsEvery read and mutation enforces the expected principal and scope

Experiment 04

Slow and failed dependency

SetupDelay or fail data, email, payment or other external requests

AssertionsThe interface preserves state, communicates status and supports safe retry

Experiment 05

Alternative interaction

SetupComplete the journey with keyboard, zoom and a narrow viewport

AssertionsNames, focus, reading order, status and layout remain usable

Experiment 06

Release recovery

SetupDeploy a known harmless change to a production-like environment

AssertionsOwners can observe the release, detect the success signal and restore the prior version

A screenshot is one observation

Generated interfaces need state coverage more than visual applause

A polished default state can hide an empty list that collapses, a form that submits twice, a permission check that exists only in the client or a loading state that never recovers. Write down the states before choosing tools: initial, loading, empty, partial, success, invalid, denied, failed and recovered.

Do not make every test end-to-end. Small tests are fast and precise for pure rules; integration tests verify important boundaries; browser journeys prove that the assembled product fulfills its promises. The useful portfolio follows risk rather than a fashionable pyramid drawn without context.

  • Test behavior users depend on, not implementation details
  • Include at least one negative assertion per material boundary
  • Use production-like configuration without production secrets
  • Store commands and evidence beside the change

Production standard

A release evidence packet

A test run becomes operational evidence when another person can reproduce it and knows which failure blocks the release.

01

Journey

PassCritical user outcomes work from a clean state and after recovery.

FailThe demo requires hidden setup or manual database correction.

02

Boundary

PassInvalid input and unauthorized actions fail safely at controlled boundaries.

FailOnly the interface prevents an action or errors expose internals.

03

Accessibility

PassEssential flows have usable semantics, keyboard behavior and status communication.

FailA user is blocked by custom controls, focus loss or layout overflow.

04

Resilience

PassRetries, partial failures and timeouts preserve consistency.

FailUsers create duplicate work or cannot tell whether an action succeeded.

05

Release

PassThe deployed version is observable and recoverable by a named owner.

FailGreen CI is the only production signal and rollback is theoretical.

Applied example

Testing example: the form that passes every happy-path test

A contact form displays a success state in the browser immediately. The API then calls an email service, which times out. The user retries and creates three records while no email is sent.

  • A visual test of the success screen passes even though the product promise fails.
  • The client treats submission as complete before the authoritative result is known.
  • Retry behavior is not idempotent and the partial failure is invisible to operators.
  • A delayed-dependency experiment would expose all three gaps before launch.

Plain answers

Testing questions

How many tests does a small vibe-coded website need?

There is no meaningful universal count. Cover critical promises, high-consequence boundaries and previously observed failures; avoid inflating numbers with assertions that do not protect behavior.

Can an AI agent test the website it created?

It can generate and execute useful tests, but independent acceptance criteria and human review remain important because the same assumptions can shape both implementation and tests.

What should be tested manually?

Exploratory behavior, content comprehension, assistive-technology use, visual hierarchy and unexpected interactions benefit from human judgment, while stable rules and journeys should be automated where practical.

Source notes

References used for this guide

We prefer first-party standards, primary documentation and a visible interpretation boundary. Links are provided for verification and deeper implementation work.

web.dev Learn Testing

A practical introduction to automated testing levels, assertions and test design for web applications.

W3C Web Accessibility Initiative

Primary guidance for treating accessibility as a user requirement rather than a visual preference.

OWASP Web Security Testing Guide

A structured reference for security testing beyond what a public URL scan can establish.

Next.js production checklist

Primary framework guidance for production readiness, performance, security and observability.

Apply the framework

Review a real public website.

See its pattern-similarity index, evidence breadth, separate security baseline and concrete findings.

Run the free scan