Coding Development

# Web Application Testing Skill

**Category:** Coding & Development  
**Source:** Awesome ChatGPT Prompts

## 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
> ```javascript
> // 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
> ```javascript
> // 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
> ```javascript
> await page.waitForSelector('#element-id', { state: 'visible' });
> ```
> 
> ### Pattern: Check if Element Exists
> ```javascript
> const exists = await page.locator('#element-id').count() > 0;
> ```
> 
> ### Pattern: Get Console Logs
> ```javascript
> page.on('console', msg => console.log('Browser log:', msg.text()));
> ```
> 
> ### Pattern: Handle Errors
> ```javascript
> 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

---
[← Back to Coding & Development](README.md) · [Main index](../../README.md)