Webapp Testing
Exercise a local or staging web app in headless Chromium with Playwright to capture console output and map on-page controls before release.
Overview
Webapp-testing is an agent skill for the Ship phase that runs Playwright headless browser sessions to capture console logs and discover UI elements on web apps.
Install
npx skills add https://github.com/composiohq/awesome-claude-skills --skill webapp-testingWhat is this skill?
- Headless Chromium via Playwright sync API with 1920×1080 viewport
- Hooks page.on('console') to collect typed browser console lines to disk
- Waits for networkidle after navigation before interactions
- Discovers button elements via locator queries for smoke exploration
- Example flows target localhost dev servers (e.g. port 5173)
- Default viewport 1920×1080
- Example dev URL port 5173
Adoption & trust: 2.5k installs on skills.sh; 63.7k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You cannot see what the browser console prints or which controls exist on the page without manually clicking through every build.
Who is it for?
Indie devs iterating on localhost frontends who need fast console capture and DOM smoke discovery before merge.
Skip if: Teams needing production load testing, mobile native apps, or a managed cloud browser farm out of the box.
When should I use this skill?
You need Playwright browser automation to capture console logs or explore buttons on a running web application URL.
What do I get? / Deliverables
You get reproducible Playwright scripts, a saved console log file, and a button inventory to inform fixes or fuller E2E tests.
- Console log text file
- Playwright interaction script pattern
- Button count / element discovery output
Recommended Skills
Journey fit
How it compares
Browser automation snippets for dev smoke checks—not a replacement for structured test frameworks like Cypress component suites.
Common Questions / FAQ
Who is webapp-testing for?
Solo and indie builders shipping web frontends who want Playwright-driven console logging and element discovery without writing tests from scratch.
When should I use webapp-testing?
Use it in Ship during testing when validating localhost or staging URLs, after UI changes that affect console noise, or before launch when you need a quick interactive smoke pass.
Is webapp-testing safe to install?
It launches a local browser and may write log files; review the Security Audits panel on this page and avoid pointing automation at untrusted URLs with sensitive sessions.
SKILL.md
READMESKILL.md - Webapp Testing
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") 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() 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!") Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall