Preview Testing

Comprehensive E2E + Security Tests for Vercel Preview Deployments

Trigger

This skill activates on:

• /preview-test - Manual invocation
• After PR creation against main or develop
• Before merge for production approval

Features

Usage

# Standard: Smoke + Visual + Security
/preview-test

# Security tests only
/preview-test --security

# With AI Exploratory Testing (optional)
/preview-test --ai

Security Tests (OWASP LLM Top 10 2025)

Prompt Injection (LLM01) - CRITICAL

• Direct Injection (Jailbreaks, DAN, Role Manipulation)
• System Prompt Extraction Prevention
• Context Hijacking via Fake History
• Indirect Injection via File Upload
• Multi-Language Bypass Attempts

File: tests/security/prompt-injection.spec.ts

Quota Bypass - CRITICAL (Cost Risk)

• API Authentication Bypass
• Email Spoofing Prevention
• Demo Mode Abuse
• Race Condition in Quota Check
• Test User Email Discovery

File: tests/security/quota-bypass.spec.ts

Stripe Webhook Security (PCI-DSS)

• Signature Validation
• Replay Attack Prevention
• Payload Manipulation Detection
• Subscription Fraud Prevention

File: tests/security/stripe-webhook.spec.ts

Workflow

1. PRE-DEPLOY GATES (quality-gate.yml)
   └── TypeScript Check
   └── Unit Tests
   └── Build Validation

2. PREVIEW DEPLOYMENT
   └── Generate Vercel Preview URL
   └── Wait 30s warmup

3. SMOKE TESTS (Playwright, <2min)
   └── Homepage loads
   └── Login flow works
   └── Critical Path: Upload → Analysis

4. VISUAL REGRESSION (Playwright, <3min)
   └── Screenshot comparison with baseline
   └── Mobile + Desktop breakpoints

5. SECURITY TESTS (Playwright, <5min) [CRITICAL]
   └── Quota Bypass Tests
   └── Prompt Injection Tests
   └── Stripe Webhook Security

6. GDPR REGION CHECK
   └── Verifies fra1 (Frankfurt) region

7. APPROVAL GATE
   └── All tests green → PR comment "Ready to merge"
   └── Security failures → BLOCK MERGE

Claude-in-Chrome MCP Integration

In addition to automated Playwright tests, interactive browser tools are available via MCP. These are ideal for:

• Visual debugging during development
• Ad-hoc testing without test scripts
• GIF recordings for PR documentation
• Live console/network inspection

When to Use Which Tool?

Interactive Preview Testing (Claude-in-Chrome)

// 1. Initialize browser tab context
mcp__claude-in-chrome__tabs_context_mcp({ createIfEmpty: true })

// 2. Create new tab for preview
mcp__claude-in-chrome__tabs_create_mcp()

// 3. Navigate to preview URL
mcp__claude-in-chrome__navigate({
  url: "https://fabrikiq-xyz.vercel.app",
  tabId: <id>
})

// 4. Accessibility snapshot (better than screenshot for structure)
mcp__claude-in-chrome__read_page({ tabId: <id> })

// 5. Find interactive elements
mcp__claude-in-chrome__find({
  query: "login button",
  tabId: <id>
})

// 6. Click element
mcp__claude-in-chrome__computer({
  action: "left_click",
  ref: "ref_123",  // from find result
  tabId: <id>
})

// 7. Save screenshot
mcp__claude-in-chrome__computer({
  action: "screenshot",
  tabId: <id>
})

GIF Recording for PR Documentation

// 1. Start recording
mcp__claude-in-chrome__gif_creator({
  action: "start_recording",
  tabId: <id>
})

// 2. Screenshot for first frame
mcp__claude-in-chrome__computer({ action: "screenshot", tabId: <id> })

// 3. Perform user flow (login, upload, etc.)
mcp__claude-in-chrome__computer({
  action

...