Advanced Features

Explore DebuggAI's advanced extension capabilities for power users and complex testing scenarios.

Secure Tunnel Management

Understanding Local Tunnels

DebuggAI uses secure tunnels to connect our remote testing infrastructure to your local development environment. This approach provides several benefits:

• Zero Configuration: No need to deploy to staging environments
• Real-time Testing: Test against your exact local development state
• Security: Encrypted connections protect your code and data
• Speed: Direct connection to localhost eliminates deployment delays

Manual Tunnel Control

While tunnels are typically managed automatically, you can control them manually when needed:

// Start a tunnel programmatically
"debugg-ai.startTunnel": async (port: number, domain: string) => {
  // Custom tunnel configuration
  await start({
    addr: port,
    hostname: domain,
    onLogEvent: (data: any) => {
      console.log(`${port} | ${domain} | tunnel log: ${data}`);
    },
  });
}

Tunnel Configuration

Configure tunnel settings for specific use cases:

• Custom Domains: Use your own domain for tunnel endpoints
• Port Management: Handle multiple applications on different ports
• Logging: Enable detailed tunnel logging for debugging

Commit-Based Testing Automation

Intelligent Change Detection

DebuggAI's commit testing feature analyzes your Git changes to generate relevant tests:

# Enable commit monitoring
DebuggAI: Start Commit Testing

# Check monitoring status
DebuggAI: Get Commit Testing Status

# Stop monitoring when done
DebuggAI: Stop Commit Testing

Working Changes Analysis

Test your current work before committing:

1. Change Detection: Analyzes modified files in your working directory
2. Impact Analysis: Identifies which features might be affected
3. Test Generation: Creates tests specifically for your changes
4. Validation: Runs tests to ensure changes don't break functionality

Custom Test Output

Configure where generated test files are saved:

# Set custom output directory
DebuggAI: Set Commit Test Output Directory

# Example paths:
tests/playwright          # Playwright test format
tests/e2e                # Generic E2E tests
cypress/e2e              # Cypress test format
__tests__/integration    # Jest integration tests

Commit Test Workflow

graph TD
    A[Code Changes Made] --> B[Enable Commit Testing]
    B --> C[DebuggAI Monitors Git]
    C --> D[Changes Detected]
    D --> E[Generate Relevant Tests]
    E --> F[Run Tests Automatically]
    F --> G{Tests Pass?}
    G -->|Yes| H[Safe to Commit]
    G -->|No| I[Review Failures]
    I --> J[Fix Issues]
    J --> D

Test Suite Generation Strategies

Intelligent App Analysis

When generating test suites, DebuggAI employs several strategies:

1. DOM Analysis: Examines your application's structure
2. Route Discovery: Identifies all accessible pages and flows
3. User Flow Mapping: Maps common user interaction patterns
4. Component Testing: Tests individual UI components
5. Integration Testing: Verifies component interactions

Customizing Suite Generation

Control how test suites are generated:

// Example configuration for suite generation
{
  testParams: {
    description: "User authentication suite",
    changes: workingChanges,
    commitHash: "abc123",
    branchName: "feature/auth-improvements"
  },
  title: "Authentication Test Suite",
  testObjectType: "commit-suite",
  testRunType: "generate",
  localServerPort: 3000
}

Suite Management

• Versioning: Track test suite versions across commits
• Branching: Generate different suites for different branches
• Merging: Combine suites when merging branches
• Cleanup: Remove outdated suites automatically

Platform-Specific Integrations

Next.js Integration

Special handling for Next.js applications:

// next.config.mjs considerations
export default {
  // DebuggAI works with all Next.js configurations
  experimental: {
    appDir: true, // App Router supported
  },
  // API routes are automatically tested
};

React Application Testing

Enhanced testing for React components:

• Component State Testing: Verify state changes
• Hook Testing: Test custom React hooks
• Context Testing: Validate React Context usage
• Routing Testing: Test React Router navigation

Node.js Backend Testing

Test your Node.js APIs and services:

• API Endpoint Testing: Verify all REST endpoints
• Database Integration: Test database operations
• Middleware Testing: Validate middleware functions
• Error Handling: Test error scenarios

Django Integration

Comprehensive Django application testing:

• View Testing: Test Django views and templates
• Model Testing: Verify model operations
• Form Testing: Test Django forms
• Admin Interface: Test Django admin functionality

Advanced Configuration

Multi-Project Workspaces

Configure DebuggAI for workspace with multiple projects:

// .vscode/settings.json
{
  "debugg-ai.projects": [
    {
      "name": "frontend",
      "port": 3000,
      "path": "./frontend"
    },
    {
      "name": "backend", 
      "port": 8000,
      "path": "./backend"
    }
  ]
}

Environment-Specific Testing

Test against different environments:

• Development: Test against localhost
• Staging: Test against staging servers
• Production-like: Test against production-like environments

Custom Test Scripts

Generate tests in specific formats:

# Playwright format
DebuggAI generates .spec.ts files

# Cypress format  
DebuggAI generates .cy.js files

# Custom format
Configure output templates

Integration with CI/CD

GitHub Actions Integration

# .github/workflows/debugg-ai-tests.yml
name: DebuggAI E2E Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'
      - name: Install dependencies
        run: npm install
      - name: Start application
        run: npm start &
      - name: Run DebuggAI tests
        uses: debugg-ai/github-action@v1
        with:
          api-key: ${{ secrets.DEBUGG_AI_API_KEY }}
          local-port: 3000

Jenkins Integration

pipeline {
    agent any
    stages {
        stage('Test') {
            steps {
                script {
                    // Start application
                    sh 'npm start &'
                    
                    // Run DebuggAI tests
                    sh 'debugg-ai test --port=3000'
                }
            }
        }
    }
}

Performance Optimization

Test Execution Speed

Optimize test execution time:

• Parallel Execution: Run multiple tests simultaneously
• Smart Caching: Cache test results and reuse when possible
• Incremental Testing: Only test changed functionality
• Resource Pooling: Reuse browser instances

Memory Management

Handle large test suites efficiently:

• Test Isolation: Ensure tests don't interfere with each other
• Cleanup: Automatic cleanup of test artifacts
• Resource Limits: Configure memory and CPU limits

Debugging and Diagnostics

Verbose Logging

Enable detailed logging for troubleshooting:

# Enable debug mode in extension settings
"debugg-ai.debug": true

# View logs in IDE output panel
Output > DebuggAI

Test Replay and Analysis

When tests fail, DebuggAI provides:

• Step-by-step Replay: Review each test action
• Screenshot Timeline: Visual progression of test execution
• Console Logs: Capture browser console output
• Network Activity: Monitor API calls and responses
• Performance Metrics: Timing and resource usage data

Error Analysis

Advanced error analysis features:

• Root Cause Analysis: AI-powered failure investigation
• Similar Failure Detection: Find patterns in test failures
• Suggested Fixes: AI recommendations for fixing issues
• Historical Comparison: Compare with previous test runs

Security and Privacy

Data Protection

DebuggAI protects your sensitive data:

• Encrypted Tunnels: All connections use TLS encryption
• No Code Storage: Your source code never leaves your machine
• Minimal Data Collection: Only test results and metadata
• GDPR Compliance: Full compliance with privacy regulations

Access Control

Manage team access to testing features:

• Role-Based Access: Different permissions for team members
• Project Isolation: Separate access for different projects
• Audit Logs: Track who ran which tests when

Next Steps

• Learn about Platform-Specific Features
• Explore Core Concepts
• Check out Troubleshooting
• Join our Community