guardrail-ship 1.0.0

package/src/reality-mode/explorer/runtime-explorer.ts

@@ -0,0 +1,715 @@
+/**
+ * Runtime Explorer
+ *
+ * The "robot user" that actually clicks through the app using Playwright.
+ * - Navigates to all discovered routes
+ * - Clicks buttons, opens modals, interacts with dropdowns
+ * - Fills and submits forms with test data
+ * - Captures errors, network calls, state changes
+ */
+
+import type {
+  AppSurface,
+  DiscoveredElement,
+  DiscoveredForm,
+  DiscoveredRoute,
+  ElementTestResult,
+  FormTestResult,
+  CapturedError,
+  NetworkCall,
+  PageState,
+  StateChange,
+  ExplorerConfig,
+} from "./types";
+import { SurfaceDiscovery } from "./surface-discovery";
+
+// Test data generators for form filling
+const TEST_DATA = {
+  email: "test-reality@guardrail.dev",
+  password: "TestPass123!",
+  name: "Reality Test User",
+  phone: "+1234567890",
+  address: "123 Test Street",
+  city: "Test City",
+  zip: "12345",
+  text: "This is a test input from Guardrail Reality Mode",
+  number: "42",
+  url: "https://example.com",
+  date: "2024-01-15",
+};
+
+export class RuntimeExplorer {
+  private config: ExplorerConfig;
+  private surfaceDiscovery: SurfaceDiscovery;
+  private errors: CapturedError[] = [];
+  private networkCalls: NetworkCall[] = [];
+  private isAuthenticated = false;
+
+  constructor(config: ExplorerConfig) {
+    this.config = config;
+    this.surfaceDiscovery = new SurfaceDiscovery(config.baseUrl);
+  }
+
+  /**
+   * Generate the complete Playwright test file for exploration
+   */
+  generateExplorerTest(): string {
+    const { baseUrl, outputDir, headless, allowDestructive, timeout } =
+      this.config;
+    const authConfig = this.config.auth;
+
+    return `/**
+ * Reality Explorer - Auto-generated Playwright Test
+ * 
+ * This test ACTUALLY explores your app:
+ * - Visits every discoverable route
+ * - Clicks every safe button and element
+ * - Fills and submits forms
+ * - Captures what works and what breaks
+ * 
+ * Generated by Guardrail Reality Mode
+ */
+
+import { test, expect, Page, BrowserContext } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+
+// Configuration
+const CONFIG = {
+  baseUrl: '${baseUrl}',
+  outputDir: '${outputDir.replace(/\\/g, "\\\\")}',
+  timeout: ${timeout},
+  allowDestructive: ${allowDestructive},
+  maxActionsPerPage: ${this.config.maxActionsPerPage || 50},
+  maxPages: ${this.config.maxPages || 20},
+};
+
+// Test data for form filling
+const TEST_DATA = ${JSON.stringify(TEST_DATA, null, 2)};
+
+// Destructive action patterns to avoid
+const DESTRUCTIVE_PATTERNS = [
+  /delete/i, /remove/i, /destroy/i, /cancel.*subscription/i,
+  /deactivate/i, /terminate/i, /close.*account/i, /reset.*all/i,
+];
+
+// Results storage
+interface ExplorerResults {
+  routes: { path: string; status: string; error?: string; responseTime?: number }[];
+  elements: { selector: string; text: string; status: string; error?: string; changes: string[] }[];
+  forms: { selector: string; status: string; error?: string; fieldsFilledCount: number }[];
+  errors: { type: string; message: string; url: string; timestamp: number }[];
+  networkCalls: { url: string; method: string; status: number; duration: number }[];
+  coverage: { routes: number; elements: number; forms: number };
+  score: number;
+}
+
+const results: ExplorerResults = {
+  routes: [],
+  elements: [],
+  forms: [],
+  errors: [],
+  networkCalls: [],
+  coverage: { routes: 0, elements: 0, forms: 0 },
+  score: 0,
+};
+
+// Discovered surface
+let discoveredRoutes: string[] = [];
+let discoveredElements: any[] = [];
+let discoveredForms: any[] = [];
+
+test.describe('Reality Explorer', () => {
+  let context: BrowserContext;
+  let page: Page;
+
+  test.beforeAll(async ({ browser }) => {
+    // Create context with tracing
+    context = await browser.newContext({
+      viewport: { width: 1280, height: 720 },
+      recordVideo: { dir: path.join(CONFIG.outputDir, 'videos') },
+    });
+    
+    // Start tracing
+    await context.tracing.start({ screenshots: true, snapshots: true });
+    
+    page = await context.newPage();
+    
+    // Setup error capture
+    page.on('console', msg => {
+      if (msg.type() === 'error') {
+        results.errors.push({
+          type: 'console',
+          message: msg.text(),
+          url: page.url(),
+          timestamp: Date.now(),
+        });
+      }
+    });
+    
+    page.on('pageerror', error => {
+      results.errors.push({
+        type: 'uncaught',
+        message: error.message,
+        url: page.url(),
+        timestamp: Date.now(),
+      });
+    });
+    
+    // Setup network capture
+    page.on('response', async response => {
+      const url = response.url();
+      if (url.includes('/api/') || url.includes('/graphql')) {
+        results.networkCalls.push({
+          url,
+          method: response.request().method(),
+          status: response.status(),
+          duration: 0, // Would need timing API for accurate duration
+        });
+      }
+    });
+    
+    // Ensure output directory exists
+    if (!fs.existsSync(CONFIG.outputDir)) {
+      fs.mkdirSync(CONFIG.outputDir, { recursive: true });
+    }
+  });
+
+  test.afterAll(async () => {
+    // Save trace
+    await context.tracing.stop({ 
+      path: path.join(CONFIG.outputDir, 'trace.zip') 
+    });
+    
+    // Calculate score
+    results.score = calculateScore(results);
+    
+    // Save results
+    fs.writeFileSync(
+      path.join(CONFIG.outputDir, 'explorer-results.json'),
+      JSON.stringify(results, null, 2)
+    );
+    
+    // Generate HTML report
+    const html = generateHTMLReport(results);
+    fs.writeFileSync(
+      path.join(CONFIG.outputDir, 'reality-report.html'),
+      html
+    );
+    
+    await context.close();
+  });
+
+  ${authConfig ? this.generateAuthTest(authConfig) : ""}
+
+  test('01 - Discover App Surface', async () => {
+    await page.goto(CONFIG.baseUrl);
+    await page.waitForLoadState('networkidle');
+    
+    // Discover all routes from links
+    discoveredRoutes = await page.$$eval('a[href]', anchors => 
+      anchors
+        .map(a => a.getAttribute('href'))
+        .filter(href => href && href.startsWith('/') && !href.startsWith('//'))
+        .filter((v, i, a) => a.indexOf(v) === i) // unique
+    );
+    
+    console.log(\`📍 Discovered \${discoveredRoutes.length} routes\`);
+    
+    // Discover interactive elements
+    discoveredElements = await discoverElements(page);
+    console.log(\`🔘 Discovered \${discoveredElements.length} interactive elements\`);
+    
+    // Discover forms
+    discoveredForms = await discoverForms(page);
+    console.log(\`📝 Discovered \${discoveredForms.length} forms\`);
+  });
+
+  test('02 - Visit All Routes', async () => {
+    const routesToVisit = discoveredRoutes.slice(0, CONFIG.maxPages);
+    
+    for (const route of routesToVisit) {
+      const startTime = Date.now();
+      
+      try {
+        const response = await page.goto(CONFIG.baseUrl + route, { 
+          waitUntil: 'networkidle',
+          timeout: CONFIG.timeout 
+        });
+        
+        const status = response?.status() || 0;
+        const responseTime = Date.now() - startTime;
+        
+        results.routes.push({
+          path: route,
+          status: status >= 200 && status < 400 ? 'success' : 'error',
+          responseTime,
+          error: status >= 400 ? \`HTTP \${status}\` : undefined,
+        });
+        
+        // Re-discover elements on each page
+        const pageElements = await discoverElements(page);
+        const pageForms = await discoverForms(page);
+        
+        // Merge newly discovered elements
+        for (const el of pageElements) {
+          if (!discoveredElements.find(e => e.selector === el.selector)) {
+            discoveredElements.push({ ...el, page: route });
+          }
+        }
+        for (const form of pageForms) {
+          if (!discoveredForms.find(f => f.selector === form.selector)) {
+            discoveredForms.push({ ...form, page: route });
+          }
+        }
+        
+        await page.screenshot({ 
+          path: path.join(CONFIG.outputDir, \`route-\${route.replace(/\\//g, '_')}.png\`) 
+        });
+        
+      } catch (error: any) {
+        results.routes.push({
+          path: route,
+          status: 'error',
+          error: error.message,
+        });
+      }
+    }
+    
+    results.coverage.routes = results.routes.filter(r => r.status === 'success').length;
+    console.log(\`✅ Visited \${results.coverage.routes}/\${routesToVisit.length} routes successfully\`);
+  });
+
+  test('03 - Test Interactive Elements', async () => {
+    // Go back to home first
+    await page.goto(CONFIG.baseUrl);
+    await page.waitForLoadState('networkidle');
+    
+    const elementsToTest = discoveredElements
+      .filter(el => !el.isDestructive || CONFIG.allowDestructive)
+      .slice(0, CONFIG.maxActionsPerPage);
+    
+    for (const element of elementsToTest) {
+      const result = await testElement(page, element);
+      results.elements.push(result);
+    }
+    
+    results.coverage.elements = results.elements.filter(e => e.status === 'success').length;
+    console.log(\`✅ Tested \${results.coverage.elements}/\${elementsToTest.length} elements successfully\`);
+  });
+
+  test('04 - Test Forms', async () => {
+    // Go back to home first
+    await page.goto(CONFIG.baseUrl);
+    await page.waitForLoadState('networkidle');
+    
+    for (const form of discoveredForms) {
+      const result = await testForm(page, form);
+      results.forms.push(result);
+    }
+    
+    results.coverage.forms = results.forms.filter(f => f.status === 'success').length;
+    console.log(\`✅ Tested \${results.coverage.forms}/\${discoveredForms.length} forms successfully\`);
+  });
+});
+
+// Helper: Discover interactive elements
+async function discoverElements(page: Page) {
+  return page.$$eval(
+    'button, [role="button"], a[href], [data-testid], [aria-haspopup], input[type="submit"]',
+    elements => elements.map((el, idx) => {
+      const text = el.textContent?.trim().slice(0, 50) || '';
+      const isDestructive = /delete|remove|destroy|cancel|deactivate/i.test(text);
+      
+      return {
+        selector: el.id ? \`#\${el.id}\` : 
+                  el.getAttribute('data-testid') ? \`[data-testid="\${el.getAttribute('data-testid')}"]\` :
+                  \`\${el.tagName.toLowerCase()}:nth-of-type(\${idx + 1})\`,
+        text,
+        type: el.tagName.toLowerCase(),
+        isDestructive,
+        page: '',
+      };
+    }).filter(el => el.text.length > 0)
+  );
+}
+
+// Helper: Discover forms
+async function discoverForms(page: Page) {
+  return page.$$eval('form', forms => 
+    forms.map((form, idx) => ({
+      selector: form.id ? \`#\${form.id}\` : \`form:nth-of-type(\${idx + 1})\`,
+      action: form.action,
+      method: form.method,
+      fields: Array.from(form.querySelectorAll('input, textarea, select')).map((field: any) => ({
+        name: field.name || field.id,
+        type: field.type || 'text',
+        required: field.required,
+        selector: field.id ? \`#\${field.id}\` : \`[name="\${field.name}"]\`,
+      })),
+      page: '',
+    }))
+  );
+}
+
+// Helper: Test an element
+async function testElement(page: Page, element: any) {
+  const beforeUrl = page.url();
+  const beforeHtml = await page.content();
+  const changes: string[] = [];
+  
+  try {
+    // Check if element exists and is visible
+    const el = await page.$(element.selector);
+    if (!el) {
+      return { selector: element.selector, text: element.text, status: 'not-found', changes: [] };
+    }
+    
+    const isVisible = await el.isVisible();
+    if (!isVisible) {
+      return { selector: element.selector, text: element.text, status: 'hidden', changes: [] };
+    }
+    
+    // Click the element
+    await el.click({ timeout: 5000 });
+    
+    // Wait for potential navigation or state change
+    await page.waitForTimeout(500);
+    await page.waitForLoadState('networkidle').catch(() => {});
+    
+    // Check for changes
+    const afterUrl = page.url();
+    const afterHtml = await page.content();
+    
+    if (afterUrl !== beforeUrl) {
+      changes.push(\`URL changed to \${afterUrl}\`);
+    }
+    
+    if (afterHtml !== beforeHtml) {
+      changes.push('DOM changed');
+    }
+    
+    // Check for modals
+    const modals = await page.$$('[role="dialog"], .modal, [data-modal]');
+    if (modals.length > 0) {
+      changes.push('Modal opened');
+      // Close modal if possible
+      await page.keyboard.press('Escape');
+    }
+    
+    return {
+      selector: element.selector,
+      text: element.text,
+      status: changes.length > 0 ? 'success' : 'no-change',
+      changes,
+    };
+    
+  } catch (error: any) {
+    return {
+      selector: element.selector,
+      text: element.text,
+      status: 'error',
+      error: error.message,
+      changes: [],
+    };
+  }
+}
+
+// Helper: Test a form
+async function testForm(page: Page, form: any) {
+  let fieldsFilledCount = 0;
+  
+  try {
+    // Navigate to the page with the form if needed
+    if (form.page && form.page !== page.url()) {
+      await page.goto(CONFIG.baseUrl + form.page);
+      await page.waitForLoadState('networkidle');
+    }
+    
+    // Check if form exists
+    const formEl = await page.$(form.selector);
+    if (!formEl) {
+      return { selector: form.selector, status: 'not-found', fieldsFilledCount: 0 };
+    }
+    
+    // Fill fields
+    for (const field of form.fields) {
+      try {
+        const fieldEl = await page.$(field.selector);
+        if (!fieldEl) continue;
+        
+        const value = getTestValue(field.type, field.name);
+        
+        if (field.type === 'checkbox' || field.type === 'radio') {
+          await fieldEl.check();
+        } else if (field.type === 'select') {
+          // Select first option
+          await page.selectOption(field.selector, { index: 1 });
+        } else {
+          await fieldEl.fill(value);
+        }
+        
+        fieldsFilledCount++;
+      } catch (e) {
+        // Field couldn't be filled, continue
+      }
+    }
+    
+    // Try to submit (but don't actually submit to avoid side effects)
+    // Just validate that the form is fillable
+    
+    return {
+      selector: form.selector,
+      status: fieldsFilledCount > 0 ? 'success' : 'no-fields',
+      fieldsFilledCount,
+    };
+    
+  } catch (error: any) {
+    return {
+      selector: form.selector,
+      status: 'error',
+      error: error.message,
+      fieldsFilledCount,
+    };
+  }
+}
+
+// Helper: Get appropriate test value for field type
+function getTestValue(type: string, name: string): string {
+  const nameLower = name?.toLowerCase() || '';
+  
+  if (nameLower.includes('email')) return TEST_DATA.email;
+  if (nameLower.includes('password')) return TEST_DATA.password;
+  if (nameLower.includes('phone') || nameLower.includes('tel')) return TEST_DATA.phone;
+  if (nameLower.includes('name')) return TEST_DATA.name;
+  if (nameLower.includes('address')) return TEST_DATA.address;
+  if (nameLower.includes('city')) return TEST_DATA.city;
+  if (nameLower.includes('zip') || nameLower.includes('postal')) return TEST_DATA.zip;
+  if (nameLower.includes('url') || nameLower.includes('website')) return TEST_DATA.url;
+  
+  switch (type) {
+    case 'email': return TEST_DATA.email;
+    case 'password': return TEST_DATA.password;
+    case 'tel': return TEST_DATA.phone;
+    case 'number': return TEST_DATA.number;
+    case 'url': return TEST_DATA.url;
+    case 'date': return TEST_DATA.date;
+    default: return TEST_DATA.text;
+  }
+}
+
+// Helper: Calculate reality score
+function calculateScore(results: ExplorerResults): number {
+  const totalRoutes = results.routes.length || 1;
+  const totalElements = results.elements.length || 1;
+  const totalForms = results.forms.length || 1;
+  
+  // Coverage (40 points)
+  const routeCoverage = (results.coverage.routes / totalRoutes) * 15;
+  const elementCoverage = (results.coverage.elements / totalElements) * 15;
+  const formCoverage = (results.coverage.forms / totalForms) * 10;
+  const coverageScore = routeCoverage + elementCoverage + formCoverage;
+  
+  // Functionality (35 points)
+  const successfulActions = results.elements.filter(e => e.status === 'success').length;
+  const successfulForms = results.forms.filter(f => f.status === 'success').length;
+  const functionalityScore = 
+    ((successfulActions / totalElements) * 20) +
+    ((successfulForms / totalForms) * 15);
+  
+  // Stability (15 points) - penalize errors
+  const errorPenalty = Math.min(results.errors.length * 3, 15);
+  const stabilityScore = 15 - errorPenalty;
+  
+  // UX (10 points) - bonus for interactive elements that work
+  const interactiveElements = results.elements.filter(e => e.changes && e.changes.length > 0);
+  const uxScore = Math.min((interactiveElements.length / totalElements) * 10, 10);
+  
+  return Math.round(Math.max(0, coverageScore + functionalityScore + stabilityScore + uxScore));
+}
+
+// Helper: Generate HTML report
+function generateHTMLReport(results: ExplorerResults): string {
+  const score = results.score;
+  const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : score >= 60 ? 'D' : 'F';
+  const color = score >= 80 ? '#22c55e' : score >= 60 ? '#eab308' : '#ef4444';
+  
+  return \`<!DOCTYPE html>
+<html>
+<head>
+  <title>Reality Mode Report - Guardrail</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0a0a0a; color: #fff; padding: 2rem; }
+    .container { max-width: 1200px; margin: 0 auto; }
+    h1 { font-size: 2rem; margin-bottom: 0.5rem; }
+    .subtitle { color: #888; margin-bottom: 2rem; }
+    .score-card { background: linear-gradient(135deg, #1a1a1a, #0d0d0d); border: 1px solid #333; border-radius: 1rem; padding: 2rem; text-align: center; margin-bottom: 2rem; }
+    .score { font-size: 6rem; font-weight: bold; color: \${color}; }
+    .grade { font-size: 2rem; color: \${color}; }
+    .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
+    .metric { background: #1a1a1a; border: 1px solid #333; border-radius: 0.5rem; padding: 1rem; text-align: center; }
+    .metric-value { font-size: 2rem; font-weight: bold; color: #fff; }
+    .metric-label { color: #888; font-size: 0.875rem; }
+    .section { background: #1a1a1a; border: 1px solid #333; border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1rem; }
+    .section h2 { font-size: 1.25rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
+    .item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid #333; }
+    .item:last-child { border-bottom: none; }
+    .status { padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 600; }
+    .status-success { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
+    .status-error { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
+    .status-warning { background: rgba(234, 179, 8, 0.2); color: #eab308; }
+    .errors { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; }
+    .error-item { color: #ef4444; padding: 0.5rem 0; font-family: monospace; font-size: 0.875rem; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>🔍 Reality Mode Report</h1>
+    <p class="subtitle">Generated by Guardrail - \${new Date().toLocaleString()}</p>
+    
+    <div class="score-card">
+      <div class="score">\${score}</div>
+      <div class="grade">Grade: \${grade}</div>
+      <p style="color: #888; margin-top: 1rem;">
+        \${score >= 80 ? '✅ Ready to ship!' : score >= 60 ? '⚠️ Needs some work' : '❌ Critical issues found'}
+      </p>
+    </div>
+    
+    <div class="metrics">
+      <div class="metric">
+        <div class="metric-value">\${results.coverage.routes}/\${results.routes.length}</div>
+        <div class="metric-label">Routes Working</div>
+      </div>
+      <div class="metric">
+        <div class="metric-value">\${results.coverage.elements}/\${results.elements.length}</div>
+        <div class="metric-label">Elements Working</div>
+      </div>
+      <div class="metric">
+        <div class="metric-value">\${results.coverage.forms}/\${results.forms.length}</div>
+        <div class="metric-label">Forms Working</div>
+      </div>
+      <div class="metric">
+        <div class="metric-value">\${results.errors.length}</div>
+        <div class="metric-label">Errors Found</div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>🗺️ Routes</h2>
+      \${results.routes.map(r => \`
+        <div class="item">
+          <span>\${r.path}</span>
+          <span class="status status-\${r.status === 'success' ? 'success' : 'error'}">\${r.status}\${r.responseTime ? \` (\${r.responseTime}ms)\` : ''}</span>
+        </div>
+      \`).join('')}
+    </div>
+    
+    <div class="section">
+      <h2>🔘 Interactive Elements</h2>
+      \${results.elements.slice(0, 20).map(e => \`
+        <div class="item">
+          <span>\${e.text || e.selector}</span>
+          <span class="status status-\${e.status === 'success' ? 'success' : e.status === 'no-change' ? 'warning' : 'error'}">\${e.status}</span>
+        </div>
+      \`).join('')}
+      \${results.elements.length > 20 ? \`<p style="color: #888; padding-top: 1rem;">... and \${results.elements.length - 20} more</p>\` : ''}
+    </div>
+    
+    <div class="section">
+      <h2>📝 Forms</h2>
+      \${results.forms.map(f => \`
+        <div class="item">
+          <span>\${f.selector}</span>
+          <span class="status status-\${f.status === 'success' ? 'success' : 'error'}">\${f.status} (\${f.fieldsFilledCount} fields)</span>
+        </div>
+      \`).join('')}
+    </div>
+    
+    \${results.errors.length > 0 ? \`
+    <div class="section errors">
+      <h2>❌ Errors Captured</h2>
+      \${results.errors.slice(0, 10).map(e => \`
+        <div class="error-item">[\${e.type}] \${e.message}</div>
+      \`).join('')}
+    </div>
+    \` : ''}
+    
+    <div class="section">
+      <h2>📊 API Calls</h2>
+      \${results.networkCalls.slice(0, 15).map(n => \`
+        <div class="item">
+          <span>\${n.method} \${n.url.split('?')[0]}</span>
+          <span class="status status-\${n.status < 400 ? 'success' : 'error'}">\${n.status}</span>
+        </div>
+      \`).join('')}
+    </div>
+  </div>
+</body>
+</html>\`;
+}
+`;
+  }
+
+  /**
+   * Generate auth test section if auth config is provided
+   */
+  private generateAuthTest(
+    authConfig: NonNullable<ExplorerConfig["auth"]>,
+  ): string {
+    return `
+  test('00 - Authenticate', async () => {
+    await page.goto('${authConfig.loginUrl}');
+    await page.waitForLoadState('networkidle');
+    
+    // Fill credentials
+    await page.fill('${authConfig.credentials.emailField}', '${authConfig.credentials.email}');
+    await page.fill('${authConfig.credentials.passwordField}', '${authConfig.credentials.password}');
+    
+    // Submit
+    await page.click('button[type="submit"]');
+    
+    // Wait for success indicator
+    await page.waitForSelector('${authConfig.successIndicator}', { timeout: 10000 });
+    
+    console.log('✅ Authentication successful');
+  });
+`;
+  }
+
+  /**
+   * Get the explorer configuration
+   */
+  getConfig(): ExplorerConfig {
+    return this.config;
+  }
+}
+
+/**
+ * Create default explorer config
+ */
+export function createDefaultConfig(
+  baseUrl: string,
+  outputDir: string,
+): ExplorerConfig {
+  return {
+    baseUrl,
+    maxPages: 20,
+    maxActionsPerPage: 50,
+    timeout: 30000,
+    headless: true,
+    allowDestructive: false,
+    destructivePatterns: [
+      "delete",
+      "remove",
+      "destroy",
+      "cancel",
+      "deactivate",
+      "terminate",
+    ],
+    outputDir,
+    captureVideo: true,
+    captureTrace: true,
+    captureScreenshots: true,
+  };
+}