Skip to main content

Running Bug Analytics on Current Screen

The Chrome Extension provides two ways to work with bugs on the current screen: viewing existing bugs and finding new bugs using AI.

Viewing Bugs for Current Screen​

When you open the Bugs tab in the Chrome Extension:

  1. Automatic screen detection: The extension automatically identifies which screen you're currently on in your webapp
  2. Display bugs: All bugs that have been identified or reported for that screen are displayed in the list
  3. Filter and browse: You can filter bugs by severity, search by title, or view bugs assigned to you

This provides instant visibility into known issues for the screen you're viewing, helping you understand the quality status at a glance.

Finding Bugs with AI​

The "Find Bugs" feature uses AI to analyze the current browser state and automatically identify and add new bugs.

How to Use Find Bugs​

  1. Navigate to a screen: Go to any page in your application where you want to find bugs
  2. Open the extension: Click the TestChimp extension icon and go to the Bugs tab
  3. Select screen and state: Use the screen and state selectors to identify where you are in the Atlas SiteMap
    • If the screen/state doesn't exist yet, you can create it using the MindMap Builder or MindMap Update options
  4. Click "Find Bugs": This opens the analysis panel
  5. Select sources to analyze: Choose which data sources to capture and analyze:
    • DOM: Analyzes the current DOM structure for issues
    • Console: Analyzes recent console logs and errors
    • Network: Analyzes recent network requests and responses
    • Screenshot: Analyzes the visual appearance of the page
      • Visual Regression (optional): When screenshot is selected, you can optionally enable visual regression testing:
        • Compare against base image: Check the "Compare against a base image" option
        • Upload baseline: Upload an image file to use as the baseline for comparison
        • Select from Atlas: Choose from existing screenshots captured by ExploreChimp in the Atlas SiteMap (requires selecting a screen first)
        • The AI will compare the current screenshot against the baseline and identify visual regressions as bugs
  6. Click "Analyze": The extension will:
    • Capture the current state of each selected source
    • Send the data to TestChimp's AI for analysis
    • Automatically identify bugs and add them to your project
    • Tag the bugs to the selected screen and state

What Gets Analyzed​

The AI analyzes the captured sources to identify various types of bugs:

  • DOM issues: Broken links, missing elements, incorrect structure, accessibility issues
  • Console issues: JavaScript errors, warnings, deprecation notices
  • Network issues: Failed API calls, slow responses, error responses, security issues
  • Visual issues: Layout inconsistencies, visual glitches, missing images
  • Visual regressions: When a baseline image is provided, the AI compares the current screenshot against the baseline and identifies visual differences as bugs

Benefits​

Viewing Bugs:

  • Instant visibility: See all known issues for the current screen immediately
  • Context-aware: Automatically identifies which screen you're on
  • Quick status check: Understand the quality status of any screen at a glance

Finding Bugs:

  • Automated bug detection: AI identifies bugs across multiple categories automatically
  • Comprehensive analysis: Analyzes multiple data sources simultaneously
  • Instant results: Bugs are identified and added immediately
  • Tagged to screen-state: All bugs are properly tagged to the Atlas SiteMap for easy tracking
  • Visual regression support: Compare current screenshots against baseline images to detect visual regressions

Together, these features provide a complete bug management workflow: view existing bugs for context, and find new bugs using AI analysis.

Fixing Bugs Directly from the Browser​

When viewing bugs in the Bugs tab, you can fix them directly from the browser:

  1. Click on a bug card to expand it and see the bug details
  2. Click the "Fix" button (code icon) in the bug card
  3. Chrome Extension communicates with IDE: The extension sends the bug details and context to your VS Code extension (or Cursor/Antigravity)
  4. IDE receives the fix request: Your IDE extension receives the bug information formatted as a task for AI assistance
  5. Fix in your IDE: The IDE extension can help you fix the bug using AI assistance

Requirements:

  • The VS Code extension (or Cursor/Antigravity) must be installed and running
  • The extension must be connected to the Chrome extension
  • If not connected, the "Fix" button will be disabled with a tooltip explaining that the IDE extension must be installed and started

This enables Visual Vibe Coding - a seamless workflow where you can identify bugs in the browser and fix them in your code editor without manually copying details or switching contexts. See Visual Vibe Coding for more details.