Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
crialabs avatar

Webapp Testing

  • 1 installs
  • Updated March 25, 2026
  • crialabs/saass01

Test full-stack TypeScript SaaS applications with Next.js frontend and Fastify backend.

About

SAASS01 is a full-stack TypeScript monorepo with shared Zod schemas, Prisma migrations, and testing patterns. Includes frontend, API, and database test setup.

  • Full-stack testing patterns
  • Shared type definitions with Zod

Webapp Testing by the numbers

  • 1 all-time installs (skills.sh)
  • Ranked #1,750 of 2,153 Testing & QA skills by installs in the Skillselion catalog
  • Data as of Jul 8, 2026 (Skillselion catalog sync)
npx skills add https://github.com/crialabs/saass01 --skill webapp-testing

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1
Last updatedMarch 25, 2026
Repositorycrialabs/saass01

What it does

Test full-stack TypeScript SaaS applications with Next.js frontend and Fastify backend.

Files

SKILL.mdMarkdownGitHub ↗

Web Application Testing

This skill enables comprehensive testing and debugging of local web applications using Playwright automation.

When to Use This Skill

Use this skill when you need to:

  • Test frontend functionality in a real browser
  • Verify UI behavior and interactions
  • Debug web application issues
  • Capture screenshots for documentation or debugging
  • Inspect browser console logs
  • Validate form submissions and user flows
  • Check responsive design across viewports

Prerequisites

  • Node.js installed on the system
  • A locally running web application (or accessible URL)
  • Playwright will be installed automatically if not present

Core Capabilities

1. Browser Automation

  • Navigate to URLs
  • Click buttons and links
  • Fill form fields
  • Select dropdowns
  • Handle dialogs and alerts

2. Verification

  • Assert element presence
  • Verify text content
  • Check element visibility
  • Validate URLs
  • Test responsive behavior

3. Debugging

  • Capture screenshots
  • View console logs
  • Inspect network requests
  • Debug failed tests

Usage Examples

Example 1: Basic Navigation Test

// Navigate to a page and verify title
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);

Example 2: Form Interaction

// Fill out and submit a form
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');

Example 3: Screenshot Capture

// Capture a screenshot for debugging
await page.screenshot({ path: 'debug.png', fullPage: true });

Guidelines

1. Always verify the app is running - Check that the local server is accessible before running tests 2. Use explicit waits - Wait for elements or navigation to complete before interacting 3. Capture screenshots on failure - Take screenshots to help debug issues 4. Clean up resources - Always close the browser when done 5. Handle timeouts gracefully - Set reasonable timeouts for slow operations 6. Test incrementally - Start with simple interactions before complex flows 7. Use selectors wisely - Prefer data-testid or role-based selectors over CSS classes

Common Patterns

Pattern: Wait for Element

await page.waitForSelector('#element-id', { state: 'visible' });

Pattern: Check if Element Exists

const exists = (await page.locator('#element-id').count()) > 0;

Pattern: Get Console Logs

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

Pattern: Handle Errors

try {
  await page.click('#button');
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  throw error;
}

Limitations

  • Requires Node.js environment
  • Cannot test native mobile apps (use React Native Testing Library instead)
  • May have issues with complex authentication flows
  • Some modern frameworks may require specific configuration

Related skills

Testing & QAtestingbackend

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.