1、模板文件内容:位于templates文件夹下;
渲染效果:将失败用例的名称,以及正确结果、错误结果以及对比结果的图片展示出来,并可以勾选下载:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UI自动化回放工具运行结果对比</title>
<style>
html {
height: 100vh;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.result-list {
overflow-y: auto;
}
.result-name {
font-size: 16px;
}
.result-image-box {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-right: 32px;
}
.result-image-box img {
width: 100%;
}
</style>
</head>
<body>
<div class="result-action-box">
<button id="result-export-copy">复制选中</button>
<button id="result-export-download">下载选中</button>
<button id="result-export-select-all">全选</button>
<button id="result-export-select-none">全不选</button>
</div>
<ul class="result-list">
{% for result in data %}
<li>
<div class="result-name">