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.
Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.
Method 1 - skills CLI
npx skills i skillcreatorai/Ai-Agent-Skills/skills/webapp-testingMethod 2 - openskills (supports sync & update)
npx openskills install skillcreatorai/Ai-Agent-SkillsAuto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.
Installation Path
Download and extract to one of the following locations:
No setup needed. Let our cloud agents run this skill for you.
Select Provider
Select Model
Best for coding tasks
No setup required
npm init playwright@latestimport { 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/);
});await page.goto('http://localhost:3000');
await page.goBack();
await page.reload();await page.click('button');
await page.click('text=Submit');
await page.click('#submit-btn');
await page.click('[data-testid="submit"]');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"]');await page.waitForSelector('.loaded');
await page.waitForURL('**/dashboard');
await page.waitForResponse('**/api/data');
await page.waitForTimeout(1000); // Avoid if possibleawait expect(page.locator('h1')).toHaveText('Welcome');
await expect(page.locator('.items')).toHaveCount(5);
await expect(page.locator('button')).toBeEnabled();
await expect(page.locator('.modal'
// Full page
await page.screenshot({ path: 'screenshot.png', fullPage: true });
// Element only
await page.locator('.chart').screenshot({ path: 'chart.png' });page.on('console', msg => console.log(msg.text()));
page.on('pageerror', err => console.error(err.message));await page.route('**/api/data', route => {
route.fulfill({
status: 200,
body: JSON.stringify({ items: [] })
});
});# 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