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

茶水牛

基本思路：

• 设计统计的数据内容：定义需要统计的数据内容，包括测试用例的执行结果。
  
• 使用 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>

复制代码

 

来源:https://www.cnblogs.com/xiaojp65536/p/18342502
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！