Manual Test Coverage Measurement Tool

A Chrome extension and Coverage Bridge Server for measuring code coverage during manual testing of web applications.

Features

• Backend Coverage (JaCoCo): Measure Java/Spring backend code coverage via JaCoCo agent
• Frontend Coverage (V8/CDP): Measure JavaScript frontend code coverage via Chrome DevTools Protocol
• Real-time Control: Start/Stop coverage measurement through Chrome extension popup
• Report Generation: Generate HTML, JSON, XML reports for both backend and frontend
• One-Click Report Viewing: Click report links to open HTML reports directly in browser

Architecture

┌─────────────────────────────────────────────────────────────┐
│                    Chrome Extension                          │
│  ┌─────────┐  ┌─────────────────────────────────────────┐   │
│  │ Popup   │  │ Background Service Worker               │   │
│  │ (UI)    │──│ - CDP control (chrome.debugger API)     │   │
│  └─────────┘  │ - HTTP API calls to Coverage Bridge     │   │
│               └─────────────────────────────────────────┘   │
└───────────────────────────┬─────────────────────────────────┘
                            │ HTTP API
                            ▼
┌─────────────────────────────────────────────────────────────┐
│          Coverage Bridge Server (localhost:9528)             │
│  - JaCoCo CLI execution (dump, report)                      │
│  - V8 coverage report generation (monocart-coverage-reports)│
└─────────────────────────────────────────────────────────────┘

Prerequisites

• Node.js: v18.0.0 or higher
• Java: JRE/JDK 8 or higher (for JaCoCo CLI)
• Chrome Browser: Latest version recommended

Quick Start

Step 1: Start the Coverage Bridge Server

cd server
npm install
npm start

The server will start at http://localhost:9528

Step 2: Load Chrome Extension

1. Open Chrome and navigate to chrome://extensions/
2. Enable "Developer mode" (toggle in top right)
3. Click "Load unpacked"
4. Select the extension folder from this project

Step 3: Configure and Use

1. Click the extension icon in Chrome toolbar to open the popup
2. Go to Server tab and click Load Server Defaults to auto-fill paths
3. Navigate to your web application
4. Click Start Coverage (page will reload automatically)
5. Perform manual testing
6. Click Stop & Report
7. Click the report links to view coverage in browser

Extension UI Guide

Control Tab

The main control panel for starting and stopping coverage measurement.

Initial State:

• Backend (JaCoCo): Toggle to enable/disable backend coverage
• Frontend (V8/CDP): Toggle to enable/disable frontend coverage
• Start Coverage: Begin collecting coverage data
• Stop & Report: Stop collection and generate HTML reports

After Stop & Report:

• Backend HTML Report: Click to open JaCoCo HTML report in new tab
• Backend XML Report: Click to copy XML file path
• Frontend V8 Report: Click to open V8 HTML report in new tab (green background indicates clickable)
• Frontend Output Dir: Click to copy output directory path

Backend Tab (JaCoCo Settings)

Configure JaCoCo settings for Java/Spring backend coverage:

Setting	Description	Example
Address	JaCoCo agent host	localhost
Port	JaCoCo agent port	6300
CLI Path	Path to jacococli.jar	/path/to/jacococli.jar
Class Files Path	Compiled classes location	/project/target/classes
Source Files Path	Java source files (for HTML report)	/project/src/main/java
Output Directory	Where to save reports	/path/to/coverage-output

Frontend Tab (V8 Settings)

Configure V8 settings for JavaScript frontend coverage:

Setting	Description	Example
Output Directory	Where to save reports	/path/to/coverage-output
Report Name	Name for the report	Manual Test Coverage
Report Types	Which reports to generate	v8, html, json, lcov
Entry Filter	Filter for entry files (JSON)	{"**/node_modules/**": false}
Source Filter	Filter for source files (JSON)	{"**/src/**": true}

Server Tab

Configure the Coverage Bridge Server connection:

Setting	Description	Default
Server URL	Coverage Bridge Server address	http://localhost:9528

Buttons:

• Test Connection: Verify the server is running
• Load Server Defaults: Auto-fill output directories with server's default paths

