AgentAlley

Home · Skills · Agent Skill

Web Application Testing Skill

Toolkit for interacting with and testing local web applications using Playwright.

No install, no account.

Paste into Claude, ChatGPT or Cursor.

Read the source116 lines
web-application-testing-skill/SKILL.md116 lines3.1 KBRawView on GitHub
1---
2name: web-application-testing-skill
3description: A toolkit for interacting with and testing local web applications using Playwright.
4---
5 
6# Web Application Testing
7 
8This skill enables comprehensive testing and debugging of local web applications using Playwright automation.
9 
10## When to Use This Skill
11 
12Use this skill when you need to:
13- Test frontend functionality in a real browser
14- Verify UI behavior and interactions
15- Debug web application issues
16- Capture screenshots for documentation or debugging
17- Inspect browser console logs
18- Validate form submissions and user flows
19- Check responsive design across viewports
20 
21## Prerequisites
22 
23- Node.js installed on the system
24- A locally running web application (or accessible URL)
25- Playwright will be installed automatically if not present
26 
27## Core Capabilities
28 
29### 1. Browser Automation
30- Navigate to URLs
31- Click buttons and links
32- Fill form fields
33- Select dropdowns
34- Handle dialogs and alerts
35 
36### 2. Verification
37- Assert element presence
38- Verify text content
39- Check element visibility
40- Validate URLs
41- Test responsive behavior
42 
43### 3. Debugging
44- Capture screenshots
45- View console logs
46- Inspect network requests
47- Debug failed tests
48 
49## Usage Examples
50 
51### Example 1: Basic Navigation Test
52```javascript
53// Navigate to a page and verify title
54await page.goto('http://localhost:3000');
55const title = await page.title();
56console.log('Page title:', title);
57```
58 
59### Example 2: Form Interaction
60```javascript
61// Fill out and submit a form
62await page.fill('#username', 'testuser');
63await page.fill('#password', 'password123');
64await page.click('button[type="submit"]');
65await page.waitForURL('**/dashboard');
66```
67 
68### Example 3: Screenshot Capture
69```javascript
70// Capture a screenshot for debugging
71await page.screenshot({ path: 'debug.png', fullPage: true });
72```
73 
74## Guidelines
75 
761. **Always verify the app is running** - Check that the local server is accessible before running tests
772. **Use explicit waits** - Wait for elements or navigation to complete before interacting
783. **Capture screenshots on failure** - Take screenshots to help debug issues
794. **Clean up resources** - Always close the browser when done
805. **Handle timeouts gracefully** - Set reasonable timeouts for slow operations
816. **Test incrementally** - Start with simple interactions before complex flows
827. **Use selectors wisely** - Prefer data-testid or role-based selectors over CSS classes
83 
84## Common Patterns
85 
86### Pattern: Wait for Element
87```javascript
88await page.waitForSelector('#element-id', { state: 'visible' });
89```
90 
91### Pattern: Check if Element Exists
92```javascript
93const exists = await page.locator('#element-id').count() > 0;
94```
95 
96### Pattern: Get Console Logs
97```javascript
98page.on('console', msg => console.log('Browser log:', msg.text()));
99```
100 
101### Pattern: Handle Errors
102```javascript
103try {
104 await page.click('#button');
105} catch (error) {
106 await page.screenshot({ path: 'error.png' });
107 throw error;
108}
109```
110 
111## Limitations
112 
113- Requires Node.js environment
114- Cannot test native mobile apps (use React Native Testing Library instead)
115- May have issues with complex authentication flows
116- Some modern frameworks may require specific configuration

Alternatives

Also in Agent Skill
Add AI protectionProtect AI chat and completion endpoints from abuse — detect prompt injection and jailbreak attempts, block PII and sensitive info from leaking in responses, and enforce token budget rate limits to control costs. Use this skill when the user is building or securing any endpoint that processes user prompts with an LLM, even if they describe it as "preventing jailbreaks," "stopping prompt attacks," "blocking sensitive data," or "controlling AI API costs" rather than naming specific protections.Agent Skill · CC0-1.0AI EngineerAct as an expert AI engineer specializing in practical machine learning implementation and AI integration for production applications, ensuring efficient and robust AI solutions.Agent Skill · CC0-1.0App Store Submission AgentThis Agent skill helps you check your apps before submitting to the App Store to go through the process of submitting an app easier and receive less warnings/denials. Recommended model: Claude Opus 4.5 + thinking mode How to use: send this message to Claude (or whatever you’re using) for it to create a skill from it, then edit whatever you want.Agent Skill · CC0-1.0Claude Code Skill (Slash Command): review-and-commit.mdA slash command for Claude Code to perform (a) commit(s) following the conventional style.Agent Skill · CC0-1.0