interactive-live-testing

Interactive Live Testing Skill

Drive Playwright against a running application step-by-step, screenshot, analyze, decide, act. Like a senior QA engineer manually testing but with full programmatic control. The discipline is stack-agnostic and applies to any web frontend (Next.js, Vite, Create React App, Vue, Angular, or similar).

When to Use

• Seeding data through actual UI flows rather than API shortcuts
• Verifying end-to-end rendering after a deployment or build
• Finding integration bugs that unit tests miss
• Visual regression testing with screenshot evidence
• Testing auth flows, form submissions, and event-driven pipelines live

Philosophy

See, Decide, Act, Verify. Never script 50 steps blind. Take a screenshot, read it, decide the next action based on what you SEE. Every bug found is fixed immediately, committed, rebuilt, and retested before proceeding.

Prerequisites

Before any live testing session:

# 1. Verify services are running (adapt to your runtime: Docker Compose, k8s, PM2, etc.)
#    [CUSTOMIZE: replace with your health-check command]
docker compose ps   # or: kubectl get pods -n [CUSTOMIZE: namespace]

# 2. Expose required services on localhost if behind a proxy or cluster
#    [CUSTOMIZE: port-forward, ngrok tunnel, or docker compose ports mapping]
kubectl port-forward deploy/svc-api 3001:3001 &
kubectl port-forward deploy/svc-auth 3002:3002 &

# 3. Start the frontend locally (or confirm the dev server is already running)
#    [CUSTOMIZE: your frontend start command and environment variables]
cd apps/web && NEXT_PUBLIC_API_URL=http://localhost:3001 npm run dev

# 4. Verify Playwright is installed in the frontend package
cd apps/web && npx playwright install chromium

Core Pattern: Step-by-Step Navigation

Always run Playwright from the directory where it is installed (the frontend app package):

cd /path/to/your/apps/web && node -e "
const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });

  // --- YOUR ACTIONS HERE ---
  await page.goto('http://localhost:3000/...', { waitUntil: 'networkidle', timeout: 30000 }).catch(() => {});
  await page.waitForTimeout(2000);

  // --- SCREENSHOT ---
  await page.screenshot({ path: '/tmp/playwright-live-test/XX-description.png', fullPage: true });

  // --- ANALYZE ---
  const body = await page.textContent('body');
  console.log('Has expected text:', body.includes('Expected'));

  await browser.close();
})();
" 2>&1