aboutsummaryrefslogtreecommitdiff
path: root/playwright-py/examples/responsive_sweep.py
diff options
context:
space:
mode:
authorCraig Jennings <c@cjennings.net>2026-04-19 15:24:51 -0500
committerCraig Jennings <c@cjennings.net>2026-04-19 15:24:51 -0500
commit4ffa7417a359ef4eae09f61d7da4de06539462ca (patch)
treeb8eeb8aa5ec2344216c0f0cdcdcc82d0df307ce3 /playwright-py/examples/responsive_sweep.py
parent11f5f003eef12bff9633ca8190e3c43c7dab6708 (diff)
downloadrulesets-4ffa7417a359ef4eae09f61d7da4de06539462ca.tar.gz
rulesets-4ffa7417a359ef4eae09f61d7da4de06539462ca.zip
refactor(playwright): split into playwright-js + playwright-py variants
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.
Diffstat (limited to 'playwright-py/examples/responsive_sweep.py')
-rw-r--r--playwright-py/examples/responsive_sweep.py51
1 files changed, 51 insertions, 0 deletions
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())