Webapp Testing

Name: Webapp Testing
Author: aiskillstore

aiskillstore/marketplace

221 installs
404 repo stars
Updated August 5, 2026
aiskillstore/marketplace

Run structured browser and UI tests on web apps before release to catch regressions, broken flows, accessibility gaps, and cross-browser layout defects.

About

Marketplace skill for systematic web application testing that guides agents through browser-based UI checks, flow validation, and regression detection before shipping SaaS, extension, or mobile web surfaces.

Browser UI regression suites
End-to-end user-flow validation
Pre-release defect triage
Cross-browser sanity checks
Screenshot and interaction auditing

Webapp Testing by the numbers

221 all-time installs (skills.sh)
Ranked #785 of 2,153 Testing & QA skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/aiskillstore/marketplace --skill webapp-testing

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/aiskillstore/marketplace/webapp-testing.svg)](https://skillselion.com/skills/aiskillstore/marketplace/webapp-testing)

Installs	221
repo stars	★ 404
Last updated	August 5, 2026
Repository	aiskillstore/marketplace ↗

What it does

Run structured browser and UI tests on web apps before release to catch regressions, broken flows, accessibility gaps, and cross-browser layout defects.

Files

SKILL.mdMarkdownGitHub ↗

Web Application Testing

This skill enables comprehensive testing and debugging of local web applications using Playwright automation.

When to Use This Skill

Use this skill when you need to:

Test frontend functionality in a real browser
Verify UI behavior and interactions
Debug web application issues
Capture screenshots for documentation or debugging
Inspect browser console logs
Validate form submissions and user flows
Check responsive design across viewports

Prerequisites

Node.js installed on the system
A locally running web application (or accessible URL)
Playwright will be installed automatically if not present

Core Capabilities

1. Browser Automation

Navigate to URLs
Click buttons and links
Fill form fields
Select dropdowns
Handle dialogs and alerts

2. Verification

Assert element presence
Verify text content
Check element visibility
Validate URLs
Test responsive behavior

3. Debugging

Capture screenshots
View console logs
Inspect network requests
Debug failed tests

Usage Examples

Example 1: Basic Navigation Test

// Navigate to a page and verify title
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);

Example 2: Form Interaction

// Fill out and submit a form
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');

Example 3: Screenshot Capture

// Capture a screenshot for debugging
await page.screenshot({ path: 'debug.png', fullPage: true });

Guidelines

1. Always verify the app is running - Check that the local server is accessible before running tests 2. Use explicit waits - Wait for elements or navigation to complete before interacting 3. Capture screenshots on failure - Take screenshots to help debug issues 4. Clean up resources - Always close the browser when done 5. Handle timeouts gracefully - Set reasonable timeouts for slow operations 6. Test incrementally - Start with simple interactions before complex flows 7. Use selectors wisely - Prefer data-testid or role-based selectors over CSS classes

Common Patterns

Pattern: Wait for Element

await page.waitForSelector('#element-id', { state: 'visible' });

Pattern: Check if Element Exists

const exists = await page.locator('#element-id').count() > 0;

Pattern: Get Console Logs

page.on('console', msg => console.log('Browser log:', msg.text()));

Pattern: Handle Errors

try {
  await page.click('#button');
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  throw error;
}

Limitations

Requires Node.js environment
Cannot test native mobile apps (use React Native Testing Library instead)
May have issues with complex authentication flows
Some modern frameworks may require specific configuration

