morph-production-tester

name	morph-production-tester
description	Automatic production site testing with code-aware analysis using warpgrep_codebase_search and morph_browser_test_url for comprehensive validation.

Morph Production Tester

Automatic production site testing with code-aware analysis using warpgrep_codebase_search and morph_browser_test_url.

Purpose

Automatically test all buttons, forms, and interactive elements on a live site by analyzing the codebase first to understand the page structure, then executing comprehensive browser tests.

When to Apply

• Pre-production validation before deploying
• Post-deployment smoke testing
• Regression testing after code changes
• Periodic health checks on live sites
• Validating staging environments

Quick Start Workflow

Step 1: Gather Context

Ask the user:

1. URL to test: https://example.com/dashboard
2. Mode: Automatic (AI explores) or Guided (user specifies focus)

Step 2: Detect Route

Use warpgrep_codebase_search with framework-specific patterns:

// Next.js App Router
"app/[route]/page"

// Next.js Pages Router
"pages/[route]"

// React Router
"Route path=[route]"

// Vue Router
"path: '[route]'"

// Generic
"[route] component"

Step 3: Analyze Component

Once route found, read the component and search for:

• Buttons: "button onClick [component]"
• Forms: "form onSubmit [component]"
• Inputs: "input onChange [component]"
• Links: "Link href [component]"
• Modals: "modal dialog [component]"
• Auth: "auth protected requireAuth [component]"

Step 4: Handle Authentication

If auth detected:

• Ask for credentials (username, password, login URL)
• Or skip and test as guest
• Include login flow in test task

Step 5: Generate & Execute Test

Build comprehensive task from analysis:

Test [page] at [url]:
1. [Auth flow if needed]
2. Verify page loads
3. Test buttons: [list with expected actions]
4. Test forms: [list with validation]
5. Test navigation: [list with destinations]
6. Verify no console errors

Execute with morph_browser_test_url:

{
  "url": "https://example.com/dashboard",
  "task": "[generated task]",
  "recordVideo": true,
  "maxSteps": 20
}

Step 6: Analyze & Report

Cross-reference failures with code using warpgrep_codebase_search, generate report with:

• Status (PASS/FAIL/PARTIAL)
• Passed/failed tests
• Code references for failures
• Actionable recommendations

Framework Detection Patterns

Next.js

App Router:

warpgrep_codebase_search "app/dashboard/page.tsx"
warpgrep_codebase_search "use server use client dashboard"

Pages Router:

warpgrep_codebase_search "pages/dashboard.tsx pages/dashboard/index.tsx"
warpgrep_codebase_search "pages/api/dashboard"

React SPA

warpgrep_codebase_search "Route path=/dashboard"
warpgrep_codebase_search "Dashboard component export"

Vue.js

warpgrep_codebase_search "path: '/dashboard' Vue Router"
warpgrep_codebase_search "Dashboard.vue"

Dynamic Routes

Next.js dynamic:

warpgrep_codebase_search "[id] [slug] dynamic route"

React Router params:

warpgrep_codebase_search "useParams :id :slug"

Vue Router params:

warpgrep_codebase_search ":id :slug params"

Element Extraction Strategy

Buttons

Extract from code:

• Label/text
• Handler function
• Expected action

Example:

<button onClick={handleExport}>Export Data</button>

→ Test: "Click 'Export Data' button, verify download starts"

Forms

Extract:

• Field names and types
• Validation rules
• Submit endpoint
• Error messages

Example:

<form onSubmit={handleSubmit}>
  <input name="email" type="email" required />
  <input name="password" type="password" minLength={8} />
</form>

→ Test: "Fill email and password (min 8 chars), submit, verify validation"

Authentication Flows

Detect patterns:

warpgrep_codebase_search "useAuth withAuth requireAuth protected"

Handle end-to-end:

1. Navigate to login URL
2. Fill credentials
3. Submit and wait for redirect
4. Then test target page

Example task with auth:

1. Navigate to https://example.com/login
2. Fill email: [e-mail], password: testpass123
3. Click 'Login' button, wait for redirect to /dashboard
4. Verify dashboard loads with user data
5. Test dashboard features: [list]

Dynamic Content Handling

SPA Navigation

For client-side routing:

- Use "navigate to [path]" instead of "open URL"
- Wait for route transition animations
- Verify URL updates correctly

Lazy-Loaded Components

- Wait for loading indicators to disappear
- Verify content appears after load
- Check for skeleton screens

Infinite Scroll / Pagination

