- Self-contained HTML dashboard with MS Office 365 design - pytest plugin captures inputs, outputs, and errors per test - Unified orchestrator runs pytest + torture tests together - Test files persisted in reports/test_files/ with relative links - GitHub Actions workflow with PR comments and job summaries - Makefile with convenient commands (test, view-dashboard, etc.) - Works offline with embedded JSON data (no CORS issues)
MCP Office Tools - Test Dashboard
Beautiful, interactive HTML dashboard for viewing test results with Microsoft Office-inspired design.
Features
- MS Office Theme: Modern Microsoft Office 365-inspired design with Fluent Design elements
- Category-based Organization: Separate results by Word, Excel, PowerPoint, Universal, and Server categories
- Interactive Filtering: Search and filter tests by name, category, or status
- Detailed Test Views: Expand any test to see inputs, outputs, errors, and tracebacks
- Real-time Statistics: Pass/fail rates, duration metrics, and category breakdowns
- Self-contained: Works offline with no external dependencies
Quick Start
Run All Tests with Dashboard
# Run both pytest and torture tests, generate dashboard, and open in browser
python run_dashboard_tests.py
Run Only Pytest Tests
# Run pytest with dashboard plugin
pytest -p tests.pytest_dashboard_plugin --dashboard-output=reports/test_results.json
# Open dashboard
open reports/test_dashboard.html # macOS
xdg-open reports/test_dashboard.html # Linux
start reports/test_dashboard.html # Windows
View Existing Results
Simply open reports/test_dashboard.html in your browser. The dashboard will automatically load test_results.json from the same directory.
Dashboard Components
Summary Cards
Four main summary cards show:
- Total Tests: Number of test cases executed
- Passed: Successful tests with pass rate and progress bar
- Failed: Tests with errors
- Duration: Total execution time
Filter Controls
- Search Box: Filter tests by name, module, or category
- Category Filters: Filter by Word, Excel, PowerPoint, Universal, or Server
- Status Filters: Show only passed, failed, or skipped tests
Test Results
Each test displays:
- Status Icon: Visual indicator (✓ pass, ✗ fail, ⊘ skip)
- Test Name: Descriptive test name
- Category Badge: Color-coded category (Word=blue, Excel=green, PowerPoint=orange)
- Duration: Execution time in milliseconds
- Expandable Details: Click to view inputs, outputs, errors, and full traceback
File Structure
reports/
├── test_dashboard.html # Main dashboard (open this in browser)
├── test_results.json # Generated test data (auto-loaded by dashboard)
├── pytest_results.json # Intermediate pytest results
└── README.md # This file
Design Philosophy
Microsoft Office Color Palette
- Word Blue:
#2B579A- Used for Word-related tests - Excel Green:
#217346- Used for Excel-related tests - PowerPoint Orange:
#D24726- Used for PowerPoint-related tests - Primary Blue:
#0078D4- Accent color (Fluent Design)
Fluent Design Principles
- Subtle Shadows: Cards have soft shadows for depth
- Rounded Corners: 8px border radius for modern look
- Hover Effects: Interactive elements respond to mouse hover
- Typography: Segoe UI font family (Office standard)
- Clean Layout: Generous whitespace and clear hierarchy
Integration with CI/CD
GitHub Actions Example
- name: Run Tests with Dashboard
run: |
python run_dashboard_tests.py
- name: Upload Test Dashboard
uses: actions/upload-artifact@v3
with:
name: test-dashboard
path: reports/
GitLab CI Example
test_dashboard:
script:
- python run_dashboard_tests.py
artifacts:
paths:
- reports/
expire_in: 1 week
Customization
Change Dashboard Output Location
# Custom output path for pytest
pytest -p tests.pytest_dashboard_plugin --dashboard-output=custom/path/results.json
Modify Colors
Edit the CSS variables in test_dashboard.html:
:root {
--word-blue: #2B579A;
--excel-green: #217346;
--powerpoint-orange: #D24726;
/* ... more colors ... */
}
Troubleshooting
Dashboard shows "No Test Results Found"
- Ensure
test_results.jsonexists in thereports/directory - Run tests first:
python run_dashboard_tests.py - Check browser console for JSON loading errors
Tests not categorized correctly
- Categories are determined by test path/name
- Ensure test files follow naming convention (e.g.,
test_word_*.py) - Edit
_categorize_test()inpytest_dashboard_plugin.pyto customize
Dashboard doesn't open automatically
- May require manual browser opening
- Use the file path printed in terminal
- Check that
webbrowsermodule is available
Advanced Usage
Extend the Plugin
The pytest plugin can be customized by editing tests/pytest_dashboard_plugin.py:
def _extract_inputs(self, item):
"""Customize how test inputs are extracted"""
# Your custom logic here
pass
def _categorize_test(self, item):
"""Customize test categorization"""
# Your custom logic here
pass
Add Custom Test Data
The JSON format supports additional fields:
{
"metadata": { /* your custom metadata */ },
"summary": { /* summary stats */ },
"categories": { /* category breakdown */ },
"tests": [
{
"name": "test_name",
"custom_field": "your_value",
/* ... standard fields ... */
}
]
}
Contributing
When adding new test categories or features:
- Update
_categorize_test()in the pytest plugin - Add corresponding color scheme in HTML dashboard CSS
- Add filter button in dashboard controls
- Update this README with new features
License
Part of the MCP Office Tools project. See main project LICENSE file.