webapp-testing

Name: webapp-testing - Agent Skill
Rating: 4.2 (594 reviews)
Author: skillcreatorai

594

Apache-2.0

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.

Download Folder View on GitHub

CLI Install

Recommended

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-testing

Method 2 - openskills (supports sync & update)

npx openskills install skillcreatorai/Ai-Agent-Skills

Auto-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:

~/.claude/skills/webapp-testing/

SKILL.md

Skill Instructions

Back

Run with Cloud Agent

No setup needed. Let our cloud agents run this skill for you.

Select Provider

Select Model

Claude Sonnet 4.5

$0.20/task

Best for coding tasks

No setup required

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

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'

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