主动化测试平台设计与实现（五、用例实行的统计与展示） ...

基本思绪：

• 设计统计的数据内容：界说必要统计的数据内容，包括测试用例的实行结果。
  
• 利用 Pyecharts 天生统计图表：在后端利用 Pyecharts 根据统计数据天生图表。
  
• 将图表数据传输到前端：后端通过 API 将图表数据传输到前端。
  
• 在 Vue.js 前端展示图表：在 Vue.js 前端项目中利用 Echarts 渲染图表。
  

1. 设计统计的数据内容

假设我们统计的数据内容包括：

• 总用例数
  
• 乐成用例数
  
• 失败用例数
  
• 实行时间
  
• 各用例的实行状态（乐成、失败）
  

设计一个模型来存储测试用例实行结果，TestCaseResult 用于存储测试用例实行结果，ChartData 用于存储统计图表数据。

1. # models.py
2. from django.db import models
4. class TestCaseResult(models.Model):
5.     STATUS_CHOICES = (
6.         ('success', 'Success'),
7.         ('failure', 'Failure'),
8.     )
10.     case_id = models.CharField(max_length=100)
11.     status = models.CharField(max_length=10, choices=STATUS_CHOICES)
12.     execution_time = models.FloatField()
13.     executed_at = models.DateTimeField(auto_now_add=True)
15.     def __str__(self):
16.         return f"TestCase {self.case_id} - {self.status}"<br><br>class ChartData(models.Model): <br>　　created_at = models.DateTimeField(auto_now_add=True) <br>　　pie_chart = models.TextField() <br>　　bar_chart = models.TextField() <br>　　def __str__(self): <br>　　　　return f"ChartData created at {self.created_at}"<br>

复制代码

 
2. 利用 Pyecharts 天生统计图表

通过视图中统计这些数据，在后端利用 Pyecharts 天生图表，将其保存到 ChartData 模型中

1. # views.py
2. from django.shortcuts import render
3. from django.http import JsonResponse
4. from .models import TestCaseResult, ChartData
5. from pyecharts.charts import Pie, Bar
6. from pyecharts import options as opts
8. def generate_charts():
9.     total_cases = TestCaseResult.objects.count()
10.     success_cases = TestCaseResult.objects.filter(status='success').count()
11.     failure_cases = TestCaseResult.objects.filter(status='failure').count()
12.     execution_times = list(TestCaseResult.objects.values_list('execution_time', flat=True))
14.     # 饼图
15.     pie = Pie()
16.     pie.add("", [("Success", success_cases), ("Failure", failure_cases)])
17.     pie.set_global_opts(title_opts=opts.TitleOpts(title="Test Case Results"))
18.     pie_html = pie.render_embed()
20.     # 柱状图
21.     bar = Bar()
22.     bar.add_xaxis([f"TestCase {i+1}" for i in range(total_cases)])
23.     bar.add_yaxis("Execution Time (s)", execution_times)
24.     bar.set_global_opts(title_opts=opts.TitleOpts(title="Test Case Execution Times"))
25.     bar_html = bar.render_embed()
27.     return pie_html, bar_html
29. def save_chart_data():
30.     pie_html, bar_html = generate_charts()
31.     chart_data = ChartData(pie_chart=pie_html, bar_chart=bar_html)
32.     chart_data.save()
33.     return chart_data
35. def test_case_statistics(request):
36.     # 生成并保存图表数据
37.     chart_data = save_chart_data()
38.     return JsonResponse({
39.         "pie_chart": chart_data.pie_chart,
40.         "bar_chart": chart_data.bar_chart,
41.     })

复制代码

 
3. 前端展示图表

在 Vue.js 前端通过 API 获取图表数据并展示

1. <template>
2.   
3.    
4.    
5.   
6. </template>

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。