Important: Click "Load Server Defaults" to automatically configure output directories. Reports will be saved on the machine where the Coverage Bridge Server is running, not on remote backend/frontend servers.

Viewing Coverage Reports

After clicking Stop & Report, HTML reports are generated and saved on the Coverage Bridge Server machine.

Opening Reports Directly from Extension

New Feature: Report links with a green background and ↗ icon can be clicked to open the report directly in a new browser tab:

• Backend HTML Report → Opens JaCoCo HTML report
• Frontend V8 Report → Opens V8 HTML report

The Coverage Bridge Server automatically serves these reports via HTTP, so you don't need to manually start a file server.

Default Report Location

When using server defaults, reports are saved in the server/reports/ directory:

server/reports/
├── backend/        # JaCoCo HTML reports
│   └── html/
│       └── index.html
└── frontend/       # V8 HTML reports
    └── index.html

You can also access reports via HTTP:

• Backend: http://localhost:9528/reports/backend/html/index.html
• Frontend: http://localhost:9528/reports/frontend/index.html

Custom Output Directory

If you specify custom paths in Backend/Frontend settings, reports will be saved to those locations. The extension will still provide clickable links that open via the server's dynamic file serving endpoint.

Sample Coverage Reports

Frontend V8 Coverage Report (monocart-coverage-reports):

Backend JaCoCo Coverage Report:

Why Reports are Saved on the Server Machine

In real-world scenarios, your backend and frontend may be running on different machines or remote servers. The Coverage Bridge Server collects coverage data from these sources and generates reports locally, ensuring you always have access to the reports regardless of where your applications are deployed.

Backend Setup (JaCoCo Agent)

Your Spring/Java application must be running with JaCoCo agent in tcpserver output mode.

Recommended: Build JAR and Run Directly

This is the most reliable method:

# 1. Build the JAR (skip tests for faster build)
./mvnw package -DskipTests

# 2. Run with JaCoCo agent
java -javaagent:/path/to/jacocoagent.jar=output=tcpserver,port=6300 \
     -jar target/your-app.jar

Important: Maven spring-boot:run Fork Issue

When using ./mvnw spring-boot:run, the JaCoCo agent may not be properly attached because Spring Boot Maven Plugin forks a separate JVM. The following methods DO NOT WORK reliably:

# ❌ Does NOT work - MAVEN_OPTS is not passed to forked process
MAVEN_OPTS="-javaagent:jacocoagent.jar=..." ./mvnw spring-boot:run

# ❌ Does NOT work - jvmArguments may not be applied
./mvnw spring-boot:run -Dspring-boot.run.jvmArguments="..."

If you must use spring-boot:run, configure it in pom.xml:

<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    <configuration>
        <jvmArguments>
            -javaagent:${project.basedir}/jacocoagent.jar=output=tcpserver,port=6300
        </jvmArguments>
    </configuration>
</plugin>

Verifying JaCoCo Agent is Running

Check if the TCP server is listening:

lsof -i :6300
# Should show a java process listening on port 6300

Example: Spring PetClinic Project

Here's a complete example using the Spring PetClinic application:

1. Start Backend with JaCoCo

cd spring-petclinic
./mvnw package -DskipTests
java -javaagent:jacocoagent.jar=output=tcpserver,port=6300 \
     -jar target/spring-petclinic-*.jar

2. Start Frontend

cd frontend-petclinic
npm install
npm run dev

3. Start Coverage Bridge Server

cd coverage-measurement-tool/server
npm start

4. Configure Extension

Backend Tab:

Setting	Value
Address	localhost
Port	6300
CLI Path	/path/to/server/jacococli.jar
Class Files	/path/to/spring-petclinic/target/classes
Source Files	/path/to/spring-petclinic/src/main/java
Output Directory	/path/to/spring-petclinic/coverage-output

Frontend Tab:

Setting	Value
Output Directory	/path/to/frontend-petclinic/coverage-output
Report Name	Frontend Manual Test Coverage

Server Tab:

Setting	Value
Server URL	http://localhost:9528

5. Run Test and Generate Report

