Render web pages with JavaScript using Playwright for sites that need browser rendering or have issues with simple HTTP fetching.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
npx agent-skills-cli listSkill Instructions
name: playwright description: "Render web pages with JavaScript using Playwright for sites that need browser rendering or have issues with simple HTTP fetching."
Playwright Skill
Use Playwright to render JavaScript-heavy websites, take screenshots, and extract content that regular HTTP fetching can't handle.
Installation
Playwright will be installed automatically via uv dependencies, but you may need to install browsers:
# Install browsers (run once)
playwright install chromium
# Or for all browsers
playwright install
Core Operations
Basic Page Rendering
uv run - "https://example.com" <<'EOF'
# /// script
# requires-python = ">=3.12"
# dependencies = ["playwright>=1.0", "beautifulsoup4>=4.0"]
# ///
import sys
from playwright.sync_api import sync_playwright
if len(sys.argv) < 2:
print("Usage: script <url>")
sys.exit(1)
url = sys.argv[1]
print(f"🎭 Rendering: {url}")
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page()
try:
# Navigate and wait for page to load
page.goto(url, wait_until='networkidle')
# Get basic info
title = page.title()
content = page.content()
print(f"✅ Page loaded successfully")
print(f"📄 Title: {title}")
print(f"📏 Content length: {len(content)} characters")
print(f"🔗 Final URL: {page.url}")
# Extract and clean text content
text_content = page.evaluate("""
() => {
// Remove script and style elements
const scripts = document.querySelectorAll('script, style, nav, header, footer');
scripts.forEach(el => el.remove());
// Get main content
const main = document.querySelector('main, article, .content, .post, .entry') || document.body;
return main.innerText || document.body.innerText;
}
""")
# Clean and limit output
clean_text = '\n'.join(line.strip() for line in text_content.split('\n') if line.strip())
print(f"\n📝 EXTRACTED CONTENT:")
print("=" * 80)
print(clean_text[:3000]) # First 3000 chars
if len(clean_text) > 3000:
print(f"\n... (truncated, full content is {len(clean_text)} characters)")
except Exception as e:
print(f"❌ Error loading page: {e}")
finally:
browser.close()
EOF
Take Screenshot
uv run - "https://example.com" "screenshot.png" <<'EOF'
# /// script
# requires-python = ">=3.12"
# dependencies = ["playwright>=1.0"]
# ///
import sys
from playwright.sync_api import sync_playwright
from pathlib import Path
if len(sys.argv) < 2:
print("Usage: script <url> [output_file]")
sys.exit(1)
url = sys.argv[1]
output_file = sys.argv[2] if len(sys.argv) > 2 else "screenshot.png"
print(f"📸 Taking screenshot of: {url}")
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page()
# Set viewport size
page.set_viewport_size({"width": 1280, "height": 720})
try:
page.goto(url, wait_until='networkidle')
# Take full page screenshot
page.screenshot(path=output_file, full_page=True)
# Get file size
file_size = Path(output_file).stat().st_size
print(f"✅ Screenshot saved: {output_file} ({file_size:,} bytes)")
print(f"📄 Page title: {page.title()}")
except Exception as e:
print(f"❌ Error taking screenshot: {e}")
finally:
browser.close()
EOF
Debugging
If a method call fails or you're unsure what's available on the page object, introspect it:
uv run -c "from playwright.sync_api import Page; print([m for m in dir(Page) if not m.startswith('_')])"
For full library docs, fetch the README:
webfetch https://github.com/microsoft/playwright-python
Usage Patterns
- When webfetch fails: Use basic rendering for JavaScript sites
- Screenshots: Visual documentation or debugging
- Dynamic content: Add
page.wait_for_timeout(ms)for slow-rendering JS
Use this when the built-in webfetch tool encounters:
- JavaScript-only content
- Dynamic loading
- Complex single-page applications
More by eddmann
View allQuery Strava fitness data including activities, stats, and athlete info. Use when the user asks about their Strava data, running or cycling activities, workout history, fitness stats, "how far did I run", "my cycling stats", "Strava activities", or wants to analyze exercise data from Strava.
Query Garmin Connect health and fitness data including activities, sleep, heart rate, HRV, stress, and body battery. Use when the user asks about their Garmin data, "how did I sleep", "resting heart rate", "HRV", "stress levels", "body battery", "training status", "Garmin activities", or wants to analyze health metrics from Garmin Connect.
Query Plex Media Server for movies, TV shows, music, and playback history. Use when the user asks about their Plex library, "what movies do I have", "recently added", "continue watching", "watch history", "search my Plex", or wants to explore media in their Plex server.
