User task → Is it static HTML?
    ├─ Yes → Read HTML file directly to identify selectors
    │         ├─ Success → Write Playwright script using selectors
    │         └─ Fails/Incomplete → Treat as dynamic (below)
    │
    └─ No (dynamic webapp) → Is the server already running?
        ├─ No → Start the server first, then run Playwright
        │
        └─ Yes → Reconnaissance-then-action:
            1. Navigate and wait for networkidle
            2. Take screenshot or inspect DOM
            3. Identify selectors from rendered state
            4. Execute actions with discovered selectors

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # Always launch chromium in headless mode
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()

    # Navigate to the application
    page.goto('http://localhost:3000')

    # CRITICAL: Wait for JavaScript to execute
    page.wait_for_load_state('networkidle')

    # Take a screenshot
    page.screenshot(path='/tmp/screenshot.png', full_page=True)

    # Your automation logic here
    # ...

    browser.close()

# Take a screenshot first
page.screenshot(path='/tmp/inspect.png', full_page=True)

# Get the full page content
content = page.content()

# Find all buttons
buttons = page.locator('button').all()
for btn in buttons:
    print(f"Button: {btn.text_content()}")

# Find all links
links = page.locator('a').all()
for link in links:
    print(f"Link: {link.get_attribute('href')}")

# Click a button by text
page.click('text=Submit')

# Fill a form field
page.fill('input[name="email"]', 'user@example.com')

# Select from dropdown
page.select_option('select#country', 'US')

# Wait for element to appear
page.wait_for_selector('.success-message')

# Fill and submit a login form
page.fill('#email', 'test@example.com')
page.fill('#password', 'password123')
page.click('button[type="submit"]')

# Wait for navigation or response
page.wait_for_url('**/dashboard')

# Full page screenshot
page.screenshot(path='full-page.png', full_page=True)

# Element screenshot
page.locator('.hero-section').screenshot(path='hero.png')

# Specific viewport
page.set_viewport_size({'width': 375, 'height': 667})  # iPhone SE
page.screenshot(path='mobile.png')

# Capture console messages
def handle_console(msg):
    print(f"Console {msg.type}: {msg.text}")

page.on('console', handle_console)

# Also capture errors
def handle_error(error):
    print(f"Page error: {error}")

page.on('pageerror', handle_error)

# Monitor API calls
def handle_request(request):
    if '/api/' in request.url:
        print(f"API call: {request.method} {request.url}")

page.on('request', handle_request)

# Monitor responses
def handle_response(response):
    if '/api/' in response.url:
        print(f"Response: {response.status} {response.url}")

page.on('response', handle_response)

# Wait for network to be idle (best for SPAs)
page.wait_for_load_state('networkidle')

# Wait for specific element
page.wait_for_selector('.content-loaded')

# Wait for specific text
page.wait_for_selector('text=Welcome back')

# Timeout for slow operations
page.wait_for_selector('.data-table', timeout=30000)

# Preferred: data-testid (explicit for testing)
page.click('[data-testid="submit-button"]')

# Good: Role-based selectors (accessibility)
page.click('role=button[name="Submit"]')

# Good: Text-based (user-centric)
page.click('text=Submit')

# OK: CSS selectors (when others unavailable)
page.click('.btn-primary')

# Avoid: Fragile selectors
# page.click('div:nth-child(3) > span')  # Will break easily

try:
    page.click('button.submit', timeout=5000)
except TimeoutError:
    # Take screenshot for debugging
    page.screenshot(path='/tmp/error-state.png')
    print("Submit button not found - see error-state.png")

"Test the login flow on localhost:3000 and capture screenshots"

# Install Playwright
pip install playwright
playwright install chromium

# Run your test script
python test_webapp.py

# Python
pip install playwright
playwright install chromium

# Node.js
npm install playwright
npx playwright install chromium