Test Any AI-Built Website Before Launch With Claude Code

Let Claude Code test your website like a real user, find broken pages and features, fix important problems, and verify the complete experience before you publish.

Roadmap & Resources

Check the Project & Decide What Must Be Tested

Build a Prioritized Pre-Launch Test Plan

Before opening the browser, Claude should understand what the website is supposed to do.

Build the Pre-Launch Test Plan

Reviews the whole project without changing anything, identifies every important page, flow, and feature a real visitor or user is expected to use, inspects existing tests and known TODOs/placeholder links, and returns a prioritized Critical / Important / Visual-Responsive test plan with the exact user journey for every critical flow.

Review this entire website specifically for pre-launch testing. Do not change anything yet. Identify: - the framework and project type - all important pages and routes - primary navigation - primary calls to action - forms - authentication - protected pages - booking flows - payments - search - file uploads - dashboards - external APIs - email-related actions - important mobile interactions - any other feature a real visitor or user is expected to use Also inspect: - existing tests - browser/e2e testing tools already installed - known TODOs - placeholder links - development-only URLs - console warnings or obvious runtime issues detectable from the code Do not install anything yet. Do not modify the project. Create a prioritized testing plan: CRITICAL Flows that must work before launch. IMPORTANT Features that should be tested but do not block the entire website. VISUAL / RESPONSIVE Pages and components that need browser-size testing. For every critical flow, describe the exact user journey Claude should test from beginning to end. Finish with: Pre-launch test plan: READY / NEEDS REVIEW

Keep the Test Plan Realistic

For a simple business website, the critical flows may only be:

Open Homepage Navigate to Services Submit Contact Form Click Phone/WhatsApp/Booking CTA Check Mobile Navigation

For a web app, it may include:

Sign Up Login Protected Dashboard Create/Edit/Delete Data Logout

Do not create 100 tests for a five-page website.

Connect Playwright to Claude Code

Install the Playwright MCP Server

Playwright lets Claude interact with the website through a real browser.

The official Playwright documentation currently provides this Claude Code setup command:

claude mcp add playwright npx @playwright/mcp@latest

The server becomes available to Claude Code and can then navigate websites, click elements, fill forms, inspect network requests and console messages, and perform end-to-end workflows.

If Playwright is already connected to Claude Code, skip the installation.

Start the Website

Run the project locally using its normal development command.

npm run dev

Use the actual command appropriate for the project. Claude should test the running website rather than guessing from source code alone.

Run the First Browser Check

Initial Browser Inspection

Opens the running website with Playwright, checks the homepage, navigation, links, images, console errors, failed network requests, and unexpected 404s, then visits every important public route from the test plan and records each issue with its page, trigger, expected vs. actual behavior, and severity — without fixing anything.

Use Playwright to open the running website and perform an initial browser inspection. Do not change code yet. Check: - homepage loads - page title is correct - navigation works - important links are clickable - images load - there are no obvious broken layouts - browser console errors - failed network requests - broken or missing assets - unexpected 404 pages Then visit every important public route you identified in the test plan. Record each issue with: - page/route - action that triggered it - expected behavior - actual behavior - console/network error if relevant - severity: Critical / Important / Minor Do not fix anything yet. Finish with: Initial browser test: PASS / ISSUES FOUND

Playwright MCP can operate the browser through structured page data rather than relying only on screenshots, which makes it useful for deterministic browser interactions and testing.

Test the Important User Journeys

Test Every Critical Flow End-to-End

Now test the website like a real visitor instead of simply opening pages.

Test the Critical User Journeys

Executes every critical user journey from the test plan end-to-end — navigation, forms with valid/invalid/missing input, signup, login, logout, protected routes, password reset, booking, search, uploads, dashboard actions, and sandbox-mode payments — inspecting console and network errors along the way, without using real production payments or data, and finishes with a PASS/FAIL table plus only the problems that should block launch.

Use Playwright to execute the critical user journeys from the pre-launch testing plan. Test each flow from beginning to end. Where applicable, test: - navigation - forms - validation - contact submission - signup - login - logout - protected routes - password reset - booking - search - filtering - file uploads - dashboard actions - API-dependent features - payment flow in test/sandbox mode only For forms, test at least: - valid submission - missing required fields - invalid input - success state - error state where practical For authentication, if present: - logged-out access - successful login - session after refresh - protected-page behavior - logout For every tested flow: - perform the real browser actions - inspect relevant console errors - inspect failed network requests - confirm the expected success state Do not use real production payments. Do not delete or damage real production data. Do not weaken security controls just to make a test pass. Do not change code yet. Finish with a table containing: - Flow - Result: PASS / FAIL - Problem - Severity - Recommended fix Then list only the problems that should block launch.

Test Mobile Too

After the main desktop flows, test at least one common mobile viewport.

Check:

Navigation Buttons Forms Dialogs Fixed Elements Horizontal Overflow Primary CTA

The goal is not exhaustive device testing. It is to catch obvious problems before real users do.

Fix the Problems & Run the Final Launch Test

Fix Only the Genuine Problems

Now let Claude fix only the genuine problems found during testing.

Fix the Launch-Blocking Problems

Fixes the launch-blocking and important problems with the smallest safe changes, addressing root causes without redesigning unrelated pages, weakening authentication, or disabling error handling — reruns each originally failing flow after its fix, then runs the production build and existing tests, and reports which problems were fixed, which remain, and what needs a manual decision.

Fix the launch-blocking and important problems found during the Playwright tests. Use the smallest safe changes. Requirements: - fix the root cause rather than hiding the symptom - preserve existing design and functionality - do not redesign unrelated pages - do not weaken authentication or authorization - do not remove validation merely to make a form pass - do not disable error handling - do not replace working architecture unnecessarily After each fix, rerun the browser flow that originally failed. Continue until each launch-blocking issue either: - passes - or has a clear reason why it cannot be safely fixed without my input Then: - run the production build - run relevant existing tests - check browser console errors - check failed network requests Do not deploy anything automatically. Finish with: Fix status: COMPLETE / NEEDS REVIEW Then list: 1. problems fixed 2. problems still remaining 3. anything that requires my manual decision

Run the Final Full Test

Once the fixes are complete, run one final pre-launch test from a fresh browser session.

Final Pre-Launch Test

Starts a fresh browser session and re-verifies the homepage, every important route, navigation, primary CTA, forms and validation, authentication and protected areas, booking, uploads, sandbox payments, mobile navigation, console/network errors, and the production build without making further changes, then answers Launch status: READY or NOT READY with only the remaining launch-blocking problems.

Run one final pre-launch test of this website using Playwright. Start from a fresh browser session. Verify: - homepage loads - all important routes work - navigation works - primary CTA works - forms work - validation works - authentication works if present - protected areas remain protected - booking works if present - important API features work - file uploads work if present - test/sandbox payment flows work if present - mobile navigation works - there is no unintended horizontal scrolling - there are no critical console errors - there are no important failed network requests - there are no broken production links or localhost URLs - the production build succeeds Do not make additional changes during this final test. Finish with: Launch status: READY / NOT READY If NOT READY, list only the remaining launch-blocking problems.

Test the Live Website Once More

After deployment, repeat a shorter smoke test against the real production URL. This catches problems caused specifically by production environment variables, domains, APIs, or hosting configuration.

Homepage

Navigation

Contact/Signup/Login

Main CTA

One Important End-to-End User Journey