主动化测试平台设计与实现（五、用例实行的统计与展示）
基本思绪：[*]设计统计的数据内容：界说必要统计的数据内容，包括测试用例的实行结果。
[*]利用 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}"<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 模型中
# 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()
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>
</template>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]