{
  "schema_version": "2.0",
  "meta": {
    "generated_at": "2026-01-16T13:50:51.897Z",
    "slug": "7spade-webapp-testing",
    "source_url": "https://github.com/7Spade/ng-dragon/tree/main/.github/skills/webapp-testing",
    "source_ref": "main",
    "model": "claude",
    "analysis_version": "3.0.0",
    "source_type": "community",
    "content_hash": "cb9a6513de3ef6c779903a3bb5237541c7815a832f97098493368e5447b2c44b",
    "tree_hash": "6ef4a534b9c9bf44eb3f147a8aa9ddb5236b63f949fe3a8b4953dc996f1f90cb"
  },
  "skill": {
    "name": "webapp-testing",
    "description": "Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.",
    "summary": "Toolkit for interacting with and testing local web applications using Playwright. Supports verifying...",
    "icon": "🧪",
    "version": "1.0.0",
    "author": "7Spade",
    "license": "MIT",
    "category": "development",
    "tags": [
      "playwright",
      "testing",
      "browser-automation",
      "frontend",
      "debugging"
    ],
    "supported_tools": [
      "claude",
      "codex",
      "claude-code"
    ],
    "risk_factors": [
      "network",
      "filesystem",
      "external_commands"
    ]
  },
  "security_audit": {
    "risk_level": "safe",
    "is_blocked": false,
    "safe_to_publish": true,
    "summary": "Pure documentation skill containing only usage guidance for Playwright browser automation. No executable code, no network calls, no file system access, and no external command execution. The skill provides prompts and examples that users execute in their own environment. All static findings are false positives - patterns detected in documentation examples or metadata fields.",
    "risk_factor_evidence": [
      {
        "factor": "network",
        "evidence": [
          {
            "file": "skill-report.json",
            "line_start": 6,
            "line_end": 6
          },
          {
            "file": "skill-report.json",
            "line_start": 103,
            "line_end": 103
          },
          {
            "file": "skill-report.json",
            "line_start": 125,
            "line_end": 125
          },
          {
            "file": "SKILL.md",
            "line_start": 54,
            "line_end": 54
          }
        ]
      },
      {
        "factor": "filesystem",
        "evidence": [
          {
            "file": "skill-report.json",
            "line_start": 6,
            "line_end": 6
          }
        ]
      },
      {
        "factor": "external_commands",
        "evidence": [
          {
            "file": "SKILL.md",
            "line_start": 52,
            "line_end": 57
          },
          {
            "file": "SKILL.md",
            "line_start": 57,
            "line_end": 60
          },
          {
            "file": "SKILL.md",
            "line_start": 60,
            "line_end": 66
          },
          {
            "file": "SKILL.md",
            "line_start": 66,
            "line_end": 69
          },
          {
            "file": "SKILL.md",
            "line_start": 69,
            "line_end": 72
          },
          {
            "file": "SKILL.md",
            "line_start": 72,
            "line_end": 87
          },
          {
            "file": "SKILL.md",
            "line_start": 87,
            "line_end": 89
          },
          {
            "file": "SKILL.md",
            "line_start": 89,
            "line_end": 92
          },
          {
            "file": "SKILL.md",
            "line_start": 92,
            "line_end": 94
          },
          {
            "file": "SKILL.md",
            "line_start": 94,
            "line_end": 97
          },
          {
            "file": "SKILL.md",
            "line_start": 97,
            "line_end": 99
          },
          {
            "file": "SKILL.md",
            "line_start": 99,
            "line_end": 102
          },
          {
            "file": "SKILL.md",
            "line_start": 102,
            "line_end": 109
          }
        ]
      }
    ],
    "critical_findings": [],
    "high_findings": [],
    "medium_findings": [],
    "low_findings": [],
    "dangerous_patterns": [],
    "files_scanned": 2,
    "total_lines": 296,
    "audit_model": "claude",
    "audited_at": "2026-01-16T13:50:51.897Z"
  },
  "content": {
    "user_title": "Test web apps with Playwright automation",
    "value_statement": "Manual browser testing is slow and error-prone. This skill provides ready-to-use prompts for automated web testing including form validation, screenshot capture, and console log inspection using Playwright.",
    "seo_keywords": [
      "playwright testing",
      "web application testing",
      "browser automation",
      "claude code testing",
      "frontend testing",
      "ui testing automation",
      "claude playwright",
      "codex testing",
      "end-to-end testing",
      "browser debugging"
    ],
    "actual_capabilities": [
      "Navigate to URLs and verify page content",
      "Interact with forms, buttons, and dropdowns",
      "Capture screenshots of pages and elements",
      "Collect and inspect browser console logs",
      "Assert element presence and text content",
      "Test responsive behavior across viewports"
    ],
    "limitations": [
      "Requires Node.js environment with Playwright installed",
      "Cannot test native mobile applications",
      "Complex authentication flows may require additional configuration",
      "Modern frameworks may need specific Playwright setup"
    ],
    "use_cases": [
      {
        "target_user": "Frontend developers",
        "title": "Verify UI interactions",
        "description": "Automate button clicks, form submissions, and navigation flows to catch regression bugs early."
      },
      {
        "target_user": "QA engineers",
        "title": "Create test scripts",
        "description": "Generate Playwright test scripts for regression testing without writing code from scratch."
      },
      {
        "target_user": "Documentation writers",
        "title": "Capture UI screenshots",
        "description": "Automate screenshot capture for documentation and bug reports with consistent styling."
      }
    ],
    "prompt_templates": [
      {
        "title": "Basic page test",
        "scenario": "Check if page loads correctly",
        "prompt": "Use Playwright to navigate to http://localhost:3000 and verify the page title contains 'Home'. Take a screenshot if the title does not match."
      },
      {
        "title": "Form submission",
        "scenario": "Test login form behavior",
        "prompt": "Write a Playwright script that fills the login form with username 'testuser' and password 'testpass', submits it, and verifies the URL changes to the dashboard."
      },
      {
        "title": "Console inspection",
        "scenario": "Debug JavaScript errors",
        "prompt": "Navigate to the app, capture all browser console logs, and report any errors found. Take a screenshot of any console errors."
      },
      {
        "title": "Responsive test",
        "scenario": "Verify mobile layout",
        "prompt": "Test the page at viewport sizes 375x667 (mobile) and 1920x1080 (desktop). Verify the navigation menu is visible and report any layout issues."
      }
    ],
    "output_examples": [
      {
        "input": "Test the login form on my local React app at localhost:3000",
        "output": [
          "Navigated to http://localhost:3000",
          "Filled username and password fields",
          "Submitted form successfully",
          "URL changed to /dashboard",
          "Page loaded without console errors",
          "Test passed: Login flow works correctly"
        ]
      },
      {
        "input": "Check for JavaScript errors on my app and take a screenshot if there are issues",
        "output": [
          "Opened browser console listener",
          "Navigated to application",
          "Captured 3 console messages",
          "No errors detected",
          "Page rendered successfully"
        ]
      },
      {
        "input": "Verify my app works on mobile viewport",
        "output": [
          "Set viewport to 375x667 (iPhone SE)",
          "Navigation menu visible",
          "Content scrolled correctly",
          "No layout breakage detected",
          "Passed mobile compatibility check"
        ]
      }
    ],
    "best_practices": [
      "Always verify the local server is running before executing tests",
      "Use explicit waits for elements before interacting with them",
      "Take screenshots on failure to help diagnose issues"
    ],
    "anti_patterns": [
      "Avoid using CSS class selectors that may change; use data-testid or role attributes instead",
      "Do not skip waiting for network idle on pages with dynamic content",
      "Avoid hardcoded timeouts; use intelligent wait strategies instead"
    ],
    "faq": [
      {
        "question": "What AI tools support this skill?",
        "answer": "This skill works with Claude, Codex, and Claude Code. Each tool can execute the Playwright prompts to automate browser testing."
      },
      {
        "question": "What are the resource limits?",
        "answer": "Playwright tests run in your local environment. Resource usage depends on the browser instances you launch and the pages you test."
      },
      {
        "question": "How does this integrate with my project?",
        "answer": "The skill generates Playwright scripts you run in your Node.js environment. Install Playwright with npm and run scripts locally."
      },
      {
        "question": "Is my data safe?",
        "answer": "All testing happens locally in your environment. No data is sent to external servers. You control what URLs and content are accessed."
      },
      {
        "question": "Why did my test fail?",
        "answer": "Common issues include: server not running, wrong port, elements using dynamic selectors, or authentication requirements not met."
      },
      {
        "question": "How is this different from unit testing?",
        "answer": "Browser automation tests run in a real browser, testing the full stack including JavaScript execution, rendering, and user interactions."
      }
    ]
  },
  "file_structure": [
    {
      "name": "SKILL.md",
      "type": "file",
      "path": "SKILL.md",
      "lines": 116
    }
  ]
}