ReddRadar
Agent skill
webapp-testing
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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/webapp-testing-skillcreatorai-ai-agent-skills
SKILL.md
Web App Testing with Playwright
Setup
npm init playwright@latest
Basic Test Structure
import { test, expect } from '@playwright/test';
test('homepage has title', async ({ page }) => {
await page.goto('http://localhost:3000');
await expect(page).toHaveTitle(/My App/);
});
test('can navigate to about page', async ({ page }) => {
await page.goto('http://localhost:3000');
await page.click('text=About');
await expect(page).toHaveURL(/.*about/);
});
Common Actions
Navigation
await page.goto('http://localhost:3000');
await page.goBack();
await page.reload();
Clicking
await page.click('button');
await page.click('text=Submit');
await page.click('#submit-btn');
await page.click('[data-testid="submit"]');
Form Input
await page.fill('input[name="email"]', 'test@example.com');
await page.fill('#password', 'secret123');
await page.selectOption('select#country', 'USA');
await page.check('input[type="checkbox"]');
Waiting
await page.waitForSelector('.loaded');
await page.waitForURL('**/dashboard');
await page.waitForResponse('**/api/data');
await page.waitForTimeout(1000); // Avoid if possible
Assertions
await expect(page.locator('h1')).toHaveText('Welcome');
await expect(page.locator('.items')).toHaveCount(5);
await expect(page.locator('button')).toBeEnabled();
await expect(page.locator('.modal')).toBeVisible();
await expect(page.locator('input')).toHaveValue('test');
Screenshots
// Full page
await page.screenshot({ path: 'screenshot.png', fullPage: true });
// Element only
await page.locator('.chart').screenshot({ path: 'chart.png' });
Console Logs
page.on('console', msg => console.log(msg.text()));
page.on('pageerror', err => console.error(err.message));
Network Interception
await page.route('**/api/data', route => {
route.fulfill({
status: 200,
body: JSON.stringify({ items: [] })
});
});
Running Tests
# Run all tests
npx playwright test
# Run specific file
npx playwright test tests/login.spec.ts
# Run in headed mode
npx playwright test --headed
# Run with UI
npx playwright test --ui
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?