name: visual-testing description: Visual testing and screenshot verification for data-centered.com. Use this skill when verifying website layouts, checking responsive design, capturing screenshots for documentation, or debugging visual issues. license: MIT

Visual Testing Skill

Automate visual verification of data-centered.com pages using Playwright.

When to Use

• Verifying layout changes before committing
• Checking responsive design at multiple breakpoints
• Capturing screenshots for documentation or blog posts
• Debugging visual regressions
• Testing new page designs

Environment Setup

Option 1: Temporary venv (Quick Start)

# Create temporary environment
python3 -m venv /tmp/playwright_env
source /tmp/playwright_env/bin/activate
pip install playwright
playwright install chromium

Option 2: Project venv (Persistent)

# Use existing data-centered venv
source .venv/bin/activate
pip install playwright
playwright install chromium

Core Patterns

Screenshot a Local HTML File

For static HTML served via HTTP (avoids CORS issues):

from playwright.sync_api import sync_playwright
import http.server
import socketserver
import threading
import time

# Start local server
PORT = 8765
handler = http.server.SimpleHTTPRequestHandler
httpd = socketserver.TCPServer(("", PORT), handler)
thread = threading.Thread(target=httpd.serve_forever)
thread.daemon = True
thread.start()
time.sleep(1)

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page(viewport={'width': 1400, 'height': 900})

    page.goto(f'http://localhost:{PORT}/index.html')
    page.wait_for_load_state('networkidle')

    page.screenshot(path='/tmp/screenshot.png', full_page=True)
    browser.close()

httpd.shutdown()

Screenshot Production Site

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page(viewport={'width': 1400, 'height': 900})

    page.goto('https://data-centered.com')
    page.wait_for_load_state('networkidle')

    page.screenshot(path='/tmp/homepage.png', full_page=True)
    browser.close()

Responsive Design Testing

BREAKPOINTS = [
    {'name': 'mobile', 'width': 375, 'height': 667},
    {'name': 'tablet', 'width': 768, 'height': 1024},
    {'name': 'desktop', 'width': 1440, 'height': 900},
]

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)

    for bp in BREAKPOINTS:
        page = browser.new_page(viewport={'width': bp['width'], 'height': bp['height']})
        page.goto('http://localhost:8765/index.html')
        page.wait_for_load_state('networkidle')
        page.screenshot(path=f"/tmp/{bp['name']}.png", full_page=True)
        page.close()

    browser.close()

Element Discovery

# Find all interactive elements
page.wait_for_load_state('networkidle')

buttons = page.locator('button').all()
links = page.locator('a').all()
inputs = page.locator('input').all()

print(f"Found {len(buttons)} buttons, {len(links)} links, {len(inputs)} inputs")

# Get page content for inspection
content = page.content()

Wait Strategies

# Wait for network idle (all requests complete)
page.wait_for_load_state('networkidle')

# Wait for specific element
page.wait_for_selector('.hero-section')

# Wait for animations to settle
page.wait_for_timeout(500)

# Wait for JavaScript execution
page.wait_for_function('document.readyState === "complete"')

Screenshot Organization

Save screenshots to screenshots/ directory (already exists in repo):

from datetime import datetime

timestamp = datetime.now().strftime('%Y%m%d-%H%M%S')
page.screenshot(path=f'screenshots/{timestamp}-{page_name}.png')

Common Issues

CORS with file:// URLs

Problem: Local HTML files can't load external resources Solution: Serve via HTTP server (see pattern above)

JavaScript Not Executed

Problem: Screenshot captures page before JS runs Solution: Use page.wait_for_load_state('networkidle') or wait_for_selector()

Missing Fonts

Problem: System fonts differ from production Solution: Use web fonts or accept minor differences for local testing

Screenshot Too Large

Problem: Full_page screenshots are huge Solution: Use full_page=False and set viewport height, or clip to region:

page.screenshot(path='/tmp/hero.png', clip={'x': 0, 'y': 0, 'width': 1400, 'height': 600})

Integration with frontend-design Skill

When using frontend-design to create new pages:

1. Build the page with frontend-design
2. Use visual-testing to capture screenshots
3. Test responsive breakpoints
4. Save reference screenshots for future comparison

Quick Reference