-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathempty-test.html
166 lines (141 loc) · 6.03 KB
/
empty-test.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Empty Test Page</title>
<style>
body {
font-family: sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
button {
padding: 8px 15px;
margin: 5px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
pre {
background-color: #f5f5f5;
padding: 10px;
border: 1px solid #ddd;
max-height: 300px;
overflow: auto;
}
#testStatus {
margin: 10px 0;
padding: 10px;
border-radius: 4px;
}
.success { background-color: #d4edda; color: #155724; }
.error { background-color: #f8d7da; color: #721c24; }
.info { background-color: #d1ecf1; color: #0c5460; }
</style>
</head>
<body>
<h1>Basic HTML Test Page</h1>
<p>This page tests if basic HTML and JavaScript are working correctly.</p>
<div>
<button id="testBtn">Test JavaScript</button>
<button id="testFetch">Test Fetch API</button>
<button id="testCors">Test CORS Request</button>
<button id="checkElements">Check DOM Elements</button>
</div>
<div id="testStatus" class="info">Click a button to run a test</div>
<h3>Test Results:</h3>
<pre id="testResults"></pre>
<script>
// DOM elements
const testBtn = document.getElementById('testBtn');
const testFetch = document.getElementById('testFetch');
const testCors = document.getElementById('testCors');
const checkElements = document.getElementById('checkElements');
const testStatus = document.getElementById('testStatus');
const testResults = document.getElementById('testResults');
// Function to update status
function updateStatus(message, type) {
testStatus.textContent = message;
testStatus.className = type;
}
// Function to log results
function logResult(message) {
const timestamp = new Date().toISOString().substr(11, 8);
testResults.textContent += `[${timestamp}] ${message}\n`;
testResults.scrollTop = testResults.scrollHeight;
}
// Test JavaScript
testBtn.addEventListener('click', () => {
try {
updateStatus('Testing JavaScript...', 'info');
// Test basic operations
const a = 5;
const b = 10;
const c = a + b;
logResult(`JavaScript test: 5 + 10 = ${c}`);
updateStatus('JavaScript is working correctly!', 'success');
} catch (error) {
updateStatus(`JavaScript error: ${error.message}`, 'error');
logResult(`Error: ${error.message}`);
}
});
// Test Fetch API
testFetch.addEventListener('click', async () => {
try {
updateStatus('Testing Fetch API...', 'info');
// Try to fetch a local file
const response = await fetch('empty-test.html');
const text = await response.text();
logResult(`Fetch API test: Successfully fetched ${text.length} characters`);
updateStatus('Fetch API is working correctly!', 'success');
} catch (error) {
updateStatus(`Fetch API error: ${error.message}`, 'error');
logResult(`Error: ${error.message}`);
}
});
// Test CORS
testCors.addEventListener('click', async () => {
try {
updateStatus('Testing CORS with ChimeraX server...', 'info');
// Try to fetch from ChimeraX server
const response = await fetch('http://localhost:9876/api/health');
const data = await response.json();
logResult(`CORS test: Response from server: ${JSON.stringify(data)}`);
updateStatus('CORS request completed successfully!', 'success');
} catch (error) {
updateStatus(`CORS error: ${error.message}`, 'error');
logResult(`Error: ${error.message}`);
}
});
// Check DOM Elements
checkElements.addEventListener('click', () => {
try {
updateStatus('Checking DOM elements...', 'info');
// Get all page elements
const allElements = document.querySelectorAll('*');
logResult(`DOM test: Found ${allElements.length} elements on the page`);
logResult(`Body child elements: ${document.body.children.length}`);
// Log specific elements
for (let i = 0; i < document.body.children.length; i++) {
const element = document.body.children[i];
logResult(`- Element ${i}: <${element.tagName.toLowerCase()}> ${element.className || '(no class)'}`);
}
updateStatus('DOM check completed successfully!', 'success');
} catch (error) {
updateStatus(`DOM check error: ${error.message}`, 'error');
logResult(`Error: ${error.message}`);
}
});
// Run a basic test on load
window.addEventListener('DOMContentLoaded', () => {
logResult('Page loaded successfully');
logResult(`User Agent: ${navigator.userAgent}`);
logResult(`Window size: ${window.innerWidth}x${window.innerHeight}`);
});
</script>
</body>
</html>