@puppedo/core
Version:
PuppeDo is a runner for tests E2E in YAML style. With power of Playwright or Puppeteer.
102 lines (99 loc) • 3.06 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Output test</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-json-tree-view@2.1.4/dist/vue-json-tree-view.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-yaml@3.13.1/dist/js-yaml.min.js"></script>
<script type="text/javascript" src="./output.json"></script>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table td,
table th {
border: 1px solid #000000;
}
.error {
background-color: #f97575;
}
img {
max-width: 300px;
}
</style>
</head>
<body>
<div id="app">
<p v-if="!json.length">
Something wrong happened. Can`t load data from log.
</p>
<table>
<tr v-for="(data, index) in json" :key="index" :class="{ error: data.level == 'error' }">
<td>{{ index }}</td>
<td width='50px'>
<pre>{{ data.time.split('_')[0] }}</pre>
<pre>{{ data.time.split('_')[1] }}</pre>
</td>
<td>
<p>{{ data.level }} {{data.levelIndent}}</p>
</td>
<td>
<p v-if="data.text">
<pre>{{ data.text }}</pre>
</p>
<img v-if="data.screenshots.length" v-for="img in data.screenshots" :src="img" />
</td>
<td width='50%'>
<tree-view
v-if="data.type === 'env' && data.dataEnvsGlobal"
:data="data.dataEnvsGlobal"
:options="{ maxDepth: 0, rootObjectKey: 'Global settings' }"
>
</tree-view>
<tree-view
v-if="data.type === 'env' && data.dataEnvs"
:data="data.dataEnvs"
:options="{ maxDepth: 0, rootObjectKey: 'Envs settings' }"
>
</tree-view>
<tree-view
v-if="data.testStruct && Object.keys(data.testStruct).length !== 0"
:data="data.testStruct"
:options="{ maxDepth: 0, rootObjectKey: 'Test sctructure' }"
>
</tree-view>
<tree-view
v-if="data.testArgs && Object.keys(data.testArgs).length !== 0"
:data="data.testArgs"
:options="{ maxDepth: 0, rootObjectKey: 'Binded data' }"
>
</tree-view>
</td>
</tr>
</table>
</div>
</body>
<script>
Vue.use(TreeView);
var app = new Vue({
el: '#app',
data: function() {
return {
json: [],
};
},
mounted() {
let self = this;
fetch('output.yaml')
.then(response => response.text())
.then(res => {
self.json = jsyaml.load(res)
});
},
});
</script>
</html>