- Scroll to trigger load
- Verify new items appear
- Test "Load More" buttons

Test Task Generation

Template

Test [page-name] at [url]:

[If auth required:]
1. Login at [login-url] with [credentials]
2. Wait for redirect to [target-page]

[Core tests:]
3. Verify page loads without errors
4. Test buttons:
   - "[Button 1]" should [expected-action]
   - "[Button 2]" should [expected-action]
5. Test forms:
   - Fill [fields], verify [validation], submit, expect [result]
6. Test navigation:
   - Click "[Link]", verify navigates to [destination]
7. Test interactive components:
   - Open [modal/dropdown], verify [behavior]
8. Verify no console errors

Expected behaviors from code:
- [Specific expectations based on handler analysis]

Complexity-Based maxSteps

• Simple (< 5 interactions): maxSteps: 12
• Medium (5-10 interactions): maxSteps: 20
• Complex (> 10 interactions): maxSteps: 30
• With auth flow: add +5 to maxSteps

Error Recovery

When Route Detection Fails

1. Try broader search: warpgrep_codebase_search "[url-path]"
2. Search for page title/heading
3. Ask user for component file path
4. Proceed with URL-only test (no code context)

When Component Analysis Fails

1. Read file directly if path known
2. Use generic test task without code-specific expectations
3. Rely on visual inspection in browser test

When Browser Test Fails

1. Check if deployment is ready (status code, loading time)
2. Verify credentials if auth required
3. Adjust maxSteps if timeout
4. Retry with simplified task
5. Cross-reference with code to identify bug vs test issue

Reporting Format

Concise Report Template

# Test Report: [Page Name]

**URL:** [url]
**Status:** ✅ PASS / ❌ FAIL / ⚠️ PARTIAL
**Date:** 2026-05-07

## Summary
- **Passed:** [N]/[Total]
- **Failed:** [N]/[Total]
- **Warnings:** [N]

## Code Analysis
- Route: `[file-path]`
- Elements: [N] buttons, [N] forms, [N] inputs, [N] links

## Results

### ✅ Passed
- Page loads correctly
- "Submit" button works
- Form validation correct
- Navigation links functional

### ❌ Failed
- **"Export" button:** No download triggered
  - Code: `src/Dashboard.tsx:45` - `handleExport`
  - Fix: Check `/api/export` endpoint

### ⚠️ Warnings
- Slow API response (> 3s)
- Console warning: deprecated API

## Recommendations
1. Fix export endpoint connection
2. Optimize API response time
3. Update deprecated API usage

**Recording:** [url]

Integration with Other Skills

With morph-power-user

• Leverage WarpGrep best practices
• Use efficient file reading strategies
• Apply fallback patterns when search fails

With morph-reviewer

• Apply review criteria to test results
• Validate code analysis accuracy
• Assess failure severity

Common Scenarios

Scenario 1: Simple Page

User: "Test https://example.com"
AI: Detect route → Find 3 buttons, 1 form → Generate task → Execute → Report
Time: ~2 minutes

Scenario 2: Auth-Protected Dashboard

User: "Test https://example.com/dashboard"
AI: Detect route → Find auth requirement → Ask credentials → Generate task with login → Execute → Report
Time: ~3 minutes

Scenario 3: Complex Multi-Step Form

User: "Test https://example.com/checkout"
AI: Detect route → Find multi-step form → Analyze validation → Generate comprehensive task → Execute with maxSteps: 30 → Report
Time: ~4 minutes

Best Practices

Before Testing

• ✅ Use warpgrep_codebase_search for fast context
• ✅ Read component to understand structure
• ✅ Detect auth early
• ✅ Estimate complexity for maxSteps

During Analysis

• ✅ Search for specific patterns (button, form, input)
• ✅ Extract labels and expected behaviors
• ✅ Identify validation and error states
• ✅ Find API endpoints

During Execution

• ✅ Single comprehensive test (not multiple)
• ✅ Always record video
• ✅ Include expected behaviors in task
• ✅ Test success and error paths

After Testing

• ✅ Cross-reference failures with code
• ✅ Provide file references in recommendations
• ✅ Prioritize by severity
• ✅ Include recording URL

Configuration Requirements

• browserUrlEnabled: true
• warpgrepEnabled: true
• recordVideo: true
• Appropriate maxSteps based on complexity

Success Metrics

• Code analyzed before testing: ✓
• All interactive elements identified: ✓
• Comprehensive test executed: ✓
• Auth detected and handled: ✓
• Failures cross-referenced with code: ✓
• Actionable report generated: ✓