Web Application Testing Skill

This skill provides browser-based testing and debugging for local or accessible web applications using Playwright.

Execution Constraints

• Always detect whether required dependencies already exist.
• Install dependencies only if missing.
• Never reinstall, upgrade, or override existing tools unless explicitly requested.

---

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 browser screenshots
• Inspect browser console output
• Validate form submissions and user flows
• Check responsive behavior across viewports

---

Prerequisites

Runtime Environment

• Node.js (recommended >= 18)
• A locally running web application or accessible URL

Dependency Detection Rules

Before executing any browser automation:

1. Check that Node.js is available.
2. Detect whether Playwright is already installed in the project.
3. Install Playwright only if it is not present.

Example Checks

node -v
npm ls @playwright/test
pnpm ls @playwright/test

---

Core Capabilities

Browser Automation

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

Verification

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

Debugging

• Capture screenshots
• Inspect browser console logs
• Observe network activity
• Diagnose failed test steps

---

Usage Examples

Basic Navigation

await page.goto("http://localhost:3000");
const title = await page.title();
console.log(title);

Form Submission

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

Screenshot Capture

await page.screenshot({ path: "debug.png", fullPage: true });

---

Recommended Agent Execution Flow

1. Verify the application is reachable
2. Detect required dependencies
3. Install missing dependencies only if necessary
4. Launch browser automation
5. Execute interaction and verification steps
6. Capture evidence on failure
7. Close browser resources

---

Common Patterns

Wait for Element

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

Check Element Existence

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

Capture Console Logs

page.on("console", (msg) => {
  console.log("[browser]", msg.text());
});

Error Handling with Evidence

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

---

Guidelines

• Do not blindly install dependencies
• Prefer deterministic selectors
• Always wait for UI state transitions
• Capture screenshots for failures
• Close browser instances after execution

---

Limitations

• Requires a Node.js environment
• Not suitable for native mobile applications
• Complex authentication flows may require manual setup
• Some frameworks require Playwright-specific configuration