ai-debug-local-mcp
Version:
🎯 ENHANCED AI GUIDANCE v4.1.2: Dramatically improved tool descriptions help AI users choose the right tools instead of 'close enough' options. Ultra-fast keyboard automation (10x speed), universal recording, multi-ecosystem debugging support, and compreh
70 lines (62 loc) • 3.12 kB
HTML
<html>
<head>
<title>Form Submission Test</title>
<script>
async function testFormSubmission() {
const results = document.getElementById('results');
results.innerHTML = '<h2>Testing form submission at http://localhost:4001/validate...</h2>';
try {
// First, let's check if the page loads
const response = await fetch('http://localhost:4001/validate');
if (!response.ok) {
results.innerHTML += '<p style="color: red;">❌ Failed to load page: ' + response.status + '</p>';
return;
}
results.innerHTML += '<p style="color: green;">✅ Page loaded successfully</p>';
// Check if WebSocket connection can be established
const ws = new WebSocket('ws://localhost:4001/live/websocket');
ws.onopen = () => {
results.innerHTML += '<p style="color: green;">✅ WebSocket connection established</p>';
results.innerHTML += '<h3>Form should work without page refresh!</h3>';
results.innerHTML += '<p>The form uses Phoenix LiveView which handles submissions via WebSocket.</p>';
ws.close();
};
ws.onerror = (error) => {
results.innerHTML += '<p style="color: red;">❌ WebSocket connection failed</p>';
results.innerHTML += '<p>This might cause form submissions to refresh the page.</p>';
};
setTimeout(() => {
if (ws.readyState !== WebSocket.OPEN && ws.readyState !== WebSocket.CLOSED) {
results.innerHTML += '<p style="color: orange;">⚠️ WebSocket connection timeout</p>';
ws.close();
}
}, 5000);
} catch (error) {
results.innerHTML += '<p style="color: red;">❌ Error: ' + error.message + '</p>';
}
}
</script>
</head>
<body>
<h1>Form Submission Test for AI Debug</h1>
<button onclick="testFormSubmission()">Test Form Submission</button>
<div id="results"></div>
<hr>
<h2>Manual Test Instructions:</h2>
<ol>
<li>Open http://localhost:4001/validate in your browser</li>
<li>Open the browser's Developer Console (F12)</li>
<li>Enter URL: https://example.com</li>
<li>Enter acceptance criteria: The page should have a navigation menu. There should be a contact form with name and email fields.</li>
<li>Click "Start Validation"</li>
<li>Check if:
<ul>
<li>The page refreshes (BAD - indicates LiveView not working)</li>
<li>The page stays the same and validation starts (GOOD - LiveView working)</li>
<li>Any errors appear in the console</li>
</ul>
</li>
</ol>
</body>
</html>