From 4ffa7417a359ef4eae09f61d7da4de06539462ca Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 19 Apr 2026 15:24:51 -0500 Subject: refactor(playwright): split into playwright-js + playwright-py variants MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rename `playwright-skill/` → `playwright-js/` and add `playwright-py/` as a verbatim fork of Anthropic's official `webapp-testing` skill (Apache-2.0). Cross-pollinate: each skill gains patterns and helpers inspired by the other's strengths, with upstream semantics preserved. ## playwright-js (JS/TS stack) Renamed from playwright-skill; upstream lackeyjb MIT content untouched. New sections added (clearly marked, preserving upstream semantics): - Static HTML vs Dynamic Webapp decision tree (core Anthropic methodology) - Reconnaissance-Then-Action pattern (navigate → networkidle → inspect → act) - Console Log Capture snippet (page.on console/pageerror/requestfailed) Description updated to clarify JS/TS stack fit (React/Next/Vue/Svelte/Node) and reference `/playwright-py` as the Python sibling. ## playwright-py (Python stack) Verbatim fork of anthropics/skills/skills/webapp-testing; upstream SKILL.md and bundled `scripts/with_server.py` + examples kept intact. New scripts and examples added (all lackeyjb-style conveniences in Python): Scripts: scripts/detect_dev_servers.py Probe common localhost ports for HTTP servers; outputs JSON of found services. scripts/safe_actions.py safe_click, safe_type (retry-wrapped), handle_cookie_banner (common selectors), build_context_with_headers (env-var- driven: PW_HEADER_NAME / PW_HEADER_VALUE / PW_EXTRA_HEADERS='{…json…}'). Examples: examples/login_flow.py Login form + wait_for_url. examples/broken_links.py Scan visible external hrefs via HEAD. examples/responsive_sweep.py Multi-viewport screenshots to /tmp. SKILL.md gains 5 "Added:" sections documenting the new scripts, retry helpers, env-header injection, and /tmp script discipline. Attribution notes explicitly mark upstream vs local additions. ## Makefile SKILLS: playwright-skill → playwright-js + playwright-py deps target: extended Playwright step to install Python package + Chromium via `python3 -m pip install --user playwright && python3 -m playwright install chromium` when playwright-py/ is present. Idempotent (detected via `python3 -c "import playwright"`). ## Usage Both skills symlinked globally via `make install`. Invoke whichever matches the project stack — cross-references in descriptions route you to the right one. Run `make deps` once to install both runtimes. --- playwright-py/examples/broken_links.py | 58 ++++++++++++++++++++++++ playwright-py/examples/console_logging.py | 35 ++++++++++++++ playwright-py/examples/element_discovery.py | 40 ++++++++++++++++ playwright-py/examples/login_flow.py | 55 ++++++++++++++++++++++ playwright-py/examples/responsive_sweep.py | 51 +++++++++++++++++++++ playwright-py/examples/static_html_automation.py | 33 ++++++++++++++ 6 files changed, 272 insertions(+) create mode 100644 playwright-py/examples/broken_links.py create mode 100644 playwright-py/examples/console_logging.py create mode 100644 playwright-py/examples/element_discovery.py create mode 100644 playwright-py/examples/login_flow.py create mode 100644 playwright-py/examples/responsive_sweep.py create mode 100644 playwright-py/examples/static_html_automation.py (limited to 'playwright-py/examples') diff --git a/playwright-py/examples/broken_links.py b/playwright-py/examples/broken_links.py new file mode 100644 index 0000000..c78520f --- /dev/null +++ b/playwright-py/examples/broken_links.py @@ -0,0 +1,58 @@ +"""Worked example: scan visible external links on a page for broken URLs. + +Env vars used: + TARGET_URL (default: http://localhost:5173) + +Run: + python examples/broken_links.py +""" + +import os +import sys +from pathlib import Path + +sys.path.insert(0, str(Path(__file__).parent.parent)) + +from playwright.sync_api import sync_playwright +from scripts.safe_actions import build_context_with_headers + +TARGET_URL = os.environ.get("TARGET_URL", "http://localhost:5173") + + +def main() -> int: + with sync_playwright() as p: + browser = p.chromium.launch(headless=True) + context = build_context_with_headers(browser) + page = context.new_page() + + page.goto(TARGET_URL) + page.wait_for_load_state("networkidle") + + # Collect unique external hrefs + links = page.locator('a[href^="http"]').all() + urls = sorted( + {link.get_attribute("href") for link in links if link.get_attribute("href")} + ) + + ok, bad, err = 0, 0, 0 + for url in urls: + try: + resp = page.request.head(url, timeout=5000) + status = resp.status + if status < 400: + ok += 1 + print(f"✓ {status} {url}") + else: + bad += 1 + print(f"✗ {status} {url}") + except Exception as ex: + err += 1 + print(f"✗ ERR {url} ({type(ex).__name__}: {ex})") + + print(f"\n{ok} ok, {bad} broken, {err} errored out of {len(urls)} total") + browser.close() + return 0 if (bad == 0 and err == 0) else 1 + + +if __name__ == "__main__": + sys.exit(main()) diff --git a/playwright-py/examples/console_logging.py b/playwright-py/examples/console_logging.py new file mode 100644 index 0000000..9329b5e --- /dev/null +++ b/playwright-py/examples/console_logging.py @@ -0,0 +1,35 @@ +from playwright.sync_api import sync_playwright + +# Example: Capturing console logs during browser automation + +url = 'http://localhost:5173' # Replace with your URL + +console_logs = [] + +with sync_playwright() as p: + browser = p.chromium.launch(headless=True) + page = browser.new_page(viewport={'width': 1920, 'height': 1080}) + + # Set up console log capture + def handle_console_message(msg): + console_logs.append(f"[{msg.type}] {msg.text}") + print(f"Console: [{msg.type}] {msg.text}") + + page.on("console", handle_console_message) + + # Navigate to page + page.goto(url) + page.wait_for_load_state('networkidle') + + # Interact with the page (triggers console logs) + page.click('text=Dashboard') + page.wait_for_timeout(1000) + + browser.close() + +# Save console logs to file +with open('/mnt/user-data/outputs/console.log', 'w') as f: + f.write('\n'.join(console_logs)) + +print(f"\nCaptured {len(console_logs)} console messages") +print(f"Logs saved to: /mnt/user-data/outputs/console.log") \ No newline at end of file diff --git a/playwright-py/examples/element_discovery.py b/playwright-py/examples/element_discovery.py new file mode 100644 index 0000000..917ba72 --- /dev/null +++ b/playwright-py/examples/element_discovery.py @@ -0,0 +1,40 @@ +from playwright.sync_api import sync_playwright + +# Example: Discovering buttons and other elements on a page + +with sync_playwright() as p: + browser = p.chromium.launch(headless=True) + page = browser.new_page() + + # Navigate to page and wait for it to fully load + page.goto('http://localhost:5173') + page.wait_for_load_state('networkidle') + + # Discover all buttons on the page + buttons = page.locator('button').all() + print(f"Found {len(buttons)} buttons:") + for i, button in enumerate(buttons): + text = button.inner_text() if button.is_visible() else "[hidden]" + print(f" [{i}] {text}") + + # Discover links + links = page.locator('a[href]').all() + print(f"\nFound {len(links)} links:") + for link in links[:5]: # Show first 5 + text = link.inner_text().strip() + href = link.get_attribute('href') + print(f" - {text} -> {href}") + + # Discover input fields + inputs = page.locator('input, textarea, select').all() + print(f"\nFound {len(inputs)} input fields:") + for input_elem in inputs: + name = input_elem.get_attribute('name') or input_elem.get_attribute('id') or "[unnamed]" + input_type = input_elem.get_attribute('type') or 'text' + print(f" - {name} ({input_type})") + + # Take screenshot for visual reference + page.screenshot(path='/tmp/page_discovery.png', full_page=True) + print("\nScreenshot saved to /tmp/page_discovery.png") + + browser.close() \ No newline at end of file diff --git a/playwright-py/examples/login_flow.py b/playwright-py/examples/login_flow.py new file mode 100644 index 0000000..d114ac6 --- /dev/null +++ b/playwright-py/examples/login_flow.py @@ -0,0 +1,55 @@ +"""Worked example: log in and verify redirect. + +Env vars used: + TARGET_URL (default: http://localhost:5173) + TEST_USER (default: test@example.com) + TEST_PASS (default: password123) + +Run from within the skill directory (so `scripts.safe_actions` resolves): + python examples/login_flow.py +""" + +import os +import sys +from pathlib import Path + +# Make sibling scripts/ importable +sys.path.insert(0, str(Path(__file__).parent.parent)) + +from playwright.sync_api import sync_playwright +from scripts.safe_actions import ( + handle_cookie_banner, + safe_click, + safe_type, + build_context_with_headers, +) + +TARGET_URL = os.environ.get("TARGET_URL", "http://localhost:5173") +TEST_USER = os.environ.get("TEST_USER", "test@example.com") +TEST_PASS = os.environ.get("TEST_PASS", "password123") + + +def main() -> int: + with sync_playwright() as p: + browser = p.chromium.launch(headless=True) + context = build_context_with_headers(browser) + page = context.new_page() + + page.goto(f"{TARGET_URL}/login") + page.wait_for_load_state("networkidle") + + handle_cookie_banner(page) + + safe_type(page, 'input[name="username"], input[name="email"]', TEST_USER) + safe_type(page, 'input[name="password"]', TEST_PASS) + safe_click(page, 'button[type="submit"]') + + page.wait_for_url("**/dashboard", timeout=5000) + print(f"✓ Logged in; redirected to {page.url}") + + browser.close() + return 0 + + +if __name__ == "__main__": + sys.exit(main()) diff --git a/playwright-py/examples/responsive_sweep.py b/playwright-py/examples/responsive_sweep.py new file mode 100644 index 0000000..d890d5b --- /dev/null +++ b/playwright-py/examples/responsive_sweep.py @@ -0,0 +1,51 @@ +"""Worked example: screenshot each viewport for responsive QA. + +Env vars used: + TARGET_URL (default: http://localhost:5173) + OUTPUT_DIR (default: /tmp) + +Run: + python examples/responsive_sweep.py +""" + +import os +import sys +from pathlib import Path + +sys.path.insert(0, str(Path(__file__).parent.parent)) + +from playwright.sync_api import sync_playwright +from scripts.safe_actions import build_context_with_headers + +TARGET_URL = os.environ.get("TARGET_URL", "http://localhost:5173") +OUTPUT_DIR = Path(os.environ.get("OUTPUT_DIR", "/tmp")) + +VIEWPORTS = [ + ("desktop", 1920, 1080), + ("laptop", 1366, 768), + ("tablet", 768, 1024), + ("mobile", 375, 667), +] + + +def main() -> int: + OUTPUT_DIR.mkdir(parents=True, exist_ok=True) + with sync_playwright() as p: + browser = p.chromium.launch(headless=True) + for name, width, height in VIEWPORTS: + context = build_context_with_headers( + browser, extra_kwargs={"viewport": {"width": width, "height": height}} + ) + page = context.new_page() + page.goto(TARGET_URL) + page.wait_for_load_state("networkidle") + path = OUTPUT_DIR / f"responsive-{name}.png" + page.screenshot(path=str(path), full_page=True) + print(f"✓ {name:<8} ({width:>4}x{height:<4}) → {path}") + context.close() + browser.close() + return 0 + + +if __name__ == "__main__": + sys.exit(main()) diff --git a/playwright-py/examples/static_html_automation.py b/playwright-py/examples/static_html_automation.py new file mode 100644 index 0000000..90bbedc --- /dev/null +++ b/playwright-py/examples/static_html_automation.py @@ -0,0 +1,33 @@ +from playwright.sync_api import sync_playwright +import os + +# Example: Automating interaction with static HTML files using file:// URLs + +html_file_path = os.path.abspath('path/to/your/file.html') +file_url = f'file://{html_file_path}' + +with sync_playwright() as p: + browser = p.chromium.launch(headless=True) + page = browser.new_page(viewport={'width': 1920, 'height': 1080}) + + # Navigate to local HTML file + page.goto(file_url) + + # Take screenshot + page.screenshot(path='/mnt/user-data/outputs/static_page.png', full_page=True) + + # Interact with elements + page.click('text=Click Me') + page.fill('#name', 'John Doe') + page.fill('#email', 'john@example.com') + + # Submit form + page.click('button[type="submit"]') + page.wait_for_timeout(500) + + # Take final screenshot + page.screenshot(path='/mnt/user-data/outputs/after_submit.png', full_page=True) + + browser.close() + +print("Static HTML automation completed!") \ No newline at end of file -- cgit v1.2.3