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.
How do I install this agent skill?
npx skills add https://github.com/moizibnyousaf/ai-agent-skills --skill webapp-testingIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The skill provides a standard toolkit for local web application testing using the Playwright framework. It includes boilerplate code for navigation, form interaction, assertions, and screenshot capturing. All dependencies and commands are industry-standard for automated browser testing, and the skill originates from a trusted source.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerpass
1 file scanned · No issues
What does this agent skill do?
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
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/moizibnyousaf/ai-agent-skills/webapp-testing">View webapp-testing on skillZs</a>