preview-testing

Name: preview-testing
Author: Svenja-dev

25installs5forks

How to install preview-testing?

svenja-dev/claude-code-skills/preview-testing

$npx -y skills add Svenja-dev/claude-code-skills --skill preview-testing

Installs into the current project.

Summary

Comprehensive E2E + Security Tests for Vercel Preview Deployments. Combines Playwright automation with Claude-in-Chrome MCP for interactive debugging. Activate on PR creation, before merge, or manual /preview-test.

Files · 1

View on GitHub

SKILL.md

1	# Preview Testing
2
3	> Comprehensive E2E + Security Tests for Vercel Preview Deployments
4
5	## Trigger
6
7	This skill activates on:
8
9	- `/preview-test` - Manual invocation
10	- After PR creation against `main` or `develop`
11	- Before merge for production approval
12
13	## Features
14
15	\| Feature \| Duration \| Description \|
16	\| ------------------ \| -------- \| ----------------------------------------------- \|
17	\| Smoke Tests \| <2min \| Critical user flows (Login, Upload, Analysis) \|
18	\| Visual Regression \| <3min \| Screenshot comparison with 1% tolerance \|
19	\| Security Tests \| <5min \| OWASP LLM01, Quota Bypass, Stripe Webhook \|
20	\| DSGVO Region Check \| <30s \| Verifies Frankfurt (fra1) region \|
21	\| npm audit \| <1min \| Dependency vulnerability scan \|
22
23	## Usage
24
25	```bash
26	# Standard: Smoke + Visual + Security
27	/preview-test
28
29	# Security tests only
30	/preview-test --security
31
32	# With AI Exploratory Testing (optional)
33	/preview-test --ai
34	```
35
36	## Security Tests (OWASP LLM Top 10 2025)
37
38	### Prompt Injection (LLM01) - CRITICAL
39
40	- Direct Injection (Jailbreaks, DAN, Role Manipulation)
41	- System Prompt Extraction Prevention
42	- Context Hijacking via Fake History
43	- Indirect Injection via File Upload
44	- Multi-Language Bypass Attempts
45
46	File: `tests/security/prompt-injection.spec.ts`
47
48	### Quota Bypass - CRITICAL (Cost Risk)
49
50	- API Authentication Bypass
51	- Email Spoofing Prevention
52	- Demo Mode Abuse
53	- Race Condition in Quota Check
54	- Test User Email Discovery
55
56	File: `tests/security/quota-bypass.spec.ts`
57
58	### Stripe Webhook Security (PCI-DSS)
59
60	- Signature Validation
61	- Replay Attack Prevention
62	- Payload Manipulation Detection
63	- Subscription Fraud Prevention
64
65	File: `tests/security/stripe-webhook.spec.ts`
66
67	## Workflow
68
69	```
70	1. PRE-DEPLOY GATES (quality-gate.yml)
71	└── TypeScript Check
72	└── Unit Tests
73	└── Build Validation
74
75	2. PREVIEW DEPLOYMENT
76	└── Generate Vercel Preview URL
77	└── Wait 30s warmup
78
79	3. SMOKE TESTS (Playwright, <2min)
80	└── Homepage loads
81	└── Login flow works
82	└── Critical Path: Upload → Analysis
83
84	4. VISUAL REGRESSION (Playwright, <3min)
85	└── Screenshot comparison with baseline
86	└── Mobile + Desktop breakpoints
87
88	5. SECURITY TESTS (Playwright, <5min) [CRITICAL]
89	└── Quota Bypass Tests
90	└── Prompt Injection Tests
91	└── Stripe Webhook Security
92
93	6. GDPR REGION CHECK
94	└── Verifies fra1 (Frankfurt) region
95
96	7. APPROVAL GATE
97	└── All tests green → PR comment "Ready to merge"
98	└── Security failures → BLOCK MERGE
99	```
100
101	## Claude-in-Chrome MCP Integration
102
103	In addition to automated Playwright tests, interactive browser tools are available via MCP. These are ideal for:
104
105	- Visual debugging during development
106	- Ad-hoc testing without test scripts
107	- GIF recordings for PR documentation
108	- Live console/network inspection
109
110	### When to Use Which Tool?
111
112	\| Situation \| Tool \| Reason \|
113	\| --------------------------- \| ---------------------------------------- \| ----------------------------------- \|
114	\| Automated CI/CD tests \| Playwright `npm run test:e2e` \| Fast, headless, reproducible \|
115	\| Visual inspection \| Claude-in-Chrome `read_page` \| Accessibility tree, structured \|
116	\| Screenshot for PR \| Claude-in-Chrome `computer` \| Saves locally, real Chrome \|
117	\| Document user flow \| Claude-in-Chrome `gif_creator` \| Animated GIF \|
118	\| Debug console errors \| Claude-in-Chrome `read_console_messages` \| Live JS errors \|
119	\| Inspect API calls \| Claude-in-Chrome `read_network_requests` \| XHR/Fetch debugging \|
120
121	### Interactive Preview Testing (Claude-in-Chrome)
122
123	```typescript
124	// 1. Initialize browser tab context
125	mcp__claude-in-chrome__tabs_context_mcp({ createIfEmpty: true })
126
127	// 2. Create new tab for preview
128	mcp__claude-in-chrome__tabs_create_mcp()
129
130	// 3. Navigate to preview URL
131	mcp__claude-in-chrome__navigate({
132	url: "https://your-app-xyz.vercel.app",
133	tabId: <id>
134	})
135
136	// 4. Accessibility snapshot (better than screenshot for structure)
137	mcp__claude-in-chrome__read_page({ tabId: <id> })
138
139	// 5. Find interactive elements
140	mcp__claude-in-chrome__find({
141	query: "login button",
142	tabId: <id>
143	})
144
145	// 6. Click element
146	mcp__claude-in-chrome__computer({
147	action: "left_click",
148	ref: "ref_123", // from find result
149	tabId: <id>
150	})
151
152	// 7. Save screenshot
153	mcp__claude-in-chrome__computer({
154	action: "screenshot",
155	tabId: <id>
156	})
157	```
158
159	### GIF Recording for PR Documentation
160
161	```typescript
162	// 1. Start recording
163	mcp__claude-in-chr

People who liked this also viewed

6 picks

Type

preview-testing

25installs5forks

View on GitHub

How to install preview-testing?

svenja-dev/claude-code-skills/preview-testing

$npx -y skills add Svenja-dev/claude-code-skills --skill preview-testing

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Preview Testing
2
3	> Comprehensive E2E + Security Tests for Vercel Preview Deployments
4
5	## Trigger
6
7	This skill activates on:
8
9	- `/preview-test` - Manual invocation
10	- After PR creation against `main` or `develop`
11	- Before merge for production approval
12
13	## Features
14
15	\| Feature \| Duration \| Description \|
16	\| ------------------ \| -------- \| ----------------------------------------------- \|
17	\| Smoke Tests \| <2min \| Critical user flows (Login, Upload, Analysis) \|
18	\| Visual Regression \| <3min \| Screenshot comparison with 1% tolerance \|
19	\| Security Tests \| <5min \| OWASP LLM01, Quota Bypass, Stripe Webhook \|
20	\| DSGVO Region Check \| <30s \| Verifies Frankfurt (fra1) region \|
21	\| npm audit \| <1min \| Dependency vulnerability scan \|
22
23	## Usage
24
25	```bash
26	# Standard: Smoke + Visual + Security
27	/preview-test
28
29	# Security tests only
30	/preview-test --security
31
32	# With AI Exploratory Testing (optional)
33	/preview-test --ai
34	```
35
36	## Security Tests (OWASP LLM Top 10 2025)
37
38	### Prompt Injection (LLM01) - CRITICAL
39
40	- Direct Injection (Jailbreaks, DAN, Role Manipulation)
41	- System Prompt Extraction Prevention
42	- Context Hijacking via Fake History
43	- Indirect Injection via File Upload
44	- Multi-Language Bypass Attempts
45
46	File: `tests/security/prompt-injection.spec.ts`
47
48	### Quota Bypass - CRITICAL (Cost Risk)
49
50	- API Authentication Bypass
51	- Email Spoofing Prevention
52	- Demo Mode Abuse
53	- Race Condition in Quota Check
54	- Test User Email Discovery
55
56	File: `tests/security/quota-bypass.spec.ts`
57
58	### Stripe Webhook Security (PCI-DSS)
59
60	- Signature Validation
61	- Replay Attack Prevention
62	- Payload Manipulation Detection
63	- Subscription Fraud Prevention
64
65	File: `tests/security/stripe-webhook.spec.ts`
66
67	## Workflow
68
69	```
70	1. PRE-DEPLOY GATES (quality-gate.yml)
71	└── TypeScript Check
72	└── Unit Tests
73	└── Build Validation
74
75	2. PREVIEW DEPLOYMENT
76	└── Generate Vercel Preview URL
77	└── Wait 30s warmup
78
79	3. SMOKE TESTS (Playwright, <2min)
80	└── Homepage loads
81	└── Login flow works
82	└── Critical Path: Upload → Analysis
83
84	4. VISUAL REGRESSION (Playwright, <3min)
85	└── Screenshot comparison with baseline
86	└── Mobile + Desktop breakpoints
87
88	5. SECURITY TESTS (Playwright, <5min) [CRITICAL]
89	└── Quota Bypass Tests
90	└── Prompt Injection Tests
91	└── Stripe Webhook Security
92
93	6. GDPR REGION CHECK
94	└── Verifies fra1 (Frankfurt) region
95
96	7. APPROVAL GATE
97	└── All tests green → PR comment "Ready to merge"
98	└── Security failures → BLOCK MERGE
99	```
100
101	## Claude-in-Chrome MCP Integration
102
103	In addition to automated Playwright tests, interactive browser tools are available via MCP. These are ideal for:
104
105	- Visual debugging during development
106	- Ad-hoc testing without test scripts
107	- GIF recordings for PR documentation
108	- Live console/network inspection
109
110	### When to Use Which Tool?
111
112	\| Situation \| Tool \| Reason \|
113	\| --------------------------- \| ---------------------------------------- \| ----------------------------------- \|
114	\| Automated CI/CD tests \| Playwright `npm run test:e2e` \| Fast, headless, reproducible \|
115	\| Visual inspection \| Claude-in-Chrome `read_page` \| Accessibility tree, structured \|
116	\| Screenshot for PR \| Claude-in-Chrome `computer` \| Saves locally, real Chrome \|
117	\| Document user flow \| Claude-in-Chrome `gif_creator` \| Animated GIF \|
118	\| Debug console errors \| Claude-in-Chrome `read_console_messages` \| Live JS errors \|
119	\| Inspect API calls \| Claude-in-Chrome `read_network_requests` \| XHR/Fetch debugging \|
120
121	### Interactive Preview Testing (Claude-in-Chrome)
122
123	```typescript
124	// 1. Initialize browser tab context
125	mcp__claude-in-chrome__tabs_context_mcp({ createIfEmpty: true })
126
127	// 2. Create new tab for preview
128	mcp__claude-in-chrome__tabs_create_mcp()
129
130	// 3. Navigate to preview URL
131	mcp__claude-in-chrome__navigate({
132	url: "https://your-app-xyz.vercel.app",
133	tabId: <id>
134	})
135
136	// 4. Accessibility snapshot (better than screenshot for structure)
137	mcp__claude-in-chrome__read_page({ tabId: <id> })
138
139	// 5. Find interactive elements
140	mcp__claude-in-chrome__find({
141	query: "login button",
142	tabId: <id>
143	})
144
145	// 6. Click element
146	mcp__claude-in-chrome__computer({
147	action: "left_click",
148	ref: "ref_123", // from find result
149	tabId: <id>
150	})
151
152	// 7. Save screenshot
153	mcp__claude-in-chrome__computer({
154	action: "screenshot",
155	tabId: <id>
156	})
157	```
158
159	### GIF Recording for PR Documentation
160
161	```typescript
162	// 1. Start recording
163	mcp__claude-in-chr

People who liked this also viewed

6 picks

Type