HTML Reports

NOIV generates beautiful, professional HTML reports from your test results, perfect for sharing with stakeholders, documentation, and team presentations.

Basic Report Generation

Generate an HTML report from your latest test results:

bash

noiv report html

This automatically uses the most recent test results and creates an interactive HTML report.

Custom Report Generation

From Specific Test Results

bash

noiv report html /path/to/test_results.json

Use a specific test results file instead of the latest one.

Custom Output Location

bash

noiv report html -o custom_report.html

Specify where to save the generated report.

Combined Options

bash

noiv report html /path/to/results.json -o reports/api_test_report.html

Report Features

Interactive Dashboard

The HTML report includes:

Test Summary Section

Total test count with pass/fail breakdown
Success rate percentage with visual indicator
Average response time across all tests
Test execution duration and timestamp

Test Results Table

Individual test results with status indicators
Response times for each test
Status codes and validation results
Error details for failed tests
Sortable columns for easy analysis

Performance Charts

Response time distribution histogram
Test execution timeline showing when tests ran
Success rate trends if multiple test runs
Performance metrics visualization

Detailed Test Information

Request details (method, URL, headers)
Response information (status, headers, body preview)
Validation results with pass/fail details
Error messages and stack traces for failures

Visual Elements

Status Indicators

✅ Green checks for passing tests
❌ Red crosses for failing tests
⏱️ Clock icons for response times
📊 Charts for performance data

Color Coding

Green: Successful tests and good performance
Red: Failed tests and errors
Yellow: Warnings and slow responses
Blue: Information and neutral data

Sample HTML Report Structure

html

<!DOCTYPE html>
<html>
<head>
    <title>NOIV Test Report - E-commerce API Tests</title>
    <!-- Responsive CSS, Charts.js, Interactive features -->
</head>
<body>
    <!-- Header with NOIV branding -->
    <header>
        <h1>API Test Report</h1>
        <div class="test-summary">
            <div class="metric">
                <span class="value">15</span>
                <span class="label">Total Tests</span>
            </div>
            <div class="metric success">
                <span class="value">93.3%</span>
                <span class="label">Success Rate</span>
            </div>
            <div class="metric">
                <span class="value">245ms</span>
                <span class="label">Avg Response</span>
            </div>
        </div>
    </header>

    <!-- Interactive test results table -->
    <section class="test-results">
        <table>
            <thead>
                <tr>
                    <th>Test Name</th>
                    <th>Status</th>
                    <th>Response Time</th>
                    <th>Status Code</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                <!-- Dynamic test result rows -->
            </tbody>
        </table>
    </section>

    <!-- Performance charts -->
    <section class="charts">
        <div class="chart-container">
            <canvas id="responseTimeChart"></canvas>
        </div>
    </section>
</body>
</html>

Report Workflow

1. Run Tests

bash

# Run your test suite
noiv test run api_tests.yaml

2. Generate Report

bash

# Create HTML report
noiv report html

bash

# NOIV asks if you want to open the report
# Select 'y' to open in browser automatically

The report opens in your default browser and is ready to share.

Advanced Report Usage

Automated Reporting

Include report generation in your testing workflow:

bash

#!/bin/bash
# test_and_report.sh

echo "Running API tests..."
noiv test run api_tests.yaml

echo "Generating HTML report..."
noiv report html -o reports/$(date +%Y%m%d_%H%M%S)_api_report.html

echo "Report generated successfully!"

CI/CD Integration

yaml

# .github/workflows/api-tests.yml
name: API Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Install NOIV
        run: pip install noiv
        
      - name: Run API Tests
        run: noiv test run tests/api_tests.yaml
        
      - name: Generate HTML Report
        run: noiv report html -o test_report.html
        
      - name: Upload Report
        uses: actions/upload-artifact@v2
        with:
          name: test-report
          path: test_report.html

Email Reports

Generate report locally
Attach HTML file to email
Recipients can open directly in browser

Web Hosting

bash

# Upload to web server
scp test_report.html user@server:/var/www/reports/
# Share URL: https://yourserver.com/reports/test_report.html

Internal Documentation

Include reports in confluence/wiki pages
Embed in project documentation
Archive for historical comparison

Customizing Reports

Report Styling

While NOIV generates professional reports by default, you can customize them:

Add Company Branding

Edit the generated HTML to include:

Company logo
Brand colors
Custom headers/footers

Custom CSS

html

<style>
.test-summary {
    background: #your-brand-color;
}
.metric.success {
    color: #your-success-color;
}
</style>

Additional Information

Add context to reports by editing the HTML:

html

