Toolkit for interacting with and testing local web

Web application testing skill

by Fatih Kadir Akın · CC0-1.0 license · updated Sep 9

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.

Overview

The prompt

116 lines · 3,204 characters · paste it into ChatGPT, Claude or Gemini

1	---
2	name: web-application-testing-skill
3	description: A toolkit for interacting with and testing local web applications using Playwright.
4	---
5
6	# Web Application Testing
7
8	This skill enables comprehensive testing and debugging of local web applications using Playwright automation.
9
10	## When to Use This Skill
11
12	Use 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
54	await page.goto('http://localhost:3000');
55	const title = await page.title();
56	console.log('Page title:', title);
57	```
58
59	### Example 2: Form Interaction
60	```javascript
61	// Fill out and submit a form
62	await page.fill('#username', 'testuser');
63	await page.fill('#password', 'password123');
64	await page.click('button[type="submit"]');
65	await page.waitForURL('**/dashboard');
66	```
67
68	### Example 3: Screenshot Capture
69	```javascript
70	// Capture a screenshot for debugging
71	await page.screenshot({ path: 'debug.png', fullPage: true });
72	```
73
74	## Guidelines
75
76	1. Always verify the app is running - Check that the local server is accessible before running tests
77	2. Use explicit waits - Wait for elements or navigation to complete before interacting
78	3. Capture screenshots on failure - Take screenshots to help debug issues
79	4. Clean up resources - Always close the browser when done
80	5. Handle timeouts gracefully - Set reasonable timeouts for slow operations
81	6. Test incrementally - Start with simple interactions before complex flows
82	7. 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
88	await page.waitForSelector('#element-id', { state: 'visible' });
89	```
90
91	### Pattern: Check if Element Exists
92	```javascript
93	const exists = await page.locator('#element-id').count() > 0;
94	```
95
96	### Pattern: Get Console Logs
97	```javascript
98	page.on('console', msg => console.log('Browser log:', msg.text()));
99	```
100
101	### Pattern: Handle Errors
102	```javascript
103	try {
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