testophobia
Version:
Web application snapshot tester
68 lines (67 loc) • 3.23 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testophobia Viewer</title>
<meta name="description" content="HTML Viewer to resolve Testophobia failures">
<script src="/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="/lib/jquery-ui-1.12.1.custom/jquery-ui.min.js" type="text/javascript"></script>
<script src="/node_modules/zurb-twentytwenty/js/jquery.event.move.js" type="text/javascript"></script>
<script src="/node_modules/zurb-twentytwenty/js/jquery.twentytwenty.js" type="text/javascript"></script>
<script src="/node_modules/imagesloaded/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/lib/jquery-ui-1.12.1.custom/jquery-ui.min.css" type="text/css"/>
<link rel="stylesheet" href="/node_modules/zurb-twentytwenty/css/twentytwenty.css" type="text/css"/>
<link rel="stylesheet" href="/shared.css" type="text/css"/>
<link rel="stylesheet" href="/index.css" type="text/css"/>
</head>
<body>
<div class="main">
<div class="header">
<div class="header-title">😱 Testophobia Viewer</div>
<div class="header-ctls">
<label id="lbl-testname"></label>
<span class="spacer"> </span>
<label id="lbl-pager"></label>
<button id="btn-prev" class="blue button" title="View previous failure"><</button>
<button id="btn-next" class="blue button" title="View next failure">></button>
<button id="btn-info" class="blue button" title="Show info about this test failure">?</button>
</div>
</div>
<div class="viewer-body">
<div class="viewer-body-row">
<div class="viewer-diff">
<div class="lbl-img-caption">Image Diff</div>
<img id="img-diff"/>
</div>
<div>
<div class="lbl-img-caption">Image Comparison</div>
<div class="viewer-comp" style="height:100%;">
<img id="img-comp1"/>
<img id="img-comp2"/>
</div>
</div>
</div>
<div class="viewer-body-row">
<div class="viewer-sbs">
<div class="lbl-img-caption">Side-By-Side</div>
<img id="img-sbs1"/>
<img id="img-sbs2"/>
</div>
</div>
</div>
<div class="new-image-body">
<div id="lbl-new-image">No golden image available (new test action?)</div>
<img id="img-new-image"/>
</div>
<div class="footer-ctls">
<label id="lbl-browser">Browser: <span></span></label>
<span class="spacer"> </span>
<div class="btn-w-key"><button id="btn-skip" class="red button" title="Do not apply as the golden image and remove from the failure list">Skip Failure</button><span>cmd/win + →</span></div>
<div class="btn-w-key"><button id="btn-apply" class="green button" title="Apply the After image as the new golden image">Apply Golden</button><span>opt/alt + →</span></div>
<div class="btn-w-key"><button id="btn-apply-all" class="green button" title="Apply all After images as the new golden images">Apply All</button><span> </span></div>
</div>
</div>
<div id="dlg-info" title="Test Run Info"></div>
<script src="/index.js"></script>
</body>
</html>