Transform Dull Allure Test Reports into Stunning, Data‑Rich Dashboards with Python

Why Allure reports often feel bland

Typical Allure reports suffer from a gray, uninspired UI, repetitive layout, missing key metrics such as pass rate trends, and require front‑end coding to add charts.

Ultimate solution: Allure + custom plugin + Python

We combine three techniques to give Allure reports a fresh look, automatic charts, and richer information.

Step 1: Install and configure Allure

# Install Python allure-pytest
pip install allure-pytest
# Install Allure command‑line tool (download from https://github.com/allure-framework/allure2)
# Run tests and generate raw report
pytest tests/ --alluredir=reports/allure_raw
# Preview locally
allure serve reports/allure_raw  # local preview

Step 2: Beautify the UI (custom logo and CSS)

Create a custom resources directory:

reports/
├── allure_raw/          # raw data
├── custom/
│   ├── app.js          # optional custom JS
│   ├── styles.css      # custom stylesheet
│   └── logo.png        # team logo

Sample styles.css to give the report a gradient header, modern fonts and styled status pie chart:

/* reports/custom/styles.css */
#navigation {
    background: linear-gradient(90deg, #4A00E0, #8E2DE2) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.page-header__title {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 600 !important;
    color: #333 !important;
}
.status_pie-chart {
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    padding: 10px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

Inject the custom resources when generating the report:

allure generate reports/allure_raw \
        --clean \
        -o reports/html \
        --config ./allure.yml

Content of allure.yml:

# allure.yml
web:
  headers:
    Content-Security-Policy: "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';"
  resourceDirectories:
    - name: custom
      path: ./reports/custom

Step 3: Insert custom charts (Python script)

Use allure.dynamic to attach environment info and test metrics, then embed a pie chart with Chart.js:

# conftest.py or test file
import allure, json
from datetime import datetime

def attach_environment_info():
    """Attach environment information"""
    env_info = {
        "测试环境": "https://api.test.example.com",
        "部署版本": "v2.3.1-rc.2",
        "测试负责人": "张三",
        "执行时间": datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    }
    allure.dynamic.environment(**env_info)

def attach_test_metrics():
    """Attach test metric chart"""
    metrics = {"测试总数": 120, "通过": 112, "失败": 5, "跳过": 3}
    pie_chart = {
        "labels": ["通过", "失败", "跳过"],
        "datasets": [{
            "data": [metrics["通过"], metrics["失败"], metrics["跳过"]],
            "backgroundColor": ["#4CAF50", "#F44336", "#FF9800"]
        }]
    }
    allure.dynamic.description(f"""
## 📊 Test Overview
<div style=\"text-align:center; margin:20px 0;\">
<canvas id=\"pieChart\" width=\"400\" height=\"300\"></canvas>
</div>
<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {{
    var ctx = document.getElementById('pieChart').getContext('2d');
    new Chart(ctx, {{
        type: 'pie',
        data: {json.dumps(pie_chart)},
        options: {{
            responsive: true,
            plugins: {{ legend: {{ position: 'bottom' }} }}
        }}
    }});
}});
</script>
""")

Call these helpers in your test class:

# test_sample.py
import pytest, allure

@allure.epic("用户管理")
@allure.feature("登录模块")
class TestLogin:
    def setup_class(self):
        attach_environment_info()
        attach_test_metrics()

    @allure.story("正常登录")
    def test_login_success(self):
        with allure.step("1. 发送登录请求"):
            pass
        assert True

    @allure.story("密码错误")
    def test_login_wrong_password(self):
        assert False

Step 4: Add trend chart (historical pass‑rate)

def attach_trend_chart():
    """Insert historical pass‑rate line chart"""
    dates = ["10-01","10-02","10-03","10-04","10-05","10-06","10-07"]
    pass_rates = [85,88,82,90,92,89,94]
    trend_data = {
        "labels": dates,
        "datasets": [{
            "label": "通过率 (%)",
            "data": pass_rates,
            "borderColor": "#4A00E0",
            "backgroundColor": "rgba(74, 0, 224, 0.1)",
            "fill": True,
            "tension": 0.4
        }]
    }
    allure.dynamic.description(f"""
## 📈 Quality Trend
<div style=\"text-align:center; margin:20px 0;\">
<canvas id=\"trendChart\" width=\"600\" height=\"300\"></canvas>
</div>
<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {{
    var ctx = document.getElementById('trendChart').getContext('2d');
    new Chart(ctx, {{
        type: 'line',
        data: {json.dumps(trend_data)},
        options: {{
            responsive: true,
            plugins: {{ legend: {{ position: 'top' }} }},
            scales: {{ y: {{ min: 0, max: 100, title: {{ display: true, text: '通过率 (%)' }} }} }}
        }}
    }});
}});
</script>
""")

Final preview

The customized Allure report will feature a gradient top navigation bar, team logo, pass‑rate pie chart, historical trend line chart, clear environment information card, and modern fonts with shadows.

Advanced tips

Conclusion

Test reports are the face of test engineers; a polished, data‑rich report showcases testing value and earns recognition. Use the steps above to turn a default Allure report into a professional, high‑impact dashboard.