|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<head> |
| 4 | + <link href="./static/antd.min.css" rel="stylesheet" type="text/css"> |
| 5 | + <link href="./static/style.css" rel="stylesheet" type="text/css"> |
| 6 | +</head> |
| 7 | +<body> |
| 8 | +<div id="app"> |
| 9 | + <a-layout> |
| 10 | + <a-layout-header class="header"> |
| 11 | + <div style="color: #fff;">测试案例执行时间：{{time}}</div> |
| 12 | + </a-layout-header> |
| 13 | + <a-layout-content style="padding: 20px 0 50px"> |
| 14 | + <a-layout style="padding: 24px 0; background: #fff"> |
| 15 | + <a-layout-sider width="200" style="background: #fff"> |
| 16 | + <a-menu |
| 17 | + mode="inline" |
| 18 | + style="height: 100%" |
| 19 | + @click="clickMenu" |
| 20 | + > |
| 21 | + <a-menu-item :key="index" v-for="(item,index) in testCase"> |
| 22 | + <div v-if="item.diffIndex.length !== 0" class="font-red">执行失败：{{item.name}}</div> |
| 23 | + <div v-else style="color: rgb(120,199,86)">执行成功：{{item.name}}</div> |
| 24 | + </a-menu-item> |
| 25 | + </a-menu> |
| 26 | + </a-layout-sider> |
| 27 | + <a-layout-content :style="{ margin: '24px 24px 24px', overflow: 'initial', background: '#fff' }"> |
| 28 | + <a-collapse |
| 29 | + :default-active-key="['1','2']"> |
| 30 | + <a-collapse-panel key="1" header="执行失败的步骤截屏" v-if="currentTestCase.diffImgSrc.length > 0"> |
| 31 | + <template v-for="item in currentTestCase.diffImgSrc"> |
| 32 | + <a-space> |
| 33 | + <a-card title="diff高亮图" style="width: 300px"> |
| 34 | + |
| 35 | + <a-image :width="250" :src="item.diff" /> |
| 36 | + </a-card> |
| 37 | + <a-card title="本次截屏" style="width: 300px"> |
| 38 | + <a-image :width="250":src="item.current" /> |
| 39 | + </a-card> |
| 40 | + <a-card title="比较基准截屏" style="width: 300px"> |
| 41 | + <a-image :width="250" :src="item.base" /> |
| 42 | + </a-card> |
| 43 | + </a-space> |
| 44 | + </template> |
| 45 | + </a-collapse-panel> |
| 46 | + <a-collapse-panel key="2" header="本次案例全步骤截屏" :disabled="false"> |
| 47 | + <a-card v-for="(item,index) in currentTestCase.imgSrc" :title="`步骤${index+1}截屏`" style="width: 300px;display: inline-block;margin-bottom: 10px;margin-right: 10px"> |
| 48 | + <a-image :width="250" :src="item" /> |
| 49 | + </a-card> |
| 50 | + |
| 51 | + </a-collapse-panel> |
| 52 | + </a-layout-content> |
| 53 | + </a-layout> |
| 54 | + </a-layout-content> |
| 55 | + <a-layout-footer style="text-align: center"> |
| 56 | + wxa e2e ©2021 Created by mumbleFe |
| 57 | + </a-layout-footer> |
| 58 | + </a-layout> |
| 59 | +</div> |
| 60 | +< script src= "./static/[email protected]"></ script> |
| 61 | +<script src="./static/moment.js"></script> |
| 62 | +<script src="./static/antd.min.js"></script> |
| 63 | +<script src="../.replay_result/<%- time%>/py_diff_result.js"></script> |
| 64 | +<script> |
| 65 | +
|
| 66 | + let time = '<%- time%>'; |
| 67 | + let diffFailValue = 1000; |
| 68 | + let testCase = JSON.parse('<%- testCase %>'); |
| 69 | + var app = Vue.createApp({ |
| 70 | + data(){ |
| 71 | + if (typeof py_diff_result !== 'undefined' && py_diff_result[time]) { |
| 72 | + py_diff_result[time].forEach(pyDiffItem => { |
| 73 | + var cur_case = testCase.find((testCaseItem) => { |
| 74 | + return testCaseItem.name === pyDiffItem.case_name |
| 75 | + }) |
| 76 | + if (!cur_case) return; |
| 77 | + var diffIndex = []; |
| 78 | + for (let i = 0; i < cur_case.totalScreenCount; i++) { |
| 79 | + let cur_diffItem = pyDiffItem[`${i}.png`]; |
| 80 | + if (!cur_diffItem) { |
| 81 | + return diffIndex.push(i); |
| 82 | + } |
| 83 | + if (cur_diffItem.diff_result > diffFailValue) { |
| 84 | + return diffIndex.push(i); |
| 85 | + } |
| 86 | + } |
| 87 | + cur_case.diffIndex = diffIndex; |
| 88 | + }) |
| 89 | + } |
| 90 | + return { |
| 91 | + time, |
| 92 | + testCase, |
| 93 | + selectedKeys: '' |
| 94 | + } |
| 95 | + }, |
| 96 | + created() { |
| 97 | + this.testCase.forEach(item => { |
| 98 | + item.diffImgSrc = []; |
| 99 | + if (item.diffIndex && item.diffIndex.length !== 0) { |
| 100 | + item.diffIndex.forEach(diffIndexItem => { |
| 101 | + item.diffImgSrc.push({ |
| 102 | + diff: `../.replay_result/${this.time}/${item.name}/screenshot/diff/${diffIndexItem}.png`, |
| 103 | + base: `../${item.name}/base_screenshot/${diffIndexItem}.png`, |
| 104 | + current: `../.replay_result/${this.time}/${item.name}/screenshot/${diffIndexItem}.png`, |
| 105 | + }) |
| 106 | + }) |
| 107 | + } |
| 108 | + item.imgSrc = []; |
| 109 | + for (let i = 0; i < item.totalScreenCount; i++) { |
| 110 | + if (this.time === 'base_screenshot') { |
| 111 | + item.imgSrc.push(`../${item.name}/${this.time}/${i}.png`) |
| 112 | + } else { |
| 113 | + item.imgSrc.push(`../.replay_result/${this.time}/${item.name}/screenshot/${i}.png`) |
| 114 | + } |
| 115 | +
|
| 116 | + } |
| 117 | + }) |
| 118 | + }, |
| 119 | + computed: { |
| 120 | + currentTestCase() { |
| 121 | + return this.testCase[this.selectedKeys] || this.testCase[0] |
| 122 | + } |
| 123 | + }, |
| 124 | + methods: { |
| 125 | + clickMenu(e) { |
| 126 | + this.selectedKeys = e.key |
| 127 | + } |
| 128 | + } |
| 129 | + }) |
| 130 | + app.use(antd.Layout) |
| 131 | + app.use(antd.Card) |
| 132 | + app.use(antd.Row) |
| 133 | + app.use(antd.Col) |
| 134 | + app.use(antd.Image) |
| 135 | + app.use(antd.Menu) |
| 136 | + app.use(antd.PageHeader) |
| 137 | + app.use(antd.Collapse) |
| 138 | + app.use(antd.Space) |
| 139 | +
|
| 140 | + app.mount('#app') |
| 141 | +</script> |
| 142 | +</body> |
| 143 | +</html> |
0 commit comments