Live Browser Verification for Web App Changes
Drives your running web app in a real browser to reproduce bugs and verify UI changes, with console, network, and screenshot evidence.
Before & after
Same prompt, same agent — the only difference is the skill.
Testing your login flow across different browsers is a good idea to ensure compatibility. You'll need to access each browser and test the flow manually. Each browser has slightly different behavior so it's important to test thoroughly. You could go through the login steps in each one and see if there are any differences. Keep notes on what works and what doesn't. You might find issues with cookies or session handling. Testing takes time but helps catch problems before users encounter them.
DEV BROWSER SKILL: CROSS-BROWSER LOGIN TEST SETUP (3 concurrent browser instances): Target app: app.example.com/login Test account: testuser@example.com / TestPass123 Goal: Verify login flow, session persistence, redirect landing page BROWSER 1: Chrome → Navigate to /login page → Fill email field (click, type) → Fill password field (click, type) → Click 'Sign In' button → Wait for redirect to dashboard (timeout: 5s) → Screenshot: 'Chrome login success' → Verify: localStorage has auth_token → Log: 'PASS: Chrome login completed in 2.3s' BROWSER 2: Safari (parallel) → Same steps, concurrent execution → Screenshot: 'Safari login success' → Verify: sessionStorage (Safari different cookie handling) → Log: 'PASS: Safari login completed in 2.1s' BROWSER 3: Firefox (parallel) → Same steps, concurrent → Screenshot: 'Firefox login success' → Verify: IndexedDB for auth cache (Firefox preference) → Log: 'PASS: Firefox login completed in 2.4s' DIFFERENCE DETECTION: Compare screenshots (pixel difference analysis) → Chrome button appears 2px higher (layout shift, non-critical) → Safari: Input field missing bottom border (CSS bug, critical) → Firefox: Form shows password hints (UX difference, not bug) SESSION PERSISTENCE TEST (after login on all 3): Close browser → reopen → navigate to /dashboard Expected: Auto-logged-in (auth token valid) Chrome: PASS (token persists) Safari: FAIL (requires re-login, token cleared on close) Firefox: PASS (token persists) REPORT SUMMARY: Login UX working on 2/3 browsers Bug filed: Safari session handling (priority: medium, affects 15% of users) Test execution time: 3min (parallel) vs 9min (sequential) Live testing workflow prevents manual browser-hopping
About this skill
"It works on my machine" is not evidence, and neither is Claude saying "this should fix it" after reading the code. This skill makes Claude open your running app, click through the flow, and read the console and the actual network responses. It reports back what it saw, step by step, and keeps its guesses separate from its observations.
What it does
- Confirms it is testing your latest build first (stale HMR, service workers, wrong port) so you never get a verdict on old code
- Reproduces bugs from a vague report ("save does nothing") into exact steps, then traces them to the failing request, error, or line
- Diagnoses dead clicks in a fixed order: overlay interception, disabled state, hydration not finished, native validation, or a swallowed API error
- Handles login safely with test accounts, saved sessions, or a handoff to you for 2FA. It never asks you to paste production passwords, and it stops before destructive actions on real data
- Verifies a fix with negative and neighbor checks, mobile and desktop viewports, and keyboard access, not just the happy path
- Turns a confirmed repro into a Playwright regression test on request, and writes an inline Playwright script if no browser tool is connected
What you get
A compact verification report with a PASS, FAIL, or BLOCKED verdict, the steps as they were executed, the exact console and network evidence, an inferred root cause with a confidence level, and the next fix or check.
Best for
Frontend and full-stack developers who use Claude Code on a local dev server and want it to prove a change works in the browser before calling it done.
SKILL.md preview
---
name: live-browser-verification
description: Drives a running web app in a real browser to reproduce bugs and verify UI changes. It confirms the build is fresh, acts through accessibility-tree element refs with condition-based waits, inspects console and network responses after every action, and reports observed evidence separately from inferred causes. Use when the user says "check if this actually works in the browser", "the save button does nothing", "reproduce this bug on localhost", "log in and test the checkout flow", "verify my UI change before I push", "why is this request failing", "my fix didn't do anything", "click through signup and tell me what breaks".
---
… (sign up to view the full skill)Featured in
More development skills
View all Development skills →React and Next.js Regression Test Coverage
Generate React and Next.js tests with Jest, Testing Library, MSW, and Playwright, prioritized by regression risk.
Playwright E2E Tests and Flake Repair
Build reliable Playwright tests, repair flakes from evidence, migrate suites, and configure faster, diagnosable CI.
Pre-Ship Verification for Code Changes
Before calling a code change done, Claude grades every claim by evidence, tries to break it, and reports what's verified vs assumed.
TestRail Case and CI Result Sync
Sync automated tests to TestRail cases and scoped runs with stable mappings, retry handling, and verified result counts.