mcpField
W
webapp-testing

webapp-testing

github.com/moizibnyousafTesting & quality1.2k162 installsUpdated 6w ago
Repository

About webapp-testing

A skill for testing web applications with Playwright, covering browser actions, assertions, screenshots, console and page errors, network interception, and test execution.

Key features

  1. 01Navigate and interact with pages
  2. 02Fill and check form controls
  3. 03Assert page and element states
  4. 04Capture page or element screenshots
  5. 05Monitor logs and intercept requests
  6. 06Run Playwright tests

Use cases

  1. 01Testing page navigation and forms
  2. 02Verifying content and UI states
  3. 03Capturing screenshots for review
  4. 04Mocking API responses in tests

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/moizibnyousaf/ai-agent-skills --skill webapp-testing

After installing, type/webapp-testingin Claude Code to confirm it loaded.

Details

From the project README

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"]', '[email protected]');
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

Comments

Markdown supported