Prompts: Free Local Browser Verification Workflow with Python, Playwright, and Chromium

Prompts

Posted on June 17, 2026June 17, 2026 | by rajeshkumar

Introduction

Use this prompt when you want Claude, Codex, Cursor, or any AI coding agent to set up a free, local, repeatable browser verification system for your project. The goal is to stop AI tools from guessing based only on source code and instead force them to verify frontend work using real browser evidence.

This workflow uses Python + Playwright + Chromium to automatically open your local website, test desktop/tablet/mobile viewports, capture screenshots, detect console errors, track JavaScript runtime issues, identify failed network requests, and generate a clean browser-report folder that can be shared back with Claude/Codex for accurate debugging.

It is especially useful for UI fixes, responsive layout testing, CSS issues, JavaScript bugs, local development pages, private staging apps, and any project where AI coding tools say “done” without actually checking the browser.

You are working on this project as a senior frontend QA automation engineer and AI coding assistant.

Goal:
Set up a free local browser verification workflow using Python + Playwright + Chromium so every frontend/UI/browser-related change can be tested with real browser evidence instead of assumptions.

Context:
This project may have UI, responsive layout, CSS, JavaScript, routing, API, and runtime browser issues. Do not rely only on reading source code. The workflow must generate screenshots and diagnostic reports that can be shared with AI coding tools or developers.

Your tasks:

1. Inspect the project structure
   - Identify the app framework if possible: React, Next.js, Astro, Vue, Laravel, plain HTML, WordPress theme, etc.
   - Identify the local dev start command.
   - Identify the likely local URL and port.
   - Prefer http://127.0.0.1 over localhost when writing the browser-check script.

2. Create a reusable browser verification script
   - Create a folder named tools if it does not exist.
   - Create a Python script at:
     tools/browser_check.py
   - Use Python Playwright.
   - Use Chromium as the browser.
   - Support headless mode by default.
   - Allow easy modification of the target URL.
   - Test these default viewports:
     - desktop: 1440x900
     - tablet: 768x1024
     - mobile: 390x844
   - Capture full-page screenshots for each viewport.
   - Capture browser console errors.
   - Capture page JavaScript runtime errors.
   - Capture failed network requests.
   - Capture non-2xx/3xx HTTP responses where possible.
   - Save all output into a folder named:
     browser-report

3. Generate useful report files
   The script should create:
   - browser-report/desktop.png
   - browser-report/tablet.png
   - browser-report/mobile.png
   - browser-report/desktop-report.txt
   - browser-report/tablet-report.txt
   - browser-report/mobile-report.txt
   - browser-report/summary.md

   The summary.md file should include:
   - Tested URL
   - Timestamp
   - Viewports tested
   - Screenshot file list
   - Console errors summary
   - Runtime errors summary
   - Failed requests summary
   - HTTP error responses summary
   - Clear PASS/FAIL style result
   - Next recommended debugging steps if anything failed

4. Add installation instructions
   Add or update documentation with exact commands:
   - pip install playwright
   - playwright install chromium
   - python tools/browser_check.py

   If the project already has docs, add this to the most appropriate docs file.
   Otherwise create:
   docs/browser-verification.md

5. Add project agent rules
   Add or update CLAUDE.md, CODEX.md, AGENTS.md, or equivalent project instruction file if present.
   If none exist, create:
   AGENTS.md

   Add this rule:

   For any UI, layout, frontend, responsive, CSS, JavaScript, or browser-related task:
   - Do not rely only on source-code reading.
   - Run browser verification using Python Playwright + Chromium.
   - Check desktop, tablet, and mobile screenshots.
   - Check console errors.
   - Check JavaScript runtime errors.
   - Check failed network requests.
   - Check HTTP error responses.
   - Do not say "done" unless browser verification was actually performed.
   - If browser verification cannot be run, clearly say it was not verified in browser and explain why.

6. Make the script practical and robust
   The script should:
   - Create browser-report automatically.
   - Not crash completely on one failed viewport; continue testing other viewports.
   - Print useful terminal output.
   - Use clear error handling.
   - Allow URL override from command line, for example:
     python tools/browser_check.py --url http://127.0.0.1:3000
   - Allow headed mode for visual debugging, for example:
     python tools/browser_check.py --headed
   - Allow custom wait time if needed.
   - Keep the code simple enough for developers to maintain.

7. Run or explain verification
   - If you can run commands in this environment, install dependencies if needed and run the script.
   - If the app server is not running, identify the correct start command and explain exactly how to run it.
   - If browser verification cannot be completed, do not pretend it passed.
   - Clearly state what was verified and what was not verified.

8. Final response format
   At the end, provide:
   - Files created/updated
   - Commands to run
   - Browser verification workflow
   - How to give browser-report to Claude/Codex
   - Any limitations or remaining manual steps

Important:
Do not over-engineer this with paid tools, cloud browsers, BrowserStack, Browserbase, Selenium Grid, Docker, or CI unless specifically asked later.
The goal is a simple, free, local, repeatable browser evidence workflow using Python + Playwright + Chromium.