Janady13/thatdeveloperguy-website / tools/tdg-cybersecurity-production-qa.mjs

1import { chromium } from '@playwright/test'; 2import { mkdirSync, writeFileSync } from 'node:fs'; 3import { resolve } from 'node:path'; 4import pixelmatch from 'pixelmatch'; 5import { PNG } from 'pngjs'; 6 7const base = process.env.TDG_QA_BASE ?? 'http://127.0.0.1:4414'; 8const route = `${base}/capabilities/cybersecurity?v=${Date.now()}`; 9const evidence = resolve('evidence/rive/cybersecurity/browser'); 10mkdirSync(evidence, { recursive: true }); 11 12const browser = await chromium.launch({ headless: true }); 13const errors = []; 14const failedRequests = []; 15const findings = {}; 16 17async function open(viewport, reducedMotion = 'no-preference') { 18 const context = await browser.newContext({ viewport, deviceScaleFactor: 1, reducedMotion }); 19 const page = await context.newPage(); 20 page.on('console', message => { if (message.type() === 'error') errors.push(message.text()); }); 21 page.on('pageerror', error => errors.push(error.message)); 22 page.on('requestfailed', request => failedRequests.push(`${request.method()} ${request.url()} ${request.failure()?.errorText ?? ''}`)); 23 await page.goto(route, { waitUntil: 'networkidle' }); 24 await page.waitForSelector('.scene-cybersecurity[data-vector="ready"]', { timeout: 20000 }); 25 return { context, page }; 26} 27 28const desktop = await open({ width: 1440, height: 1000 }); 29const page = desktop.page; 30await page.waitForTimeout(1200); 31findings.initial = await page.locator('.scene-cybersecurity').evaluate(scene => ({ 32 vector: scene.getAttribute('data-vector'), 33 native: scene.getAttribute('data-native'), 34 renderer: scene.getAttribute('data-renderer'), 35 motion: scene.getAttribute('data-motion'), 36 hotspots: scene.querySelectorAll('.scene-hit').length, 37 paths: scene.querySelectorAll('.cybersecurity-vector path').length, 38 canvases: scene.querySelectorAll('canvas').length, 39 documentAnimations: document.getAnimations().length, 40 vectorAnimations: Array.from(scene.querySelectorAll('.cybersecurity-vector svg')).reduce((total, pass) => total + pass.getAnimations({ subtree: true }).length, 0), 41 vectorPasses: Array.from(scene.querySelectorAll('.cybersecurity-vector-pass')).map(pass => pass.getAttribute('data-pass')), 42})); 43await page.screenshot({ path: resolve(evidence, 'desktop-idle.png'), fullPage: true }); 44 45async function select(id, expected) { 46 const hit = page.locator(`[data-hit="${id}"]`); 47 await hit.hover(); 48 await page.waitForTimeout(180); 49 const hover = await page.locator('.scene-cybersecurity').getAttribute('data-focus'); 50 await hit.click(); 51 await page.waitForTimeout(180); 52 const selected = await page.locator('.scene-cybersecurity').getAttribute('data-selected'); 53 const caption = await page.locator('.scene-caption').textContent(); 54 await page.screenshot({ path: resolve(evidence, `desktop-${id}.png`), fullPage: true }); 55 if (hover !== id || selected !== id || !caption?.includes(expected)) throw new Error(`Interaction contract failed for ${id}: hover=${hover}, selected=${selected}, caption=${caption}`); 56} 57 58await select('monitoring', 'illustrative'); 59findings.monitoring = await page.evaluate(() => ({ 60 sweepDuration: getComputedStyle(document.querySelector('#threat_sweep')).animationDuration, 61 sweepName: getComputedStyle(document.querySelector('#threat_sweep')).animationName, 62 refreshDuration: getComputedStyle(document.querySelector('#monitor_refresh_1')).animationDuration, 63})); 64await select('health', 'human security review'); 65findings.health = await page.evaluate(() => ({ 66 checkOpacity: getComputedStyle(document.querySelector('#health_row_networks_check')).opacity, 67 checks: document.querySelectorAll('[id^="health_row_"][id$="_check"]').length, 68})); 69await select('response', 'Decide who'); 70findings.response = await page.evaluate(() => ({ cameraTransform: getComputedStyle(document.querySelector('#camera_head')).transform })); 71await select('infrastructure', 'Protect the foundations'); 72findings.infrastructure = await page.evaluate(() => ({ rackTransform: getComputedStyle(document.querySelector('#server_rack_middle_door')).transform })); 73await select('briefing', 'Request a human'); 74findings.briefing = await page.evaluate(() => ({ 75 chairTransform: getComputedStyle(document.querySelector('#console_chair_1')).transform, 76 drawerTransform: getComputedStyle(document.querySelector('#console_1_left_cabinet_drawer_1')).transform, 77 centerMonitorFilter: getComputedStyle(document.querySelector('#monitor_2_2')).filter, 78 drawers: Array.from(document.querySelectorAll('[id*="_cabinet_drawer_"]')).filter(element => /_cabinet_drawer_[123]$/.test(element.id)).length, 79})); 80 81// The briefing target navigates after its authored transition; return to validate remaining in-room states. 82await page.waitForURL(/\/contact/, { timeout: 3000 }); 83await page.goto(route, { waitUntil: 'networkidle' }); 84await page.waitForSelector('.scene-cybersecurity[data-vector="ready"]', { timeout: 20000 }); 85 86async function hoverScenePoint(x, y, settle = 460) { 87 const box = await page.locator('.scene-cybersecurity .scene-plane').boundingBox(); 88 if (!box) throw new Error('Cybersecurity scene plane has no bounding box.'); 89 await page.mouse.move(box.x + x / 1648 * box.width, box.y + y / 928 * box.height); 90 await page.waitForTimeout(settle); 91} 92 93const chairPoints = [ 94 ['console_chair_1', 511, 531], 95 ['console_chair_2', 820, 531], 96 ['console_chair_3', 1132, 531], 97]; 98const drawerPoints = []; 99for (const [consoleNumber, leftX, rightX] of [[1, 381, 615], [2, 704, 931], [3, 1019, 1249]]) { 100 for (const [side, x] of [['left', leftX], ['right', rightX]]) { 101 for (const [drawerNumber, y] of [[1, 514], [2, 530], [3, 547]]) { 102 drawerPoints.push([`console_${consoleNumber}_${side}_cabinet_drawer_${drawerNumber}`, x, y]); 103 } 104 } 105} 106 107findings.objectInteractions = { chairs: {}, drawers: {} }; 108for (const [id, x, y] of chairPoints) { 109 await hoverScenePoint(x, y, 540); 110 findings.objectInteractions.chairs[id] = await page.evaluate(targetId => { 111 const targets = Array.from(document.querySelectorAll('[id^="console_chair_"]')).filter(element => /^console_chair_[123]$/.test(element.id)); 112 const visiblyTranslated = element => { 113 const transform = getComputedStyle(element).transform; 114 if (transform === 'none') return false; 115 const matrix = new DOMMatrix(transform); 116 return Math.hypot(matrix.e, matrix.f) > 0.1; 117 }; 118 return { 119 sceneFocus: document.querySelector('.scene-cybersecurity')?.getAttribute('data-object-focus'), 120 vectorFocus: document.querySelector('.cybersecurity-vector svg')?.getAttribute('data-object-focus'), 121 targetTransform: getComputedStyle(document.getElementById(targetId)).transform, 122 activeTargets: targets.filter(visiblyTranslated).map(target => target.id), 123 }; 124 }, id); 125} 126for (const [id, x, y] of drawerPoints) { 127 await hoverScenePoint(x, y); 128 findings.objectInteractions.drawers[id] = await page.evaluate(targetId => { 129 const targets = Array.from(document.querySelectorAll('[id*="_cabinet_drawer_"]')).filter(element => /_cabinet_drawer_[123]$/.test(element.id)); 130 const visiblyTranslated = element => { 131 const transform = getComputedStyle(element).transform; 132 if (transform === 'none') return false; 133 const matrix = new DOMMatrix(transform); 134 return Math.hypot(matrix.e, matrix.f) > 0.1; 135 }; 136 return { 137 sceneFocus: document.querySelector('.scene-cybersecurity')?.getAttribute('data-object-focus'), 138 vectorFocus: document.querySelector('.cybersecurity-vector svg')?.getAttribute('data-object-focus'), 139 targetTransform: getComputedStyle(document.getElementById(targetId)).transform, 140 activeTargets: targets.filter(visiblyTranslated).map(target => target.id), 141 }; 142 }, id); 143} 144await hoverScenePoint(820, 820); 145findings.objectInteractions.cleared = await page.locator('.scene-cybersecurity').evaluate(scene => ({ 146 sceneFocus: scene.getAttribute('data-object-focus'), 147 activeChairs: Array.from(scene.querySelectorAll('[id^="console_chair_"]')).filter(element => /^console_chair_[123]$/.test(element.id) && getComputedStyle(element).transform !== 'none').length, 148 activeDrawers: Array.from(scene.querySelectorAll('[id*="_cabinet_drawer_"]')).filter(element => /_cabinet_drawer_[123]$/.test(element.id) && getComputedStyle(element).transform !== 'none').length, 149})); 150await select('process', 'Scope, collect'); 151findings.process = await page.evaluate(() => ({ binderTransform: getComputedStyle(document.querySelector('#reference_binder_3')).transform })); 152findings.kitTiming = await page.evaluate(() => ({ 153 signalDuration: getComputedStyle(document.querySelector('#node_pulse_1')).animationDuration, 154 signalStartOpacity: getComputedStyle(document.querySelector('#node_pulse_1')).opacity, 155 foliageDuration: getComputedStyle(document.querySelector('[data-motion="sway_small"]')).animationDuration, 156 foliageTargets: document.querySelectorAll('[data-motion="sway_small"]').length, 157 doorOrigin: getComputedStyle(document.querySelector('#secure_door_leaf')).transformOrigin, 158})); 159 160const idleA = await page.screenshot(); 161findings.ambientSample = await page.evaluate(async () => { 162 const pulse = document.querySelector('#node_pulse_1'); 163 const camera = document.querySelector('#camera_head'); 164 const before = { pulse: getComputedStyle(pulse).opacity, camera: getComputedStyle(camera).transform }; 165 await new Promise(resolve => setTimeout(resolve, 1200)); 166 const after = { pulse: getComputedStyle(pulse).opacity, camera: getComputedStyle(camera).transform }; 167 return { before, after }; 168}); 169await page.waitForTimeout(900); 170const idleB = await page.screenshot(); 171const a = PNG.sync.read(idleA); 172const b = PNG.sync.read(idleB); 173const diff = new PNG({ width: a.width, height: a.height }); 174findings.ambientChangedPixels = pixelmatch(a.data, b.data, diff.data, a.width, a.height, { threshold: 0.1 }); 175writeFileSync(resolve(evidence, 'desktop-ambient-diff.png'), PNG.sync.write(diff)); 176 177await page.locator('.motion-control').click(); 178await page.waitForTimeout(120); 179findings.paused = await page.locator('.scene-cybersecurity').evaluate(scene => ({ 180 motion: scene.getAttribute('data-motion'), 181 vectorPaused: scene.querySelector('.cybersecurity-vector svg')?.getAttribute('data-paused'), 182 nativePlaying: scene.querySelector('.cybersecurity-rive')?.getAttribute('data-playing') ?? 'not-mounted', 183 button: scene.querySelector('.motion-control')?.textContent, 184})); 185await page.screenshot({ path: resolve(evidence, 'desktop-paused.png'), fullPage: true }); 186 187await page.locator('.motion-control').click(); 188await page.waitForTimeout(80); 189await page.locator('[data-hit="return-lobby"]').click(); 190await page.waitForTimeout(260); 191findings.door = await page.evaluate(() => ({ doorTransform: getComputedStyle(document.querySelector('#secure_door_leaf')).transform })); 192await page.waitForURL(url => url.pathname === '/', { timeout: 3000 }); 193await desktop.context.close(); 194 195const mobile = await open({ width: 390, height: 844 }); 196await mobile.page.screenshot({ path: resolve(evidence, 'mobile-idle.png'), fullPage: true }); 197findings.mobile = await mobile.page.locator('.scene-cybersecurity').evaluate(scene => { 198 const rect = scene.getBoundingClientRect(); 199 return { width: rect.width, height: rect.height, hotspots: scene.querySelectorAll('.scene-hit').length, vector: scene.getAttribute('data-vector') }; 200}); 201await mobile.context.close(); 202 203const reduced = await open({ width: 1280, height: 800 }, 'reduce'); 204findings.reduced = await reduced.page.locator('.scene-cybersecurity').evaluate(scene => ({ 205 motion: scene.getAttribute('data-motion'), 206 vectorPaused: scene.querySelector('.cybersecurity-vector svg')?.getAttribute('data-paused'), 207 button: scene.querySelector('.motion-control')?.textContent, 208})); 209await reduced.context.close(); 210await browser.close(); 211 212const assertions = { 213 exactHotspotCount: findings.initial.hotspots === 7, 214 suppliedVectorLoaded: findings.initial.paths > 5000, 215 singleAuthoritativeSceneAssembled: JSON.stringify(findings.initial.vectorPasses) === JSON.stringify(['scene']), 216 nativeRiveReadyOrCorrectFallback: findings.initial.native === 'ready' && findings.initial.canvases === 1 || findings.initial.native === 'fallback' && findings.initial.renderer.startsWith('software renderer'), 217 ambientMotionActive: findings.ambientChangedPixels > 100 || findings.ambientSample.before.pulse !== findings.ambientSample.after.pulse || findings.ambientSample.before.camera !== findings.ambientSample.after.camera, 218 kitMapSweep: findings.monitoring.sweepDuration === '1.45s' && findings.monitoring.refreshDuration === '1.45s', 219 kitAmbientSignals: findings.kitTiming.signalDuration === '4s', 220 kitFoliage: findings.kitTiming.foliageDuration === '9s' && findings.kitTiming.foliageTargets > 0, 221 kitChecks: findings.health.checks === 5 && Number(findings.health.checkOpacity) < 0.2, 222 kitCamera: findings.response.cameraTransform !== 'none', 223 kitRackGlass: findings.infrastructure.rackTransform !== 'none', 224 independentFurnitureLayers: findings.briefing.drawers === 18 && findings.briefing.chairTransform === 'none' && findings.briefing.drawerTransform === 'none', 225 allChairsIndependentlyInteractive: Object.entries(findings.objectInteractions.chairs).length === 3 && Object.entries(findings.objectInteractions.chairs).every(([id, result]) => result.sceneFocus === id && result.vectorFocus === id && result.targetTransform !== 'none' && result.activeTargets.length === 1 && result.activeTargets[0] === id), 226 allDrawersIndependentlyInteractive: Object.entries(findings.objectInteractions.drawers).length === 18 && Object.entries(findings.objectInteractions.drawers).every(([id, result]) => result.sceneFocus === id && result.vectorFocus === id && result.targetTransform !== 'none' && result.activeTargets.length === 1 && result.activeTargets[0] === id), 227 objectMotionClearsCleanly: findings.objectInteractions.cleared.sceneFocus === '' && findings.objectInteractions.cleared.activeChairs === 0 && findings.objectInteractions.cleared.activeDrawers === 0, 228 briefingTargetsCenterScreensOnly: findings.briefing.centerMonitorFilter !== 'none', 229 kitBinder: findings.process.binderTransform !== 'none', 230 kitDoor: findings.door.doorTransform !== 'none', 231 pauseStopsBothLayers: findings.paused.motion === 'reduced' && findings.paused.vectorPaused === 'true' && (findings.paused.nativePlaying === 'false' || findings.paused.nativePlaying === 'not-mounted'), 232 reducedMotionHonored: findings.reduced.motion === 'reduced' && findings.reduced.vectorPaused === 'true', 233 responsiveMobile: findings.mobile.width === 390 && findings.mobile.height === 844 && findings.mobile.hotspots === 7, 234 noConsoleErrors: errors.length === 0, 235 noFailedRequests: failedRequests.length === 0, 236}; 237 238const report = { route, findings, assertions, errors, failedRequests, passed: Object.values(assertions).every(Boolean) }; 239writeFileSync(resolve(evidence, 'qa.json'), `${JSON.stringify(report, null, 2)}\n`); 240console.log(JSON.stringify(report, null, 2)); 241if (!report.passed) process.exitCode = 1; 242