自动化测试平台设计与实现(五、用例执行的统计与展示)
基本思路:
- 设计统计的数据内容:定义需要统计的数据内容,包括测试用例的执行结果。
- 使用 Pyecharts 生成统计图表:在后端使用 Pyecharts 根据统计数据生成图表。
- 将图表数据传输到前端:后端通过 API 将图表数据传输到前端。
- 在 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>