Command Code

Webapp Testing

Tests local web applications using Playwright for verifying frontend functionality, debugging UI behavior, and capturing screenshots.

Download this Skill

npx degit LangbaseInc/agent-skills/webapp-testing my-webapp-testing

Key Features

  • Frontend Verification - Test UI components and behavior
  • Debugging - Debug UI issues systematically
  • Screenshots - Capture visual states
  • Interaction Testing - Click, type, navigate
  • Responsive Testing - Test across viewports
  • Accessibility - Check a11y compliance

Testing Capabilities

Functional Testing

  • Form submissions
  • Navigation flows
  • Button interactions
  • Data display
  • Error handling
  • Loading states

Visual Testing

  • Screenshot comparison
  • Layout verification
  • Responsive design
  • Cross-browser rendering
  • Theme switching

Performance

  • Page load times
  • Network requests
  • Resource loading
  • JavaScript execution

Test Structure

Setup

import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }) => { await page.goto('http://localhost:3000'); });

Test Cases

test('should display homepage', async ({ page }) => { await expect(page).toHaveTitle(/Home/); await expect(page.locator('h1')).toBeVisible(); });

Common Test Patterns

Navigation

await page.goto('/about'); await page.click('a[href="/contact"]');

Form Testing

await page.fill('input[name="email"]', 'test@example.com'); await page.click('button[type="submit"]'); await expect(page.locator('.success')).toBeVisible();

Waiting

await page.waitForSelector('.loaded'); await page.waitForLoadState('networkidle');

Screenshots

await page.screenshot({ path: 'homepage.png' }); await page.locator('.component').screenshot({ path: 'component.png' });

Debugging UI Issues

Check Element Presence

const element = await page.locator('.class'); console.log(await element.count());

Inspect Element State

console.log(await element.isVisible()); console.log(await element.textContent()); console.log(await element.getAttribute('class'));

Network Monitoring

page.on('request', request => console.log(request.url())); page.on('response', response => console.log(response.status()));

Console Logs

page.on('console', msg => console.log(msg.text()));

Best Practices

  • Test user flows, not implementation
  • Use data-testid for stable selectors
  • Wait for elements properly
  • Keep tests independent
  • Clean up after tests
  • Use page objects for reusability
  • Test edge cases
  • Capture screenshots on failure

Responsive Testing

test('mobile view', async ({ page }) => { await page.setViewportSize({ width: 375, height: 667 }); // Test mobile layout }); test('tablet view', async ({ page }) => { await page.setViewportSize({ width: 768, height: 1024 }); // Test tablet layout });

Use Cases

  • CI/CD testing
  • Manual QA automation
  • Regression testing
  • Visual regression
  • Cross-browser testing
  • Accessibility audits
  • Performance monitoring