Web Application Testing Skill (Imported)

Importierte Duplikat-Variante der Playwright-Testskill für lokale Webanwendungen — inhaltlich identisch zum Original.

Der Prompt

---
name: web-application-testing-skill
description: A toolkit for interacting with and testing local web applications using Playwright.
---

# 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
```javascript
// 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) {\n  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

## So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT" dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch."


## Im Detail

Inhaltlich identisch mit der Web Application Testing Skill, aber als importierte Variante gekennzeichnet — vermutlich aus einer anderen Sammlung übernommen. Richtet eine KI als Playwright-gestützten Testassistenten für lokale Webanwendungen ein: Navigation, Klicks, Formulareingaben, Konsolen-Log-Prüfung, Screenshots und Responsive-Checks. Nützlich, wenn Testfälle in natürlicher Sprache statt in Testcode formuliert werden sollen. Da es sich um ein Duplikat handelt, lohnt sich vorab ein Blick, ob die Originalversion im Verzeichnis bereits ausreicht, bevor beide parallel gepflegt werden.

## Praxis-Tipp

Wie beim Original: konkrete Testschritte angeben, z. B. „Prüfe auf localhost:3000, ob das Anmeldeformular bei falschem Passwort eine Fehlermeldung zeigt“.

## Siehe auch

- [Accessibility Auditor](/ki-verzeichnis/openai-chatgpt/accessibility-auditor/)

## Lizenz & Quelle

- **Lizenz:** CC0-1.0 (Public Domain)
- **Quelle:** [awesome-chatgpt-prompts (GitHub)](https://github.com/f/awesome-chatgpt-prompts)

Lade …