Skip to content

Latest commit

 

History

History
287 lines (222 loc) · 7.42 KB

File metadata and controls

287 lines (222 loc) · 7.42 KB

LogHawk Browser Log Capture - run_playwright.py

Overview

run_playwright.py is an interactive browser log capture tool that's part of the LogHawk platform. It opens a real browser window where you can interact with websites while automatically capturing:

  • Console logs (info, warnings, errors, debug messages)
  • Network requests (all HTTP requests/responses)
  • JavaScript errors (runtime errors, stack traces)
  • Network errors (failed requests, 4xx/5xx responses)

The captured logs are saved in structured formats (JSON + human-readable text) for analysis with LogHawk's filtering system.

Prerequisites

1. Python Dependencies

pip install playwright asyncio

2. Browser Installation

Install Playwright browsers (required first time):

python -m playwright install chromium

Or install all browsers:

python -m playwright install

Quick Start

Basic Usage

# Start interactive session with Google
python run_playwright.py

# Start with a specific website
python run_playwright.py --url "https://example.com"

# Run in background (no browser window)
python run_playwright.py --headless --url "https://api.example.com"

# Test mode (no files saved)
python run_playwright.py --dry-run --url "https://example.com"

Command Line Options

Option Description Default
--url Initial URL to navigate to https://google.com
--headless Run browser in background (no window) False
--log-dir Directory to save log files browser_logs
--dry-run Show statistics only, don't save files False

Examples

# E-commerce testing with custom log directory
python run_playwright.py --url "https://shop.example.com" --log-dir "ecommerce_logs"

# Background API testing
python run_playwright.py --headless --url "https://api.example.com/dashboard"

# Quick testing without saving files
python run_playwright.py --dry-run --url "https://new-feature.staging.com"

# Debug session with specific site
python run_playwright.py --url "https://localhost:3000" --log-dir "debug_session"

How to Use

1. Start a Session

python run_playwright.py --url "https://your-website.com"

2. Interact with the Browser

  • The browser window opens automatically
  • Navigate, click, fill forms, trigger JavaScript - everything is captured
  • Console messages appear in real-time in your terminal
  • All interactions are logged automatically

3. End the Session

Press Ctrl+C when done - you'll be prompted:

[SAVE] Save captured logs? (y)es/(n)o/(d)ry-run stats:

Choose:

  • y - Save full logs to files
  • n - Show stats but don't save
  • d - Show detailed statistics only

4. Access Your Logs

Files are saved to the browser_logs/ directory:

  • JSON file: browser_console_YYYYMMDD_HHMMSS.json (structured data)
  • TXT file: browser_console_YYYYMMDD_HHMMSS.log (human-readable)

Output Files

JSON Format (browser_console_*.json)

{
  "session_info": {
    "session_id": "20250801_143022",
    "start_time": "2025-08-01T14:30:22",
    "end_time": "2025-08-01T14:35:45",
    "total_console_messages": 15,
    "total_network_requests": 42,
    "total_errors": 2
  },
  "console_logs": [...],
  "network_requests": [...],
  "errors": [...]
}

Text Format (browser_console_*.log)

# LogHawk Browser Console Capture
# Session: 20250801_143022
# Total messages: 15
# Captured: 2025-08-01 14:35:45

2025-08-01 14:30:23.123 [INFO] Page loaded successfully
2025-08-01 14:30:24.456 [ERROR] Failed to load resource: 404
...

Common Use Cases

1. Frontend Development & Debugging

# Debug React/Vue/Angular app
python run_playwright.py --url "http://localhost:3000"

# Test production deployment
python run_playwright.py --url "https://myapp.com" --log-dir "production_test"

2. API Integration Testing

# Background testing of API calls
python run_playwright.py --headless --url "https://app.com/dashboard"

3. User Journey Testing

# Test complete user flows
python run_playwright.py --url "https://shop.com/checkout" --log-dir "checkout_flow"

4. Quick Testing (No Files)

# Fast testing without cluttering disk
python run_playwright.py --dry-run --url "https://staging.example.com"

Integration with LogHawk

After capturing logs, analyze them with LogHawk:

# Start LogHawk server
python run_loghawk.py

# Open browser to: http://127.0.0.1:8765
# Set log path to: ./browser_logs
# Use filters to analyze captured data

Recommended LogHawk Filters

  • User Interactions: Click, button, form, submit, navigation
  • Frontend Issues: TypeError, Promise, CORS, Hook
  • Network Problems: 404, 500, timeout, fetch

Troubleshooting

Browser Won't Open

# Install browsers first
python -m playwright install chromium

# Or try headless mode
python run_playwright.py --headless

No Logs Captured

  • Make sure to interact with the website (click, navigate, etc.)
  • Check browser console for JavaScript activity
  • Try a site with more dynamic content

Permission Errors

# Create logs directory manually
mkdir browser_logs

# Or use custom directory
python run_playwright.py --log-dir "my_logs"

Encoding Issues (Windows)

If you see character encoding errors, the script automatically uses ASCII-safe prefixes like [START], [ERROR] instead of emojis.

Session Crashes

Fixed! Logs are now saved automatically even if:

  • Browser crashes
  • Process is killed
  • Network disconnects
  • System shuts down

Advanced Features

1. Signal Handling

The tool responds to system signals gracefully:

  • Ctrl+C - Normal shutdown with save prompt
  • SIGTERM - Graceful shutdown (saves automatically)

2. Session Recovery

Even if the session ends unexpectedly, logs are preserved in the finally block.

3. Statistics Mode

python run_playwright.py --dry-run

Shows what would be captured without saving files:

[STATS] Session Statistics:
   Console messages: 23
   Network requests: 67
   JavaScript errors: 1
   Network errors: 3
   Total errors: 4

4. Custom User Agent

The tool uses a realistic Chrome user agent to avoid bot detection.

Best Practices

1. Organized Testing

# Use descriptive log directories
python run_playwright.py --log-dir "feature_x_testing" --url "https://app.com/feature-x"

# Date-based organization
python run_playwright.py --log-dir "logs_$(date +%Y%m%d)" --url "https://app.com"

2. Automated Testing Scripts

#!/bin/bash
# Test multiple environments
for env in dev staging prod; do
  python run_playwright.py --headless --log-dir "${env}_logs" --url "https://${env}.myapp.com"
done

3. Integration with CI/CD

# GitHub Actions example
- name: Capture Frontend Logs
  run: |
    timeout 60s python run_playwright.py --headless --dry-run --url "$DEPLOY_URL" || echo "Capture complete"

Integration with LogHawk Analysis

  1. Capture: Use run_playwright.py to capture logs
  2. Analyze: Use LogHawk server to filter and analyze
  3. Debug: Use LogHawk's smart filters to find issues
  4. Repeat: Iterate on fixes and re-test

This creates a powerful workflow for modern web development debugging.


Need Help?

  • Check LogHawk documentation: CLAUDE.md
  • Run with --help for quick reference
  • Use --dry-run for testing without files
  • Start with simple sites like Google before complex applications