webapp-testing-example-1-screenshot-comparison-testing
Sub-skill of webapp-testing: Example 1: Screenshot Comparison Testing (+2).
Best use case
webapp-testing-example-1-screenshot-comparison-testing is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Sub-skill of webapp-testing: Example 1: Screenshot Comparison Testing (+2).
Teams using webapp-testing-example-1-screenshot-comparison-testing should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/example-1-screenshot-comparison-testing/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How webapp-testing-example-1-screenshot-comparison-testing Compares
| Feature / Agent | webapp-testing-example-1-screenshot-comparison-testing | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Sub-skill of webapp-testing: Example 1: Screenshot Comparison Testing (+2).
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Example 1: Screenshot Comparison Testing (+2)
## Example 1: Screenshot Comparison Testing
```python
from playwright.sync_api import sync_playwright
from pathlib import Path
def capture_page_state(url: str, output_dir: str):
"""Capture full page screenshot and HTML content."""
output = Path(output_dir)
output.mkdir(parents=True, exist_ok=True)
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto(url)
page.wait_for_load_state("networkidle")
# Screenshot
page.screenshot(path=str(output / "screenshot.png"), full_page=True)
# HTML content
(output / "content.html").write_text(page.content())
browser.close()
return output
# Usage
capture_page_state("http://localhost:3000", "tests/snapshots/")
```
## Example 2: Form Automation
```python
def submit_contact_form(page, name, email, message):
"""Submit a contact form and verify success."""
page.goto("http://localhost:3000/contact")
# Fill form fields
page.fill("[name='name']", name)
page.fill("[name='email']", email)
page.fill("[name='message']", message)
# Submit
page.click("button[type='submit']")
# Wait for success message
page.wait_for_selector(".success-message")
return page.locator(".success-message").text_content()
```
## Example 3: API Response Verification
```python
def verify_api_call(page, endpoint_pattern):
"""Intercept and verify API calls."""
api_response = None
def handle_response(response):
nonlocal api_response
if endpoint_pattern in response.url:
api_response = response.json()
page.on("response", handle_response)
page.goto("http://localhost:3000/dashboard")
page.wait_for_load_state("networkidle")
return api_response
```Related Skills
export-tax-summary-with-year-comparison
Extract and structure tax return data into YAML format for year-over-year comparison across different filing products
orcaflex-results-comparison
Compare results across multiple OrcaFlex simulations for design verification, sensitivity studies, and configuration comparison. Includes pretension, stiffness, and force distribution analysis.
webapp-testing
Web application testing toolkit using Playwright with Python. Use for verifying frontend functionality, debugging UI behavior, capturing browser screenshots, viewing browser logs, and automating web interactions.
testing-tdd-london
TDD London School (mockist) specialist for mock-driven, outside-in development. Use for behavior verification testing, contract-driven development, testing object collaborations, or when focusing on HOW objects interact rather than WHAT they contain.
testing-production
Production validation specialist ensuring applications are fully implemented and deployment-ready. Use to verify no mock/stub/fake implementations remain, validate against real databases and APIs, perform end-to-end testing with actual systems, and confirm production readiness.
mkdocs-example
MkDocs example admonition syntax. Use when inserting code examples or worked demonstrations in MkDocs documentation.
skill-creator-inspiration-examples
Sub-skill of skill-creator: Inspiration & Examples.
skill-creator-example-1-scenario-name
Sub-skill of skill-creator: Example 1: [Scenario Name] (+1).
bash-script-framework-example-1-create-new-cli-tool
Sub-skill of bash-script-framework: Example 1: Create New CLI Tool (+1).
instrument-data-allotrope-example-1-vi-cell-blu-file
Sub-skill of instrument-data-allotrope: Example 1: Vi-CELL BLU file (+2).
github-actions-2-matrix-builds-for-cross-platform-testing
Sub-skill of github-actions: 2. Matrix Builds for Cross-Platform Testing.
wave-theory-example-1-complete-wave-analysis
Sub-skill of wave-theory: Example 1: Complete Wave Analysis.