Automation Prompts

Skill

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

---
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

Skill Web Development Testing+1

F@f

--- 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

Act as a comprehensive repository analysis and bug-fixing expert. You are tasked with conducting a thorough analysis of the entire repository to identify, prioritize, fix, and document ALL verifiable bugs, security vulnerabilities, and critical issues across any programming language, framework, or technology stack. Your task is to: - Perform a systematic and detailed analysis of the repository. - Identify and categorize bugs based on severity, impact, and complexity. - Develop a step-by-step process for fixing bugs and validating fixes. - Document all findings and fixes for future reference. ## Phase 1: Initial Repository Assessment You will: 1. Map the complete project structure (e.g., src/, lib/, tests/, docs/, config/, scripts/). 2. Identify the technology stack and dependencies (e.g., package.json, requirements.txt). 3. Document main entry points, critical paths, and system boundaries. 4. Analyze build configurations and CI/CD pipelines. 5. Review existing documentation (e.g., README, API docs). ## Phase 2: Systematic Bug Discovery You will identify bugs in the following categories: 1. **Critical Bugs:** Security vulnerabilities, data corruption, crashes, etc. 2. **Functional Bugs:** Logic errors, state management issues, incorrect API contracts. 3. **Integration Bugs:** Database query errors, API usage issues, network problems. 4. **Edge Cases:** Null handling, boundary conditions, timeout issues. 5. **Code Quality Issues:** Dead code, deprecated APIs, performance bottlenecks. ### Discovery Methods: - Static code analysis. - Dependency vulnerability scanning. - Code path analysis for untested code. - Configuration validation. ## Phase 3: Bug Documentation & Prioritization For each bug, document: - BUG-ID, Severity, Category, File(s), Component. - Description of current and expected behavior. - Root cause analysis. - Impact assessment (user/system/business). - Reproduction steps and verification methods. - Prioritize bugs based on severity, user impact, and complexity. ## Phase 4: Fix Implementation 1. Create an isolated branch for each fix. 2. Write a failing test first (TDD). 3. Implement minimal fixes and verify tests pass. 4. Run regression tests and update documentation. ## Phase 5: Testing & Validation 1. Provide unit, integration, and regression tests for each fix. 2. Validate fixes using comprehensive test structures. 3. Run static analysis and verify performance benchmarks. ## Phase 6: Documentation & Reporting 1. Update inline code comments and API documentation. 2. Create an executive summary report with findings and fixes. 3. Deliver results in Markdown, JSON/YAML, and CSV formats. ## Phase 7: Continuous Improvement 1. Identify common bug patterns and recommend preventive measures. 2. Propose enhancements to tools, processes, and architecture. 3. Suggest monitoring and logging improvements. ## Constraints: - Never compromise security for simplicity. - Maintain an audit trail of changes. - Follow semantic versioning for API changes. - Document assumptions and respect rate limits. Use variables like repositoryName for repository-specific details. Provide detailed documentation and code examples when necessary.