Skip to main content

Using the Extension

This guide walks you through using DebuggAI's IDE extension to create and run end-to-end tests for your application.

Prerequisites​

Before you start, make sure you have:

  • ✅ DebuggAI extension installed (Installation Guide)
  • ✅ Logged into your DebuggAI account
  • ✅ Your local development server running (typically on localhost:3000)
  • ✅ A web application ready for testing

Creating Your First Test​

Step 1: Start Your Application​

Make sure your application is running locally:

# Example for Next.js
npm run dev

# Example for React
npm start

# Example for Django
python manage.py runserver

# Example for Node.js
npm start

Step 2: Create a New E2E Test​

  1. Open Command Palette

    • Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
    • Or use the keyboard shortcut Cmd+Alt+C (macOS) or Ctrl+Alt+C (Windows/Linux)

  2. Find DebuggAI Command

    • Type "DebuggAI: Create New E2E Test"
    • Select it from the dropdown

  3. Describe Your Test

    • Enter a description of what you want to test
    • Examples: 
      Test the user login functionality
      Verify user registration flow
      Test shopping cart checkout process
      Check contact form submission

  4. Configure Local Server (if first time)

    • If prompted, enter your local server port (default: 3000)
    • This setting will be saved for future tests

Step 3: Monitor Test Execution​

Once you create a test, DebuggAI will:

  1. Connect to Your Local Server: Establish a secure tunnel to your localhost
  2. Analyze Your Application: AI agents explore your application structure
  3. Generate Test Steps: Create detailed test scenarios
  4. Execute Tests: Run the tests against your application
  5. Provide Results: Display results in the Test Results panel

Running Existing Tests​

Run a Specific Test​

  1. Open Command Palette: Cmd+Shift+P / Ctrl+Shift+P
  2. Select Command: "DebuggAI: Run E2E Test"
  3. Enter Description: Describe the test you want to run
  4. Execute: The test will run against your current application state

Run Test Suites​

  1. Open Command Palette: Cmd+Shift+P / Ctrl+Shift+P
  2. Select Command: "DebuggAI: Run E2E Test Suite"
  3. Choose Suite: Select from available test suites
  4. Execute: All tests in the suite will run sequentially

Generating Test Suites​

Create Comprehensive Test Coverage​

  1. Open Command Palette: Cmd+Shift+P / Ctrl+Shift+P
  2. Select Command: "DebuggAI: Run E2E Suite Generator"
  3. Specify Section: Enter the app section to test (e.g., "User authentication")
  4. Review Generated Suite: DebuggAI will create multiple related tests

Working with Commit-Based Testing​

Enable Automatic Testing​

  1. Start Monitoring: Run "DebuggAI: Start Commit Testing"
  2. Make Changes: Edit your code as usual
  3. Automatic Testing: Tests run automatically when you commit

Test Your Current Changes​

Before committing, test your work-in-progress:

  1. Generate Tests: Run "DebuggAI: Generate Tests for Working Changes"
  2. Review Results: Check if your changes break existing functionality
  3. Fix Issues: Address any problems before committing

Understanding Test Results​

Test Results Panel​

DebuggAI integrates with your IDE's native test results panel:

  • ✅ Passed Tests: Green checkmarks indicate successful tests
  • ❌ Failed Tests: Red X marks show failed tests with detailed error messages
  • ⏳ Running Tests: Progress indicators for tests in execution

Detailed Test Information​

For each test, you can view:

  • Test Steps: Step-by-step breakdown of actions taken
  • Screenshots: Visual evidence of test execution
  • Error Details: Specific information about failures
  • Performance Metrics: Load times and response metrics

GIF Recordings​

Each test execution generates a GIF recording showing:

  • User Interactions: Simulated clicks, form inputs, navigation
  • Application Responses: How your app reacts to user actions
  • Failure Points: Exact moments when tests fail

Best Practices​

Writing Effective Test Descriptions​

Good Examples:

✅ Test user login with valid email and password
✅ Verify shopping cart updates when adding products
✅ Check form validation for required fields
✅ Test responsive design on mobile viewport

Avoid:

❌ Test login (too vague)
❌ Check everything (too broad)
❌ Fix the bug (not a test description)

Organizing Your Testing Workflow​

  1. Feature Development

    Write code → Test locally → Create E2E test → Verify functionality

  2. Bug Fixes

    Reproduce issue → Create test that fails → Fix code → Verify test passes

  3. Before Deployment

    Run all test suites → Review results → Fix issues → Deploy

Managing Test Configuration​

Configure Local Server Port​

If your app runs on a different port:

  1. Open VS Code Settings (Cmd+, / Ctrl+,)
  2. Search for "DebuggAI"
  3. Update "Local Server Port" setting
  4. Or use the extension's settings UI

Set Test Output Directory​

To customize where test files are saved:

  1. Open Command Palette: Cmd+Shift+P / Ctrl+Shift+P
  2. Run Command: "DebuggAI: Set Commit Test Output Directory"
  3. Enter Path: Specify your preferred directory (e.g., tests/e2e)

Common Workflows​

Daily Development​

# 1. Start your dev server
npm run dev

# 2. Make code changes
# Edit your application code

# 3. Test changes (in IDE)
# Cmd+Shift+P → "DebuggAI: Generate Tests for Working Changes"

# 4. Review results
# Check Test Results panel

# 5. Fix any issues and repeat

Feature Testing​

# 1. Complete feature development
# Your new feature is ready

# 2. Create comprehensive tests (in IDE)
# Cmd+Alt+C → Describe your feature tests

# 3. Generate test suite (in IDE)
# Cmd+Shift+P → "DebuggAI: Run E2E Suite Generator"

# 4. Review all test results
# Ensure feature works end-to-end

# 5. Commit when tests pass

Pre-deployment Validation​

# 1. Run existing test suites (in IDE)
# Cmd+Shift+P → "DebuggAI: Run E2E Test Suite"

# 2. Review all results
# Check for any regressions

# 3. Create additional tests if needed
# Cover any gaps in test coverage

# 4. Deploy with confidence

Troubleshooting Common Issues​

Test Creation Fails​

Problem: Tests fail to create or run

Solutions:

  • Verify your local server is running and accessible
  • Check the configured port matches your development server
  • Ensure your DebuggAI account is properly connected
  • Check your internet connection

Local Server Connection Issues​

Problem: Extension can't connect to localhost

Solutions:

  • Confirm your app is running on the configured port
  • Check firewall settings
  • Verify no other applications are blocking the port
  • Try restarting your development server

Test Results Not Showing​

Problem: Tests run but results don't appear

Solutions:

  • Check the Test Results panel in your IDE
  • Look for error messages in the IDE's output panel
  • Verify your DebuggAI account has proper permissions
  • Contact support if issues persist

Next Steps​