MCPInstall

webapp-testing

by github OfficialTesting & QA

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.

Installs
12.5K
Last 24h
—
Trending rank
—
Security
Pass

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/github/awesome-copilot --skill webapp-testing
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads webapp-testing automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·The skill provides utility documentation and code helpers for automated frontend testing using Playwright. It does not introduce any security vulnerabilities, malicious patterns, or unauthorized activities.
Socket PassNo alerts
Snyk PassLOW ·Risk: LOW · No issues
Runlayer PassNONE ·2 files scanned · No issues
ZeroLeaks PassNONE ·Score: 93/100 · 2 sections analyzed

SKILL.md

The instructions your agent reads when the skill is triggered.

Web Application Testing

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

You should use the Playwright MCP Server to undertake the work if possible. If the MCP Server is unavailable, you can run the code in a local Node.js environment with Playwright installed.

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

Helper Functions

Some helper functions are available in test-helper.js to simplify common tasks like waiting for elements, capturing screenshots, and handling errors. You can import and use these functions in your tests to improve readability and maintainability.

FAQ

What does the webapp-testing skill do?

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.

How do I install webapp-testing?

Run npx skills add https://github.com/github/awesome-copilot --skill webapp-testing in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/webapp-testing/ (personal) or .claude/skills/webapp-testing/ (project).

Which AI agents can use webapp-testing?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is webapp-testing safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains webapp-testing?

It is published by github in github/awesome-copilot, and it is an official skill from the maker of the technology it covers. It has 12,463 recorded installs.

More from github/awesome-copilot

View all →

git-commit

github/awesome-copilot

Use this skill when the user wants to make a Git commit or split changes into more than one commit. Also use it when the user types "/commit" or asks for a conventional commit. The skill examines the diff, stages the related files, writes a Conventional Commits message, and runs git commit. Do not use it when the user wants only a commit message and no commit. Do not use it to push, open a pull request, rebase, or change the commit history.

OfficialCode Quality & Workflow47.4K installs

excalidraw-diagram-generator

github/awesome-copilot

Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.

OfficialDocs & Writing31.9K installs

multi-stage-dockerfile

github/awesome-copilot

Create optimized multi-stage Dockerfiles for any language or framework

Official29.8K installs

documentation-writer

github/awesome-copilot

Diátaxis Documentation Expert. An expert technical writer specializing in creating high-quality software documentation, guided by the principles and structure of the Diátaxis technical documentation authoring framework.

OfficialDocs & Writing27.9K installs

prd

github/awesome-copilot

Generate high-quality Product Requirements Documents (PRDs) for software systems and AI-powered features. Includes executive summaries, user stories, technical specifications, and risk analysis.

Official24.1K installs

refactor

github/awesome-copilot

Surgical code refactoring to improve maintainability without changing behavior. Covers extracting functions, renaming variables, breaking down god functions, improving type safety, eliminating code smells, and applying design patterns. Less drastic than repo-rebuilder; use for gradual improvements.

OfficialCode Quality & Workflow22.4K installs

Popular testing & qa skills

View category →

tdd

mattpocock/skills

Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.

Testing & QA1.2M installs

grilling

mattpocock/skills

Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.

Testing & QA996.2K installs

migrate-to-shoehorn

mattpocock/skills

Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.

Testing & QA484.1K installs

run-train

lllllllama/rigorpilot-skills

Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.

Testing & QA337.8K installs

test-driven-development

obra/superpowers

Use when implementing any feature or bugfix, before writing implementation code

Testing & QA261.8K installs

finishing-a-development-branch

obra/superpowers

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work

Testing & QA216.8K installs