自動化測試平臺設計與實現（五、用例執行的統計與展示）

jpx發表於2024-08-05

基本思路：

  1. 設計統計的資料內容：定義需要統計的資料內容，包括測試用例的執行結果。
  2. 使用 Pyecharts 生成統計圖表：在後端使用 Pyecharts 根據統計資料生成圖表。
  3. 將圖表資料傳輸到前端：後端透過 API 將圖表資料傳輸到前端。
  4. 在 Vue.js 前端展示圖表：在 Vue.js 前端專案中使用 Echarts 渲染圖表。

1. 設計統計的資料內容

假設我們統計的資料內容包括：

  • 總用例數
  • 成功用例數
  • 失敗用例數
  • 執行時間
  • 各用例的執行狀態（成功、失敗）

設計一個模型來儲存測試用例執行結果，TestCaseResult 用於儲存測試用例執行結果，ChartData 用於儲存統計圖表資料。

# models.py
from django.db import models

class TestCaseResult(models.Model):
    STATUS_CHOICES = (
        ('success', 'Success'),
        ('failure', 'Failure'),
    )

    case_id = models.CharField(max_length=100)
    status = models.CharField(max_length=10, choices=STATUS_CHOICES)
    execution_time = models.FloatField()
    executed_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return f"TestCase {self.case_id} - {self.status}"

class ChartData(models.Model): 
　　created_at = models.DateTimeField(auto_now_add=True) 
　　pie_chart = models.TextField() 
　　bar_chart = models.TextField() 
　　def __str__(self): 
　　　　return f"ChartData created at {self.created_at}"

2. 使用 Pyecharts 生成統計圖表

透過檢視中統計這些資料，在後端使用 Pyecharts 生成圖表，將其儲存到 ChartData 模型中

# views.py
from django.shortcuts import render
from django.http import JsonResponse
from .models import TestCaseResult, ChartData
from pyecharts.charts import Pie, Bar
from pyecharts import options as opts

def generate_charts():
    total_cases = TestCaseResult.objects.count()
    success_cases = TestCaseResult.objects.filter(status='success').count()
    failure_cases = TestCaseResult.objects.filter(status='failure').count()
    execution_times = list(TestCaseResult.objects.values_list('execution_time', flat=True))

    # 餅圖
    pie = Pie()
    pie.add("", [("Success", success_cases), ("Failure", failure_cases)])
    pie.set_global_opts(title_opts=opts.TitleOpts(title="Test Case Results"))
    pie_html = pie.render_embed()

    # 柱狀圖
    bar = Bar()
    bar.add_xaxis([f"TestCase {i+1}" for i in range(total_cases)])
    bar.add_yaxis("Execution Time (s)", execution_times)
    bar.set_global_opts(title_opts=opts.TitleOpts(title="Test Case Execution Times"))
    bar_html = bar.render_embed()

    return pie_html, bar_html

def save_chart_data():
    pie_html, bar_html = generate_charts()
    chart_data = ChartData(pie_chart=pie_html, bar_chart=bar_html)
    chart_data.save()
    return chart_data

def test_case_statistics(request):
    # 生成並儲存圖表資料
    chart_data = save_chart_data()
    return JsonResponse({
        "pie_chart": chart_data.pie_chart,
        "bar_chart": chart_data.bar_chart,
    })

3. 前端展示圖表

在 Vue.js 前端透過 API 獲取圖表資料並展示

<template>
  <div>
    <div v-html="pieChart"></div>
    <div v-html="barChart"></div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      pieChart: '',
      barChart: '',
    };
  },
  mounted() {
    this.fetchChartData();
  },
  methods: {
    async fetchChartData() {
      try {
        const response = await axios.get('http://localhost:8000/test_case_statistics/');
        this.pieChart = response.data.pie_chart;
        this.barChart = response.data.bar_chart;
      } catch (error) {
        console.error('Error fetching chart data:', error);
      }
    },
  },
};
</script>

<style>
/* Add necessary styles here */
</style>

相關文章