1. Navigate to http://localhost:5173/ in Chrome
2. Click Start Coverage in the extension (page will reload automatically)
3. Perform manual testing (click buttons, navigate pages, etc.)
4. Click Stop & Report
5. View reports by clicking the links in "Reports Generated" section:
   • Backend HTML Report → Opens JaCoCo report in new tab
   • Frontend V8 Report → Opens V8 report in new tab

API Endpoints

The Coverage Bridge Server provides the following endpoints:

Server Endpoints

Method	Endpoint	Description
GET	/health	Server health check
GET	/config	Get server default configuration
GET	/reports/*	Static file serving for default reports directory
GET	/serve-report/*	Dynamic file serving for any report path
POST	/get-report-url	Get HTTP URL for a local report path

JaCoCo (Backend) Endpoints

Method	Endpoint	Description
POST	/jacoco/reset	Reset JaCoCo coverage buffer
POST	/jacoco/dump	Dump coverage data to exec file
POST	/jacoco/report	Generate JaCoCo report
POST	/jacoco/dump-and-report	Dump and generate report in one step (returns reportUrl)

V8 (Frontend) Endpoints

Method	Endpoint	Description
POST	/v8/report	Generate V8 coverage report from coverage data
POST	/v8/save-raw	Save raw coverage data to file
POST	/v8/save-and-report	Save and generate report in one step (returns reportUrl)
POST	/v8/generate-from-file	Generate report from saved raw file
POST	/v8/merge	Merge multiple coverage reports

Using with Playwright

You can use Playwright to automate coverage collection during E2E tests:

// Start JS coverage before navigation
await page.coverage.startJSCoverage();

// Navigate and perform actions
await page.goto('http://localhost:5173/');
await page.getByRole('button', { name: 'Search' }).click();
// ... more actions

// Stop and collect coverage
const coverage = await page.coverage.stopJSCoverage();

// Filter source files only
const srcCoverage = coverage.filter(e => e.url.includes('/src/'));

// Send to Coverage Bridge Server for report generation
await fetch('http://localhost:9528/v8/save-and-report', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    coverageData: srcCoverage,
    outputDir: '/path/to/coverage-output',
    name: 'E2E Test Coverage',
    reports: ['v8', 'html', 'console-summary']
  })
});

Automated E2E Coverage Test

This project includes an automated E2E test that demonstrates the full coverage measurement workflow using Playwright.

Prerequisites

Before running the test, start all required servers:

# Terminal 1: Start Coverage Bridge Server
cd server && npm start

# Terminal 2: Build and start Backend with JaCoCo
cd spring-petclinic
./mvnw package -DskipTests -Dcheckstyle.skip=true
java -javaagent:jacocoagent.jar=output=tcpserver,port=6300 -jar target/spring-petclinic-*.jar

# Terminal 3: Start Frontend
cd frontend-petclinic && npm run dev

Running the Test

# Install dependencies (first time only)
cd e2e-test
npm install
npx playwright install chromium

# Run the test
npm test

What the Test Does

1. Checks that all servers are running
2. Resets JaCoCo coverage buffer
3. Launches a browser and starts V8 coverage collection
4. Performs various UI actions:
   • Loads the Vets table
   • Searches for owners
   • Creates a new owner
   • Opens owner details
   • Creates a new pet
   • Creates a new visit
5. Stops coverage collection
6. Generates both backend (JaCoCo) and frontend (V8) HTML reports

Test Output

After successful execution, you can view the coverage reports:

Via HTTP (recommended):

• Backend Report: http://localhost:9528/reports/backend/html/index.html
• Frontend Report: http://localhost:9528/reports/frontend/index.html

Local File Paths:

• Backend Report: server/reports/backend/html/index.html
• Frontend Report: server/reports/frontend/index.html

Troubleshooting

Coverage Bridge Server Connection Failed

1. Ensure the server is running: cd server && npm start
2. Check the server URL in extension settings (default: http://localhost:9528)
3. Test connection using the "Test Connection" button in Server tab

JaCoCo Connection Failed

1. Verify your Java application is running with JaCoCo agent
2. Check the agent is configured with output=tcpserver
3. Verify the address and port match your JaCoCo agent configuration
4. Ensure no firewall is blocking the connection

JaCoCo Shows 0% Coverage

This usually means the JaCoCo agent was not properly attached:

1. Verify agent attachment:

   ps aux | grep java | grep jacocoagent

2. Check port binding:

   lsof -i :6300

3. Use JAR execution instead of Maven spring-boot:run:

   ./mvnw package -DskipTests
   java -javaagent:jacocoagent.jar=output=tcpserver,port=6300 -jar target/*.jar

Frontend Coverage Not Collected

The Chrome extension uses Chrome's built-in Debugger API (CDP) to collect V8 coverage. This has some limitations:

1. DevTools Conflict (Most Common Issue)

Problem: Only one debugger can be attached to a tab at a time. If DevTools (F12) is open, the extension cannot attach.

Solution:

• Close DevTools before clicking "Start Coverage"
• Press F12 to close DevTools, then try again

Error message: "DevTools is open on this tab. Please close DevTools (F12) and try again."

2. Invalid Page Type

Problem: Coverage cannot be collected on Chrome internal pages.

Solution:

• Navigate to your web application (http:// or https://)
• Coverage does NOT work on: chrome://, chrome-extension://, about:blank

3. Automatic Page Reload

How it works: When you click "Start Coverage", the extension automatically reloads the page. This is necessary because V8 coverage only tracks JavaScript executed after profiling starts.

What to expect:

1. Click "Start Coverage"
2. Page automatically reloads (this is normal!)
3. Perform your test actions
4. Click "Stop & Report"

If coverage is still empty: Check the Service Worker console (chrome://extensions/ → "Service worker") for debugging logs showing which URLs were captured.

4. Source File Filtering

The extension filters coverage to only include source files (URLs containing /src/). If your source files are in a different path:

• Check the console logs in Service Worker for "All coverage URLs"
• The extension will try a relaxed filter if no /src/ files are found

Empty Coverage Report

1. Verify the source/class file paths are correct
2. Check the entry/source filters aren't too restrictive
3. Ensure you actually executed code during the test session

Frontend Report Shows Empty When Opened Directly

Problem: Opening the frontend HTML report directly via file:// protocol shows an empty report, but coverage-raw.json has data.

Cause: Modern coverage report libraries (like monocart-coverage-reports) load data dynamically via JavaScript. Browsers block these requests due to CORS when using file:// protocol.

Solution: Always access reports via HTTP:

1. Click the report link in the extension (recommended) - opens report via Coverage Bridge Server
2. Manual HTTP access: http://localhost:9528/reports/frontend/index.html
3. Custom paths: Use http://localhost:9528/serve-report/{encoded-path} endpoint

Development

Project Structure

coverage-tool/
├── extension/                    # Chrome Extension
│   ├── manifest.json            # Extension manifest (V3)
│   ├── background.js            # Service worker
│   ├── popup/                   # Popup UI
│   │   ├── popup.html
│   │   ├── popup.css
│   │   └── popup.js
│   └── icons/                   # Extension icons
├── server/                      # Coverage Bridge Server
│   ├── package.json
│   ├── server.js                # Express server
│   ├── jacococli.jar            # JaCoCo CLI (included)
│   ├── routes/
│   │   ├── jacoco.js            # JaCoCo endpoints
│   │   └── coverage.js          # V8 coverage endpoints
│   └── lib/
│       ├── jacoco-executor.js   # JaCoCo CLI wrapper
│       └── mcr-reporter.js      # MCR wrapper
├── e2e-test/                    # Automated E2E Test
│   ├── package.json
│   └── coverage-test.js         # Playwright-based test
├── spring-petclinic/            # Example: Spring Backend
├── frontend-petclinic/          # Example: React Frontend
├── docs/
│   └── images/                  # Documentation images
└── README.md

Running in Development

# Server with auto-reload
cd server
npm run dev

For extension changes, reload the extension in chrome://extensions/

References

• JaCoCo Documentation
• JaCoCo CLI
• JaCoCo Agent
• Monocart Coverage Reports
• Chrome Debugger API
• V8 Coverage

License

MIT