webapp-testing-example-1-screenshot-comparison-testing

Sub-skill of webapp-testing: Example 1: Screenshot Comparison Testing (+2).

5 stars

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

$curl -o ~/.claude/skills/example-1-screenshot-comparison-testing/SKILL.md --create-dirs "https://raw.githubusercontent.com/vamseeachanta/workspace-hub/main/.agents/skills/_archive/development/webapp-testing/example-1-screenshot-comparison-testing/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/example-1-screenshot-comparison-testing/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How webapp-testing-example-1-screenshot-comparison-testing Compares

Feature / Agentwebapp-testing-example-1-screenshot-comparison-testingStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/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

5
from vamseeachanta/workspace-hub

Extract and structure tax return data into YAML format for year-over-year comparison across different filing products

orcaflex-results-comparison

5
from vamseeachanta/workspace-hub

Compare results across multiple OrcaFlex simulations for design verification, sensitivity studies, and configuration comparison. Includes pretension, stiffness, and force distribution analysis.

webapp-testing

5
from vamseeachanta/workspace-hub

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

5
from vamseeachanta/workspace-hub

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

5
from vamseeachanta/workspace-hub

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

5
from vamseeachanta/workspace-hub

MkDocs example admonition syntax. Use when inserting code examples or worked demonstrations in MkDocs documentation.

skill-creator-inspiration-examples

5
from vamseeachanta/workspace-hub

Sub-skill of skill-creator: Inspiration & Examples.

skill-creator-example-1-scenario-name

5
from vamseeachanta/workspace-hub

Sub-skill of skill-creator: Example 1: [Scenario Name] (+1).

bash-script-framework-example-1-create-new-cli-tool

5
from vamseeachanta/workspace-hub

Sub-skill of bash-script-framework: Example 1: Create New CLI Tool (+1).

instrument-data-allotrope-example-1-vi-cell-blu-file

5
from vamseeachanta/workspace-hub

Sub-skill of instrument-data-allotrope: Example 1: Vi-CELL BLU file (+2).

github-actions-2-matrix-builds-for-cross-platform-testing

5
from vamseeachanta/workspace-hub

Sub-skill of github-actions: 2. Matrix Builds for Cross-Platform Testing.

wave-theory-example-1-complete-wave-analysis

5
from vamseeachanta/workspace-hub

Sub-skill of wave-theory: Example 1: Complete Wave Analysis.