Skip to main content

VS Code Extension

Primary workflow for browser testing in your IDE.

Core Command​

Cmd+Alt+C - Create new E2E test

The most important shortcut. Opens test creation dialog.

Basic Workflow​

1. Start Your App​

npm run dev
# App running on localhost:3000

2. Create Test​

  1. Press Cmd+Alt+C
  2. Enter test description:
Test user registration with valid email and password

3. AI Generates Test​

  • Analyzes your localhost:3000
  • Creates secure tunnel
  • Runs browser automation
  • Records screenshots/GIFs

4. View Results​

Results appear in:

  • VS Code Test Results panel
  • Terminal output
  • Web dashboard link

Test Descriptions​

Write clear, specific descriptions:

Good Examples:

Test login form with valid credentials
Test checkout flow with credit card payment
Test user profile update with new avatar

Avoid:

Test everything
Test the app
Make sure it works

Additional Commands​

Chat & Code Generation​

  • Cmd+L - Open AI chat
  • Cmd+I - Edit mode (generate code)

Debugging​

  • Cmd+Shift+R - Debug terminal errors
  • Cmd+Alt+E - Generate test suite

Configuration​

  • Cmd+, → Search "DebuggAI"
  • Set local port (default: 3000)
  • Toggle telemetry

Commit-Based Testing​

Enable automatic testing on git commits:

  1. VS Code Settings → Extensions → DebuggAI
  2. Enable "Commit Testing"
  3. Each commit triggers relevant tests

Test Results​

Each test run provides:

  • ✅/❌ Pass/fail status
  • Screenshots of each step
  • GIF recording of full test
  • Error details if failed
  • Performance metrics

Troubleshooting​

Extension not working?

  • Restart VS Code
  • Check DebuggAI is signed in
  • Verify localhost:3000 is running

Tests failing?

  • Check test description clarity
  • Ensure app is fully loaded
  • Review error screenshots

Need help?