webapp-testing

Name: webapp-testing
Author: github

12kinstalls4.6kforks

How to install webapp-testing?

github/awesome-copilot/webapp-testing

$npx -y skills add github/awesome-copilot --skill webapp-testing

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

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

People who liked this also viewed

6 picks

Type

webapp-testing

12kinstalls4.6kforks

View on GitHub

How to install webapp-testing?

github/awesome-copilot/webapp-testing

$npx -y skills add github/awesome-copilot --skill webapp-testing

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

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

People who liked this also viewed

6 picks

Type