Artur Mukhamadiev
77768ba3ca
The origin check is an exact match including the context path, so users had to type "https://collab.lge.com/main" precisely. GET /api/v1/config now returns the approved origins in canonical form (non-secret: they are the only destinations the backend will talk to), and the UI swaps the URL text field for a select listing them, keeping the element id, focus handling and the Test connection flow unchanged. The text field remains the fallback when the fetch fails. Backend validation of the submitted URL is untouched. Mock server serves the endpoint; contract, API and e2e tests cover it.
751 lines
34 KiB
JavaScript
751 lines
34 KiB
JavaScript
/**
|
|
* Comprehensive End-to-End Browser Test Runner.
|
|
* Connects directly to Chrome running on port 9444 via CDP,
|
|
* tests the Web UI against all requirements in docs/implementation/WEBUI.md and CONTRACTS.md.
|
|
*/
|
|
|
|
import http from 'node:http';
|
|
import assert from 'node:assert/strict';
|
|
import { createMockServer } from '../dev/mock-server.js';
|
|
|
|
const MOCK_PORT = 5173;
|
|
const CHROME_PORT = 9444;
|
|
const APP_URL = `http://127.0.0.1:${MOCK_PORT}/`;
|
|
|
|
class CDPClient {
|
|
constructor(wsUrl) {
|
|
this.wsUrl = wsUrl;
|
|
this.ws = null;
|
|
this.msgId = 1;
|
|
this.pending = new Map();
|
|
this.consoleLogs = [];
|
|
this.networkRequests = [];
|
|
}
|
|
|
|
async connect() {
|
|
this.ws = new WebSocket(this.wsUrl);
|
|
await new Promise((resolve, reject) => {
|
|
this.ws.onopen = resolve;
|
|
this.ws.onerror = reject;
|
|
});
|
|
|
|
this.ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
if (data.id && this.pending.has(data.id)) {
|
|
const { resolve, reject } = this.pending.get(data.id);
|
|
this.pending.delete(data.id);
|
|
if (data.error) reject(new Error(data.error.message || JSON.stringify(data.error)));
|
|
else resolve(data.result);
|
|
} else if (data.method === 'Runtime.consoleAPICalled') {
|
|
this.consoleLogs.push(data.params);
|
|
} else if (data.method === 'Network.requestWillBeSent') {
|
|
this.networkRequests.push(data.params);
|
|
}
|
|
};
|
|
|
|
// Enable Runtime and Network domains
|
|
await this.send('Runtime.enable');
|
|
await this.send('Network.enable');
|
|
}
|
|
|
|
send(method, params = {}) {
|
|
return new Promise((resolve, reject) => {
|
|
const id = this.msgId++;
|
|
this.pending.set(id, { resolve, reject });
|
|
this.ws.send(JSON.stringify({ id, method, params }));
|
|
});
|
|
}
|
|
|
|
async eval(expression) {
|
|
const res = await this.send('Runtime.evaluate', {
|
|
expression,
|
|
returnByValue: true,
|
|
awaitPromise: true
|
|
});
|
|
if (res.exceptionDetails) {
|
|
throw new Error(`Eval error: ${res.exceptionDetails.text || ''} ${res.exceptionDetails.exception?.description || ''}`);
|
|
}
|
|
return res.result ? res.result.value : undefined;
|
|
}
|
|
|
|
async navigate(url) {
|
|
await this.send('Page.navigate', { url });
|
|
// Wait for load event
|
|
await new Promise((resolve) => setTimeout(resolve, 800));
|
|
}
|
|
|
|
close() {
|
|
if (this.ws) {
|
|
this.ws.close();
|
|
}
|
|
}
|
|
}
|
|
|
|
async function runTests() {
|
|
console.log('=== Starting Web UI End-to-End Tests with Chrome (port 9444) ===\n');
|
|
|
|
// 1. Start mock server
|
|
const server = createMockServer();
|
|
await new Promise((resolve) => server.listen(MOCK_PORT, '127.0.0.1', resolve));
|
|
console.log(`✓ Mock server started at http://127.0.0.1:${MOCK_PORT}/`);
|
|
|
|
// 2. Discover Chrome tab on port 9444
|
|
const tabsRes = await fetch(`http://127.0.0.1:${CHROME_PORT}/json`);
|
|
const tabs = await tabsRes.json();
|
|
const pageTab = tabs.find((t) => t.type === 'page') || tabs[0];
|
|
if (!pageTab || !pageTab.webSocketDebuggerUrl) {
|
|
throw new Error('No active Chrome page tab found on port 9444');
|
|
}
|
|
|
|
const cdp = new CDPClient(pageTab.webSocketDebuggerUrl);
|
|
await cdp.connect();
|
|
console.log(`✓ Connected to Chrome tab: "${pageTab.title}" via CDP\n`);
|
|
|
|
let passed = 0;
|
|
let failed = 0;
|
|
|
|
async function step(name, fn) {
|
|
process.stdout.write(`• Test: ${name}... `);
|
|
try {
|
|
await fn();
|
|
console.log('PASS');
|
|
passed++;
|
|
} catch (err) {
|
|
console.log(`FAIL: ${err.message}`);
|
|
failed++;
|
|
}
|
|
}
|
|
|
|
try {
|
|
// Reset scenario on mock server
|
|
await fetch(`http://127.0.0.1:${MOCK_PORT}/dev/scenario`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ scenario: 'normal' })
|
|
});
|
|
|
|
// Navigate to Web UI
|
|
await cdp.navigate(APP_URL);
|
|
await cdp.eval('document.cookie = "mock_scenario=normal; path=/";');
|
|
await cdp.navigate(APP_URL);
|
|
|
|
// Test 1: Page Load & Initial View
|
|
await step('Page Load & Initial View', async () => {
|
|
const title = await cdp.eval('document.title');
|
|
assert.equal(title, 'Confluence Research');
|
|
|
|
const isPromptVisible = await cdp.eval('!document.getElementById("view-prompt").classList.contains("hidden")');
|
|
assert.equal(isPromptVisible, true, 'Prompt view must be visible initially');
|
|
|
|
const hasIndicator = await cdp.eval('document.getElementById("cred-indicator").classList.contains("active")');
|
|
assert.equal(hasIndicator, false, 'Credentials indicator must be unset (gray)');
|
|
|
|
const helperText = await cdp.eval('document.querySelector(".prompt-helper").textContent');
|
|
assert.ok(helperText.includes('Press Enter ↵ to send'));
|
|
});
|
|
|
|
// Test 2: Credentials Modal Opening and Focus Trapping
|
|
await step('Credentials Modal & Focus Trapping', async () => {
|
|
// Click key button
|
|
await cdp.eval('document.getElementById("key-btn").click()');
|
|
|
|
const isModalOpen = await cdp.eval('!document.getElementById("modal-backdrop").classList.contains("hidden")');
|
|
assert.equal(isModalOpen, true, 'Modal should be open');
|
|
|
|
const focusedId = await cdp.eval('document.activeElement.id');
|
|
assert.equal(focusedId, 'cred-url', 'URL input should be focused on open');
|
|
|
|
// The URL field is a fixed choice among the server's approved origins (GET /api/v1/config).
|
|
const urlField = await cdp.eval(`({
|
|
tag: document.getElementById("cred-url").tagName,
|
|
options: Array.from(document.getElementById("cred-url").options || []).map((o) => o.value),
|
|
value: document.getElementById("cred-url").value,
|
|
hint: document.getElementById("cred-url-hint").textContent
|
|
})`);
|
|
assert.equal(urlField.tag, 'SELECT', 'URL field must become a select once config loads');
|
|
assert.deepEqual(urlField.options, ['https://approved.example.com']);
|
|
assert.equal(urlField.value, 'https://approved.example.com', 'First approved origin must be preselected');
|
|
assert.ok(urlField.hint.includes('approved'), `Hint should explain the fixed choice: ${urlField.hint}`);
|
|
|
|
// Test Cancel closes modal and restores focus
|
|
await cdp.eval('document.getElementById("btn-cancel-cred").click()');
|
|
const isModalClosed = await cdp.eval('document.getElementById("modal-backdrop").classList.contains("hidden")');
|
|
assert.equal(isModalClosed, true, 'Modal should close on cancel');
|
|
|
|
const restoredFocus = await cdp.eval('document.activeElement.id');
|
|
assert.equal(restoredFocus, 'key-btn', 'Focus should return to key-btn');
|
|
});
|
|
|
|
// Test 3: Password Visibility Toggle & Test Connection
|
|
await step('Password Toggle & Test Connection', async () => {
|
|
await cdp.eval('document.getElementById("key-btn").click()');
|
|
|
|
// Set input values
|
|
await cdp.eval(`
|
|
document.getElementById("cred-url").value = "https://approved.example.com";
|
|
document.getElementById("cred-pat").value = "dummy-pat-123";
|
|
`);
|
|
|
|
// Toggle password
|
|
const typeBefore = await cdp.eval('document.getElementById("cred-pat").type');
|
|
assert.equal(typeBefore, 'password');
|
|
|
|
await cdp.eval('document.getElementById("toggle-pat-btn").click()');
|
|
const typeAfter = await cdp.eval('document.getElementById("cred-pat").type');
|
|
assert.equal(typeAfter, 'text');
|
|
|
|
await cdp.eval('document.getElementById("toggle-pat-btn").click()');
|
|
|
|
// Click Test Connection
|
|
await cdp.eval('document.getElementById("btn-test-cred").click()');
|
|
await new Promise((r) => setTimeout(r, 400));
|
|
|
|
const feedback = await cdp.eval('document.getElementById("modal-feedback").textContent');
|
|
assert.ok(feedback.includes('Connection successful'), `Feedback should indicate success: ${feedback}`);
|
|
});
|
|
|
|
// Test 4: Save Credentials & Canary Leak Inspection
|
|
await step('Save Credentials & Memory Canary Inspection', async () => {
|
|
// Click Save & Close
|
|
await cdp.eval('document.getElementById("btn-save-cred").click()');
|
|
await new Promise((r) => setTimeout(r, 200));
|
|
|
|
const isModalClosed = await cdp.eval('document.getElementById("modal-backdrop").classList.contains("hidden")');
|
|
assert.equal(isModalClosed, true, 'Modal should close after save');
|
|
|
|
const isActive = await cdp.eval('document.getElementById("cred-indicator").classList.contains("active")');
|
|
assert.equal(isActive, true, 'Credential indicator should turn green/active');
|
|
|
|
// Canary inspection: ensure credentials never entered localStorage, sessionStorage, or URL
|
|
const canary = 'dummy-pat-123';
|
|
const localDump = await cdp.eval('JSON.stringify(localStorage)');
|
|
const sessionDump = await cdp.eval('JSON.stringify(sessionStorage)');
|
|
const href = await cdp.eval('window.location.href');
|
|
|
|
assert.ok(!localDump.includes(canary), 'localStorage must not contain credential canary');
|
|
assert.ok(!sessionDump.includes(canary), 'sessionStorage must not contain credential canary');
|
|
assert.ok(!href.includes(canary), 'URL must not contain tokens');
|
|
});
|
|
|
|
// Test 5: Research Query Submission & Loading View
|
|
await step('Query Submission & Loading Thinking Orb', async () => {
|
|
// Set prompt
|
|
await cdp.eval('document.getElementById("prompt-input").value = "How do I deploy service X?"');
|
|
await cdp.eval('document.getElementById("submit-btn").click()');
|
|
|
|
// Check loading view
|
|
const isLoadingVisible = await cdp.eval('!document.getElementById("view-loading").classList.contains("hidden")');
|
|
assert.equal(isLoadingVisible, true, 'Loading view must be visible while query executes');
|
|
|
|
const statusText = await cdp.eval('document.querySelector(".loading-status").textContent');
|
|
assert.equal(statusText, 'Searching Confluence…');
|
|
|
|
const orbPresent = await cdp.eval('!!document.querySelector("canvas.thinking-orb")');
|
|
assert.equal(orbPresent, true, 'Thinking orb canvas must be present');
|
|
|
|
// Wait for query completion and result view
|
|
await new Promise((r) => setTimeout(r, 600));
|
|
|
|
const isResultVisible = await cdp.eval('!document.getElementById("view-result").classList.contains("hidden")');
|
|
assert.equal(isResultVisible, true, 'Result view must be displayed upon query completion');
|
|
});
|
|
|
|
// Test 6: Result View Rendering, Citation Links, and Security
|
|
await step('Result View, Citation Links & Sanitization', async () => {
|
|
const heading = await cdp.eval('document.querySelector("#output-content h1").textContent');
|
|
assert.ok(heading.includes('Deployment Guide for Service X'));
|
|
|
|
// Verify citation link attributes
|
|
const linkTarget = await cdp.eval('document.querySelector("#output-content a").target');
|
|
const linkRel = await cdp.eval('document.querySelector("#output-content a").rel');
|
|
const linkHref = await cdp.eval('document.querySelector("#output-content a").href');
|
|
|
|
assert.equal(linkTarget, '_blank', 'Citation link must open in new tab');
|
|
assert.equal(linkRel, 'noopener noreferrer', 'Citation link must have rel=noopener noreferrer');
|
|
assert.ok(linkHref.includes('847291'));
|
|
|
|
// Intercept click: verify click targets canonical URL without automatic prefetch
|
|
const citationTarget = await cdp.eval(`
|
|
(() => {
|
|
const link = document.querySelector("#output-content a");
|
|
return {
|
|
target: link.getAttribute('target'),
|
|
rel: link.getAttribute('rel'),
|
|
href: link.href
|
|
};
|
|
})()
|
|
`);
|
|
assert.equal(citationTarget.target, '_blank');
|
|
assert.equal(citationTarget.rel, 'noopener noreferrer');
|
|
assert.ok(citationTarget.href.startsWith('https://approved.example.com'));
|
|
});
|
|
|
|
// Test 7: Export to MD Client-Side Blob and Exact Bytes
|
|
await step('Export to MD Client-Side Blob and Exact Bytes', async () => {
|
|
const exportResult = await cdp.eval(`
|
|
new Promise((resolve) => {
|
|
let capturedBlob = null;
|
|
let revoked = false;
|
|
const origCreate = URL.createObjectURL;
|
|
const origRevoke = URL.revokeObjectURL;
|
|
|
|
URL.createObjectURL = (blob) => {
|
|
capturedBlob = blob;
|
|
return origCreate(blob);
|
|
};
|
|
URL.revokeObjectURL = (url) => {
|
|
revoked = true;
|
|
return origRevoke(url);
|
|
};
|
|
|
|
document.getElementById("export-btn").click();
|
|
|
|
URL.createObjectURL = origCreate;
|
|
URL.revokeObjectURL = origRevoke;
|
|
|
|
if (!capturedBlob) {
|
|
resolve({ error: 'No blob captured' });
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
resolve({
|
|
text: reader.result,
|
|
size: capturedBlob.size,
|
|
type: capturedBlob.type,
|
|
revoked
|
|
});
|
|
};
|
|
reader.readAsText(capturedBlob);
|
|
})
|
|
`);
|
|
|
|
assert.ok(!exportResult.error, exportResult.error);
|
|
assert.ok(exportResult.text.includes('Deployment Guide for Service X'), 'Exported text must match result markdown');
|
|
assert.ok(exportResult.type.includes('text/markdown'), 'Blob type must be text/markdown');
|
|
assert.equal(exportResult.revoked, true, 'Object URL must be revoked after dispatch');
|
|
});
|
|
|
|
// Test 8: Artifact Listing & Exact Download
|
|
await step('Artifact Listing & Attachment Download', async () => {
|
|
const artName = await cdp.eval('document.querySelector(".artifact-name").textContent');
|
|
assert.equal(artName, 'checklist.md');
|
|
|
|
const artMeta = await cdp.eval('document.querySelector(".artifact-meta").textContent');
|
|
assert.ok(artMeta.includes('32 B'), 'Artifact metadata should show 32 B');
|
|
|
|
// Verify download trigger executes without error
|
|
await cdp.eval('document.querySelector(".download-btn").click()');
|
|
await new Promise((r) => setTimeout(r, 400));
|
|
|
|
const errorBoxHidden = await cdp.eval('document.getElementById("artifacts-error").classList.contains("hidden")');
|
|
assert.equal(errorBoxHidden, true, 'Artifacts error box must remain hidden on successful download');
|
|
});
|
|
|
|
// Test 9: Sources and Request History Expansion
|
|
await step('Sources & Request History Drawer', async () => {
|
|
const headerTitle = await cdp.eval('document.getElementById("history-toggle-title").textContent');
|
|
assert.ok(headerTitle.includes('1 page accessed'));
|
|
|
|
// Expand history
|
|
await cdp.eval('document.getElementById("history-toggle-btn").click()');
|
|
const isExpanded = await cdp.eval('document.getElementById("history-toggle-btn").getAttribute("aria-expanded")');
|
|
assert.equal(isExpanded, 'true');
|
|
|
|
// Page accessed check
|
|
const pageTitle = await cdp.eval('document.querySelector(".page-title-link").textContent');
|
|
assert.equal(pageTitle, 'Deployment Guide');
|
|
const spaceKey = await cdp.eval('document.querySelector(".badge-space").textContent');
|
|
assert.equal(spaceKey, 'OPS');
|
|
|
|
// Tool call checks (2 calls)
|
|
const toolCardsCount = await cdp.eval('document.querySelectorAll(".tool-card").length');
|
|
assert.equal(toolCardsCount, 2, 'Should display 2 distinct tool call cards');
|
|
|
|
// Expand details on first tool call
|
|
await cdp.eval('document.querySelectorAll(".tool-expand-btn")[0].click()');
|
|
const detailsShown = await cdp.eval('!!document.querySelector(".tool-details")');
|
|
assert.equal(detailsShown, true, 'Tool details should be rendered lazily');
|
|
});
|
|
|
|
// Test 10: Back to Prompt Restores Text
|
|
await step('Back to Prompt Restores Textarea', async () => {
|
|
await cdp.eval('document.getElementById("back-btn").click()');
|
|
|
|
const isPromptVisible = await cdp.eval('!document.getElementById("view-prompt").classList.contains("hidden")');
|
|
assert.equal(isPromptVisible, true);
|
|
|
|
const promptVal = await cdp.eval('document.getElementById("prompt-input").value');
|
|
assert.equal(promptVal, 'How do I deploy service X?', 'Prompt text must be preserved');
|
|
});
|
|
|
|
// Test 11: Query Cancellation in Loading View & Busy Recovery
|
|
await step('Query Cancellation in Loading View & Busy Recovery', async () => {
|
|
// Switch scenario to delayed_cancellation
|
|
await cdp.eval(`
|
|
fetch("/dev/scenario", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ scenario: "delayed_cancellation" })
|
|
})
|
|
`);
|
|
|
|
// Submit query
|
|
await cdp.eval('document.getElementById("submit-btn").click()');
|
|
await new Promise((r) => setTimeout(r, 200));
|
|
|
|
const isLoading = await cdp.eval('!document.getElementById("view-loading").classList.contains("hidden")');
|
|
assert.equal(isLoading, true, 'Should enter loading view');
|
|
|
|
// Click Cancel
|
|
await cdp.eval('document.getElementById("cancel-btn").click()');
|
|
|
|
const isPrompt = await cdp.eval('!document.getElementById("view-prompt").classList.contains("hidden")');
|
|
assert.equal(isPrompt, true, 'Should return to prompt view on cancel');
|
|
|
|
const promptVal = await cdp.eval('document.getElementById("prompt-input").value');
|
|
assert.equal(promptVal, 'How do I deploy service X?', 'Prompt preserved on cancellation');
|
|
|
|
// Wait a tick for the client abort to propagate to server
|
|
await new Promise((r) => setTimeout(r, 80));
|
|
|
|
// Retry while cleanup is still pending (server holds busy for 400ms)
|
|
await cdp.eval('document.getElementById("submit-btn").click()');
|
|
await new Promise((r) => setTimeout(r, 200));
|
|
|
|
const busyText = await cdp.eval('document.getElementById("prompt-error").textContent');
|
|
assert.ok(busyText.includes('busy'), `Should report busy while cleanup pending: ${busyText}`);
|
|
|
|
// Wait for cleanup budget to expire (400ms)
|
|
await new Promise((r) => setTimeout(r, 400));
|
|
|
|
// Reset scenario to normal and retry query
|
|
await cdp.eval(`
|
|
fetch("/dev/scenario", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ scenario: "normal" })
|
|
})
|
|
`);
|
|
await cdp.eval('document.getElementById("submit-btn").click()');
|
|
await new Promise((r) => setTimeout(r, 500));
|
|
|
|
const isRecovered = await cdp.eval('!document.getElementById("view-result").classList.contains("hidden")');
|
|
assert.equal(isRecovered, true, 'Subsequent query must recover and succeed after cleanup completes');
|
|
|
|
// Return to prompt for next tests
|
|
await cdp.eval('document.getElementById("back-btn").click()');
|
|
});
|
|
|
|
// Test 12: Error Recovery (409 Busy & 504 Timeout)
|
|
await step('Error Recovery (409 Busy & 504 Timeout)', async () => {
|
|
// 409 Busy
|
|
await cdp.eval(`
|
|
fetch("/dev/scenario", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ scenario: "409_busy" })
|
|
})
|
|
`);
|
|
|
|
await cdp.eval('document.getElementById("submit-btn").click()');
|
|
await new Promise((r) => setTimeout(r, 300));
|
|
|
|
const errorText = await cdp.eval('document.getElementById("prompt-error").textContent');
|
|
assert.ok(errorText.includes('busy'), `Should show busy error: ${errorText}`);
|
|
|
|
// 504 Timeout
|
|
await cdp.eval(`
|
|
fetch("/dev/scenario", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ scenario: "504_timeout" })
|
|
})
|
|
`);
|
|
|
|
await cdp.eval('document.getElementById("submit-btn").click()');
|
|
await new Promise((r) => setTimeout(r, 300));
|
|
|
|
const timeoutText = await cdp.eval('document.getElementById("prompt-error").textContent');
|
|
assert.ok(timeoutText.includes('timed out'), `Should show timeout error: ${timeoutText}`);
|
|
});
|
|
|
|
// Test 13: Malicious Input, CSP Defense & History Field Sanitization
|
|
await step('Malicious Markdown, CSP Defense & History Field Sanitization', async () => {
|
|
await cdp.eval(`
|
|
fetch("/dev/scenario", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ scenario: "malicious_content" })
|
|
})
|
|
`);
|
|
|
|
await cdp.eval('document.getElementById("submit-btn").click()');
|
|
await new Promise((r) => setTimeout(r, 500));
|
|
|
|
// Assert no <script> executed in document
|
|
const scriptTagsInOutput = await cdp.eval('document.querySelectorAll("#output-content script").length');
|
|
assert.equal(scriptTagsInOutput, 0, 'No executable script tags should be present in output');
|
|
|
|
// Assert no <img> or <iframe> or <form> tags survived sanitization
|
|
const imgCount = await cdp.eval('document.querySelectorAll("#output-content img").length');
|
|
const iframeCount = await cdp.eval('document.querySelectorAll("#output-content iframe").length');
|
|
const formCount = await cdp.eval('document.querySelectorAll("#output-content form").length');
|
|
|
|
assert.equal(imgCount, 0, 'No img tags allowed');
|
|
assert.equal(iframeCount, 0, 'No iframe tags allowed');
|
|
assert.equal(formCount, 0, 'No form tags allowed');
|
|
|
|
// Assert malicious javascript: link had href removed
|
|
const jsLinkHasHref = await cdp.eval(`
|
|
Array.from(document.querySelectorAll("#output-content a")).some(a => a.href && a.href.startsWith("javascript:"))
|
|
`);
|
|
assert.equal(jsLinkHasHref, false, 'No javascript: href links permitted');
|
|
|
|
// History field sanitization check
|
|
await cdp.eval('document.getElementById("history-toggle-btn").click()');
|
|
await cdp.eval('document.querySelectorAll(".tool-expand-btn")[0].click()');
|
|
await new Promise((r) => setTimeout(r, 100));
|
|
|
|
const historyScripts = await cdp.eval('document.querySelectorAll("#history-content script").length');
|
|
const historyImgs = await cdp.eval('document.querySelectorAll("#history-content img").length');
|
|
assert.equal(historyScripts, 0, 'No script tags in history content');
|
|
assert.equal(historyImgs, 0, 'No img tags in history content');
|
|
|
|
const toolParamText = await cdp.eval('document.querySelectorAll(".tool-result-box")[0].textContent');
|
|
assert.ok(toolParamText.includes('xss-param'), 'Parameters rendered safely as plain text');
|
|
});
|
|
|
|
// Test 14: Large Output & Bounded Section Navigation
|
|
await step('Large Output & Bounded Section Navigation', async () => {
|
|
await cdp.eval(`
|
|
fetch("/dev/scenario", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ scenario: "large_output" })
|
|
})
|
|
`);
|
|
|
|
await cdp.eval('document.getElementById("back-btn").click()');
|
|
await cdp.eval('document.getElementById("submit-btn").click()');
|
|
await new Promise((r) => setTimeout(r, 800));
|
|
|
|
// Check section navigation banner
|
|
const isNavVisible = await cdp.eval('!document.getElementById("section-nav").classList.contains("hidden")');
|
|
assert.equal(isNavVisible, true, 'Section nav should be visible for large document');
|
|
|
|
const navText = await cdp.eval('document.querySelector(".section-nav-banner").textContent');
|
|
assert.ok(navText.includes('Showing section 1'), `Should show section 1: ${navText}`);
|
|
|
|
// Click Next
|
|
await cdp.eval('document.querySelectorAll(".section-btn")[1].click()');
|
|
const nextNavText = await cdp.eval('document.querySelector(".section-nav-banner").textContent');
|
|
assert.ok(nextNavText.includes('Showing section 2'), `Should show section 2: ${nextNavText}`);
|
|
|
|
// Click Previous
|
|
await cdp.eval('document.querySelectorAll(".section-btn")[0].click()');
|
|
const prevNavText = await cdp.eval('document.querySelector(".section-nav-banner").textContent');
|
|
assert.ok(prevNavText.includes('Showing section 1'), `Should return to section 1: ${prevNavText}`);
|
|
});
|
|
|
|
// Test 15: Clear Credentials
|
|
await step('Clear Credentials Memory & Guard', async () => {
|
|
await cdp.eval('document.getElementById("key-btn").click()');
|
|
await cdp.eval('document.getElementById("btn-clear-cred").click()');
|
|
|
|
const isActive = await cdp.eval('document.getElementById("cred-indicator").classList.contains("active")');
|
|
assert.equal(isActive, false, 'Indicator should be deactivated after clear');
|
|
|
|
await cdp.eval('document.getElementById("modal-close-btn").click()');
|
|
await cdp.eval('document.getElementById("back-btn").click()');
|
|
|
|
// Attempt submit without credentials
|
|
await cdp.eval('document.getElementById("submit-btn").click()');
|
|
const promptErr = await cdp.eval('document.getElementById("prompt-error").textContent');
|
|
assert.ok(promptErr.includes('credentials required'), 'Submitting without credentials must show error');
|
|
|
|
const modalReopened = await cdp.eval('!document.getElementById("modal-backdrop").classList.contains("hidden")');
|
|
assert.equal(modalReopened, true, 'Modal should open when attempting query without credentials');
|
|
});
|
|
|
|
// Test 16: Admission Queue - queued -> ready -> result (status text & orb state)
|
|
await step('Admission Queue: queued -> ready -> result', async () => {
|
|
// Credentials were cleared in the previous test; reconfigure them.
|
|
await cdp.eval('document.getElementById("key-btn").click()');
|
|
await cdp.eval(`
|
|
document.getElementById("cred-url").value = "https://approved.example.com";
|
|
document.getElementById("cred-pat").value = "dummy-pat-123";
|
|
`);
|
|
await cdp.eval('document.getElementById("btn-save-cred").click()');
|
|
await new Promise((r) => setTimeout(r, 100));
|
|
|
|
await cdp.eval(`
|
|
fetch("/dev/scenario", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ scenario: "queued" })
|
|
})
|
|
`);
|
|
|
|
await cdp.eval('document.getElementById("prompt-input").value = "How do I deploy service X?"');
|
|
await cdp.eval('document.getElementById("submit-btn").click()');
|
|
|
|
// Join answers position 3 / eta 150s ("about 3 min") immediately.
|
|
await new Promise((r) => setTimeout(r, 300));
|
|
const joinState = await cdp.eval(`({
|
|
status: document.getElementById("loading-status").textContent,
|
|
orb: document.getElementById("thinking-orb").dataset.orbState,
|
|
exitVisible: !document.getElementById("exit-queue-btn").classList.contains("hidden"),
|
|
cancelHidden: document.getElementById("cancel-btn").classList.contains("hidden"),
|
|
ariaLabel: document.getElementById("exit-queue-btn").getAttribute("aria-label")
|
|
})`);
|
|
assert.equal(joinState.status, "You're 3rd in line · about 3 min", `Unexpected queued status: ${joinState.status}`);
|
|
assert.equal(joinState.orb, 'shaping', 'Orb must be in the "shaping" preset while queued');
|
|
assert.equal(joinState.exitVisible, true, 'Exit queue button must be visible while queued');
|
|
assert.equal(joinState.cancelHidden, true, 'Cancel button must be hidden while queued');
|
|
assert.equal(joinState.ariaLabel, 'Leave the queue', 'Exit queue aria-label must stay stable');
|
|
|
|
// First poll (~2s later): position 2 / eta 95s ("about 2 min").
|
|
await new Promise((r) => setTimeout(r, 2200));
|
|
const poll1Status = await cdp.eval('document.getElementById("loading-status").textContent');
|
|
assert.equal(poll1Status, "You're 2nd in line · about 2 min", `Unexpected poll 1 status: ${poll1Status}`);
|
|
|
|
// Second poll: position 1 / eta 40s ("under a minute").
|
|
await new Promise((r) => setTimeout(r, 2200));
|
|
const poll2Status = await cdp.eval('document.getElementById("loading-status").textContent');
|
|
assert.equal(poll2Status, "You're next · under a minute", `Unexpected poll 2 status: ${poll2Status}`);
|
|
|
|
// Third poll: ready -> query sent -> result.
|
|
await new Promise((r) => setTimeout(r, 2600));
|
|
const resultOrbState = await cdp.eval(`({
|
|
resultVisible: !document.getElementById("view-result").classList.contains("hidden"),
|
|
orb: document.getElementById("thinking-orb").dataset.orbState
|
|
})`);
|
|
assert.equal(resultOrbState.resultVisible, true, 'Result view must be shown once the queue admits the session');
|
|
assert.equal(resultOrbState.orb, 'solving', 'Orb must switch back to "solving" once the query is sent');
|
|
|
|
// Back to prompt for the next tests.
|
|
await cdp.eval('document.getElementById("back-btn").click()');
|
|
});
|
|
|
|
// Test 17: Admission Queue - Exit queue button (label timing, clock stubbed) & prompt preserved
|
|
await step('Admission Queue: Exit queue label timing & prompt preserved', async () => {
|
|
// Stub the wait-start clock so the 1 min / 3 min label thresholds can be exercised
|
|
// without a real multi-minute wait (spec §11).
|
|
await cdp.eval(`
|
|
window.__realDateNow = Date.now.bind(Date);
|
|
window.__queueClockOffsetMs = 0;
|
|
Date.now = () => window.__realDateNow() + window.__queueClockOffsetMs;
|
|
`);
|
|
|
|
// A fresh scenario (independent counters, reset-on-scenario-change per spec §10) so this
|
|
// flow starts back at "queued" position 3 regardless of the previous test's poll count.
|
|
await cdp.eval(`
|
|
fetch("/dev/scenario", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ scenario: "queued_no_estimate" })
|
|
})
|
|
`);
|
|
|
|
await cdp.eval('document.getElementById("prompt-input").value = "Exit queue test prompt"');
|
|
await cdp.eval('document.getElementById("submit-btn").click()');
|
|
|
|
await new Promise((r) => setTimeout(r, 300));
|
|
const initialLabel = await cdp.eval('document.getElementById("exit-queue-btn").textContent');
|
|
assert.equal(initialLabel, 'I will try next time', `Expected the under-1-min label, got: ${initialLabel}`);
|
|
|
|
// Push the stubbed clock past the 1 minute mark before the next poll refreshes the label.
|
|
await cdp.eval('window.__queueClockOffsetMs = 65000;');
|
|
await new Promise((r) => setTimeout(r, 2200));
|
|
const midLabel = await cdp.eval('document.getElementById("exit-queue-btn").textContent');
|
|
assert.equal(midLabel, "Ohhh, it's so long", `Expected the 1-3 min label, got: ${midLabel}`);
|
|
|
|
// Push past the 3 minute mark before the next poll.
|
|
await cdp.eval('window.__queueClockOffsetMs = 200000;');
|
|
await new Promise((r) => setTimeout(r, 2200));
|
|
const lateLabel = await cdp.eval('document.getElementById("exit-queue-btn").textContent');
|
|
assert.equal(lateLabel, "I'm dying in this queue", `Expected the over-3-min label, got: ${lateLabel}`);
|
|
|
|
const ariaLabel = await cdp.eval('document.getElementById("exit-queue-btn").getAttribute("aria-label")');
|
|
assert.equal(ariaLabel, 'Leave the queue', 'aria-label must stay stable while the visible label changes');
|
|
|
|
// Restore the real clock before leaving.
|
|
await cdp.eval('Date.now = window.__realDateNow;');
|
|
|
|
// Exit queue: returns to the prompt view with the prompt text preserved, no confirmation.
|
|
await cdp.eval('document.getElementById("exit-queue-btn").click()');
|
|
const afterExit = await cdp.eval(`({
|
|
promptVisible: !document.getElementById("view-prompt").classList.contains("hidden"),
|
|
loadingHidden: document.getElementById("view-loading").classList.contains("hidden"),
|
|
promptValue: document.getElementById("prompt-input").value
|
|
})`);
|
|
assert.equal(afterExit.promptVisible, true, 'Exiting the queue must return to the prompt view');
|
|
assert.equal(afterExit.loadingHidden, true, 'Loading view must be hidden after exiting the queue');
|
|
assert.equal(afterExit.promptValue, 'Exit queue test prompt', 'Prompt text must be preserved after exiting the queue');
|
|
});
|
|
|
|
// Test 18: Admission Queue - reservation lost right after "ready" rejoins once and succeeds
|
|
await step('Admission Queue: reservation lost rejoins once', async () => {
|
|
await cdp.eval(`
|
|
fetch("/dev/scenario", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ scenario: "reservation_lost" })
|
|
})
|
|
`);
|
|
|
|
await cdp.eval('document.getElementById("submit-btn").click()');
|
|
await new Promise((r) => setTimeout(r, 600));
|
|
|
|
const isResultVisible = await cdp.eval('!document.getElementById("view-result").classList.contains("hidden")');
|
|
assert.equal(isResultVisible, true, 'A reservation lost right after "ready" must transparently rejoin once and still succeed');
|
|
|
|
const promptErrorHidden = await cdp.eval('document.getElementById("prompt-error").classList.contains("hidden")');
|
|
assert.equal(promptErrorHidden, true, 'No busy error should surface to the user after the automatic rejoin');
|
|
|
|
await cdp.eval('document.getElementById("back-btn").click()');
|
|
await cdp.eval(`
|
|
fetch("/dev/scenario", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ scenario: "normal" })
|
|
})
|
|
`);
|
|
});
|
|
|
|
// Test 19: Zero Automatic External Requests Network Assertion
|
|
await step('Zero Automatic External Requests Network Assertion', async () => {
|
|
// Filter any requests initiated to destinations other than loopback mock server or internal data/blob URLs
|
|
const externalRequests = cdp.networkRequests.filter((r) => {
|
|
const url = r.request.url;
|
|
if (url.startsWith(`http://127.0.0.1:${MOCK_PORT}/`) || url.startsWith('data:') || url.startsWith('blob:')) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
assert.equal(
|
|
externalRequests.length,
|
|
0,
|
|
`Zero automatic external requests permitted! Found: ${externalRequests.map((r) => r.request.url).join(', ')}`
|
|
);
|
|
});
|
|
|
|
} finally {
|
|
cdp.close();
|
|
server.close();
|
|
}
|
|
|
|
console.log(`\n=== E2E Test Results: ${passed} passed, ${failed} failed ===`);
|
|
if (failed > 0) {
|
|
process.exit(1);
|
|
}
|
|
}
|
|
|
|
runTests().catch((err) => {
|
|
console.error('Fatal E2E error:', err);
|
|
process.exit(1);
|
|
});
|