-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (94 loc) · 4.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
<title>UI Test Frame & Logger for Web Apps (or anything, really)</title>
<style>
* { box-sizing: border-box; }
body, p { margin: 0; padding: 0; }
iframe { width: 100%; height: 75vh; }
span { display: block; }
span.test { color: blue; }
span.error { color: red; }
#log { padding: 1em; width: 100%; height: 25vh; overflow: auto; font: 105%/140% monospace; }
button { font: 105%/140% monospace; }
</style>
</head>
<body>
<iframe id="app" name="app" src="example.html" width="100%"></iframe>
<div id="log">
<p id="pre"></p><!-- previous tests and log items -->
<p id="cur"><p><!-- current test -->
</div><!-- #log -->
<script>
// The list of tests to be performed
var tests = [
"Dashboard loaded",
"Main navigation links work",
"Form input shows appropriate error messaging when special characters are entered",
"Form shows appropriate confirmation text upon submission",
"Clearing form then refreshing page shows a cleared form"
];
// UI Stuff
var app = document.getElementById('app');
var log = document.getElementById('log');
var pre = document.getElementById('pre');
var cur = document.getElementById('cur');
// Special log items for first load
var firstLoad = true;
if ( firstLoad ){
// Print date
pre.innerHTML += '<span>Test started '+new Date()+'</span>';
// Print user agent
pre.innerHTML += '<span>Testing on '+window.navigator.userAgent+'</span>';
// Load first step
loadTest(0);
} // firstLoad
// Now that we've done the special first-load items, it's no longer first load
firstLoad = false;
// Log every page load
app.onload = function(){
var http = new XMLHttpRequest();
http.open('HEAD', app.contentWindow.location.href, false);
http.send();
if (http.status.toString().indexOf('4') === 0 ){
pre.innerHTML += '<span class="error">✗ '+app.contentWindow.location.href+' server error '+http.status+'</span>';
} else {
pre.innerHTML += '<span>¶ '+app.contentWindow.location.href+' successfully loaded</span>';
}
log.scrollTop = log.scrollHeight;
};
// Log every console error
app.contentWindow.onerror = function(error, url, line) {
pre.innerHTML += '<span class="error">✗ '+url+' '+line+': '+error+'</span>';
log.scrollTop = log.scrollHeight;
};
function loadTest(testIndex){
// If we're at the end of the list...
if ( !tests[testIndex] ){
pre.innerHTML += '<span>Test ended '+new Date()+'</span>';
cur.innerHTML += '<button onclick="window.getSelection().selectAllChildren(document.getElementById(\'pre\'));">Click to select log for copy/paste</button>';
}
// Otherwise, add the next test and scroll down to it
else {
cur.innerHTML += '<span id="test'+testIndex+'" class="test"><button onclick="testResult('+testIndex+',\'success\')">✓</button> <button onclick="testResult('+testIndex+',\'error\')">✗</button> '+tests[testIndex]+'</span>';
log.scrollTop = log.scrollHeight;
}
} // loadTest
function testResult(testIndex,result){
// Remove the exsisting test
var theTest = document.getElementById('test'+testIndex);
theTest.parentNode.removeChild(theTest);
// Log successful result
if ( result === 'success' ){
pre.innerHTML += '<span id="test'+testIndex+'" class="success">✓ '+tests[testIndex]+'</span>';
}
// Log unsuccesful result
else {
pre.innerHTML += '<span id="test'+testIndex+'" class="error">✗ '+tests[testIndex]+'</span>';
}
// On to the next test
loadTest(testIndex+1);
} // testResult
</script>
</body>
</html>