<!-- Add test environment info -->
<div class="environment-info">
    <h3>Test Environment</h3>
    <p>Environment: Production</p>
    <p>API Version: v2.1</p>
    <p>Test Date: 2025-07-24</p>
</div>

Report Best Practices

1. Regular Report Generation

bash

# Generate reports after every test run
noiv test run tests.yaml && noiv report html

2. Descriptive Filenames

bash

# Use meaningful report names
noiv report html -o "$(date +%Y%m%d)_api_regression_tests.html"
noiv report html -o "release_2.1_verification_report.html"

3. Archive Historical Reports

bash

# Keep historical reports for trend analysis
mkdir -p reports/$(date +%Y)/$(date +%m)
noiv report html -o "reports/$(date +%Y)/$(date +%m)/api_tests_$(date +%d).html"

Developers: Full detailed reports
Managers: Summary reports with key metrics
Stakeholders: High-level status reports

Report Analysis

Identifying Issues

Performance Problems

Look for:

High average response times
Wide response time distribution
Slow individual tests

Reliability Issues

Monitor:

Test failure rates
Intermittent failures
Error patterns

Trend Analysis

Compare reports over time:

Performance degradation
Increasing failure rates
New error types

Actionable Insights

For Developers

Failed test details for debugging
Performance bottlenecks
Validation failures

For Operations

System performance trends
Error rate monitoring
Capacity planning data

For Management

Overall system health
Testing coverage
Quality metrics

Troubleshooting Reports

Missing Test Results

bash

# If no recent test results found
noiv test history  # Check if tests have been run
noiv test run simple_test.yaml  # Run a test first
noiv report html  # Then generate report

Report Generation Errors

bash

# If report generation fails
# Check test results file format
# Verify output directory permissions
# Try with explicit file path
noiv report html ~/.noiv/history/latest_results.json

Browser Compatibility

The generated HTML reports work in all modern browsers:

Chrome/Chromium
Firefox
Safari
Edge

For older browsers, some interactive features may be limited.

Next Steps

After mastering HTML reports:

Performance Testing - Automate report generation
Quick Start - Optimize testing workflow
Installation - Advanced reporting options
Performance Testing - Include performance data

TIP

HTML reports are perfect for stakeholder communication. The visual format makes it easy to understand test results and system health at a glance.

INFO

Reports are self-contained HTML files with embedded CSS and JavaScript, making them easy to share and view anywhere without external dependencies.

HTML Reports ​

Basic Report Generation ​

Custom Report Generation ​

From Specific Test Results ​

Custom Output Location ​

Combined Options ​

Report Features ​

Interactive Dashboard ​

Test Summary Section ​

Test Results Table ​

Performance Charts ​

Detailed Test Information ​

Visual Elements ​

Status Indicators ​

Color Coding ​

Sample HTML Report Structure ​

Report Workflow ​

1. Run Tests ​

2. Generate Report ​

3. Open and Share ​

Advanced Report Usage ​

Automated Reporting ​

CI/CD Integration ​

Team Sharing ​

Email Reports ​

Web Hosting ​

Internal Documentation ​

Customizing Reports ​

Report Styling ​

Add Company Branding ​

Custom CSS ​

Additional Information ​

Report Best Practices ​

1. Regular Report Generation ​

2. Descriptive Filenames ​

3. Archive Historical Reports ​

4. Share Appropriately ​

Report Analysis ​

Identifying Issues ​

Performance Problems ​

Reliability Issues ​

Trend Analysis ​

Actionable Insights ​

For Developers ​

For Operations ​

For Management ​

Troubleshooting Reports ​

Missing Test Results ​

Report Generation Errors ​

Browser Compatibility ​

Next Steps ​

HTML Reports

Basic Report Generation

Custom Report Generation

From Specific Test Results

Custom Output Location

Combined Options

Report Features

Interactive Dashboard

Test Summary Section

Test Results Table

Performance Charts

Detailed Test Information

Visual Elements

Status Indicators

Color Coding

Sample HTML Report Structure

Report Workflow

1. Run Tests

2. Generate Report

3. Open and Share

Advanced Report Usage

Automated Reporting

CI/CD Integration

Team Sharing

Email Reports

Web Hosting

Internal Documentation

Customizing Reports

Report Styling

Add Company Branding

Custom CSS

Additional Information

Report Best Practices

1. Regular Report Generation

2. Descriptive Filenames

3. Archive Historical Reports

4. Share Appropriately

Report Analysis

Identifying Issues

Performance Problems

Reliability Issues

Trend Analysis

Actionable Insights

For Developers

For Operations

For Management

Troubleshooting Reports

Missing Test Results

Report Generation Errors

Browser Compatibility

Next Steps