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.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
skills listSkill Instructions
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. source: anthropics/skills license: Apache-2.0
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
More by skillcreatorai
View allCreate, update, and manage Jira issues from natural language. Use when the user wants to log bugs, create tickets, update issue status, or manage their Jira backlog.
Clarify requirements before implementing. Do not use automatically, only when invoked explicitly.
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for creating new documents, modifying content, working with tracked changes, or adding comments.
Backend API design, database architecture, microservices patterns, and test-driven development. Use for designing APIs, database schemas, or backend system architecture.