Janady13/thatdeveloperguy-website / tools/tdg-it-services-native-qa.mjs

1import { chromium } from '@playwright/test'; 2import { mkdir, readFile, writeFile } from 'node:fs/promises'; 3import path from 'node:path'; 4import { PNG } from 'pngjs'; 5 6const baseUrl = process.env.TDG_QA_BASE ?? 'http://127.0.0.1:4411'; 7const outputDir = path.resolve(process.env.TDG_QA_OUT ?? 'evidence/rive/it-services/native-page'); 8await mkdir(outputDir, { recursive: true }); 9 10const browser = await chromium.launch({ 11 channel: 'chrome', 12 headless: true, 13 args: ['--use-angle=metal', '--ignore-gpu-blocklist', '--enable-gpu-rasterization'], 14}); 15 16const results = []; 17const failures = []; 18 19async function verifyViewport(name, viewport) { 20 const context = await browser.newContext({ viewport, deviceScaleFactor: 1 }); 21 const page = await context.newPage(); 22 const consoleErrors = []; 23 const requestFailures = []; 24 page.on('console', message => { 25 if (message.type() === 'error') consoleErrors.push(message.text()); 26 }); 27 page.on('requestfailed', request => { 28 requestFailures.push(`${request.url()} ${request.failure()?.errorText ?? ''}`); 29 }); 30 31 await page.goto(`${baseUrl}/capabilities/business-it`, { waitUntil: 'networkidle' }); 32 await page.waitForSelector('.scene[data-scene="it-services"]'); 33 await page.waitForFunction(() => document.querySelector('.scene')?.getAttribute('data-native') !== 'loading'); 34 35 const scene = page.locator('.scene[data-scene="it-services"]'); 36 const nativeState = await scene.getAttribute('data-native'); 37 if (nativeState !== 'ready') failures.push(`${name}: native Rive state was ${nativeState}`); 38 39 const interactions = []; 40 for (const hotspot of ['status', 'deployment', 'toolcart']) { 41 // Dispatch the same bubbling event React uses without asking Playwright to pan an 42 // overflow-hidden, cover-cropped mobile artboard to an offscreen SVG rectangle. 43 await page.locator(`.scene-hit[data-hit="${hotspot}"]`).dispatchEvent('mouseover'); 44 await page.waitForTimeout(350); 45 const state = await scene.getAttribute('data-focus'); 46 const nativeFocus = await page.locator('.it-services-rive').getAttribute('data-native-focus'); 47 interactions.push({ hotspot, state, nativeFocus }); 48 if (state !== hotspot || nativeFocus !== hotspot) { 49 failures.push(`${name}: ${hotspot} focus did not reach both DOM and native layers`); 50 } 51 } 52 53 await page.mouse.move(2, 2); 54 await page.waitForTimeout(300); 55 const screenshot = path.join(outputDir, `${name}.png`); 56 await page.screenshot({ path: screenshot, fullPage: false }); 57 const pixels = PNG.sync.read(await readFile(screenshot)); 58 let luma = 0; 59 for (let offset = 0; offset < pixels.data.length; offset += 4) { 60 luma += pixels.data[offset] * .2126 + pixels.data[offset + 1] * .7152 + pixels.data[offset + 2] * .0722; 61 } 62 const averageLuma = luma / (pixels.width * pixels.height); 63 64 const evidence = await page.evaluate(() => { 65 const sceneElement = document.querySelector('.scene[data-scene="it-services"]'); 66 const plane = document.querySelector('.scene-plane'); 67 const canvas = document.querySelector('.it-services-rive canvas'); 68 const riveLayer = document.querySelector('.it-services-rive'); 69 const poster = document.querySelector('.scene-poster'); 70 const glCanvas = document.createElement('canvas'); 71 const gl = glCanvas.getContext('webgl2'); 72 const extension = gl?.getExtension('WEBGL_debug_renderer_info'); 73 const rect = sceneElement?.getBoundingClientRect(); 74 return { 75 renderer: extension && gl ? gl.getParameter(extension.UNMASKED_RENDERER_WEBGL) : 'unavailable', 76 native: sceneElement?.getAttribute('data-native'), 77 motion: sceneElement?.getAttribute('data-motion'), 78 rivePlaying: document.querySelector('.it-services-rive')?.getAttribute('data-playing'), 79 canvas: canvas ? { width: canvas.width, height: canvas.height } : null, 80 canvasRect: canvas ? { width: canvas.getBoundingClientRect().width, height: canvas.getBoundingClientRect().height, left: canvas.getBoundingClientRect().left, right: canvas.getBoundingClientRect().right } : null, 81 riveRect: riveLayer ? { width: riveLayer.getBoundingClientRect().width, height: riveLayer.getBoundingClientRect().height, left: riveLayer.getBoundingClientRect().left, right: riveLayer.getBoundingClientRect().right } : null, 82 bodyRect: { width: document.body.getBoundingClientRect().width, left: document.body.getBoundingClientRect().left, right: document.body.getBoundingClientRect().right }, 83 posterVisibility: poster ? getComputedStyle(poster).visibility : null, 84 posterOpacity: poster ? getComputedStyle(poster).opacity : null, 85 sceneRect: rect ? { width: rect.width, height: rect.height, top: rect.top, left: rect.left } : null, 86 planeRect: plane ? { width: plane.getBoundingClientRect().width, height: plane.getBoundingClientRect().height, left: plane.getBoundingClientRect().left, right: plane.getBoundingClientRect().right, transform: getComputedStyle(plane).transform, cssLeft: getComputedStyle(plane).left, marginLeft: getComputedStyle(plane).marginLeft, offsetLeft: plane.offsetLeft, offsetParent: plane.offsetParent?.className ?? null } : null, 87 hotspots: document.querySelectorAll('.scene-hit').length, 88 bodyOverflow: getComputedStyle(document.body).overflow, 89 scroll: { 90 width: document.documentElement.scrollWidth, 91 height: document.documentElement.scrollHeight, 92 clientWidth: document.documentElement.clientWidth, 93 clientHeight: document.documentElement.clientHeight, 94 }, 95 }; 96 }); 97 98 if (!evidence.canvas) failures.push(`${name}: native canvas missing`); 99 if (evidence.posterVisibility !== 'visible' || evidence.posterOpacity !== '1') failures.push(`${name}: authoritative room plate is not visible beneath native motion`); 100 if (averageLuma < 110) failures.push(`${name}: composed room is too dark (${averageLuma.toFixed(1)} average luma)`); 101 if (evidence.hotspots !== 6) failures.push(`${name}: expected 6 hotspots, found ${evidence.hotspots}`); 102 if (evidence.scroll.width > evidence.scroll.clientWidth + 1 || evidence.scroll.height > evidence.scroll.clientHeight + 1) { 103 failures.push(`${name}: page scrolls outside its full-viewport scene`); 104 } 105 if (consoleErrors.length) failures.push(`${name}: ${consoleErrors.length} console errors`); 106 if (requestFailures.length) failures.push(`${name}: ${requestFailures.length} failed requests`); 107 108 results.push({ name, viewport, screenshot, averageLuma, interactions, consoleErrors, requestFailures, evidence }); 109 await context.close(); 110} 111 112try { 113 await verifyViewport('desktop-1440x900', { width: 1440, height: 900 }); 114 await verifyViewport('mobile-390x844', { width: 390, height: 844 }); 115} finally { 116 await browser.close(); 117} 118 119const report = { 120 generatedAt: new Date().toISOString(), 121 baseUrl, 122 pass: failures.length === 0, 123 failures, 124 results, 125}; 126await writeFile(path.join(outputDir, 'qa-results.json'), `${JSON.stringify(report, null, 2)}\n`); 127 128for (const result of results) { 129 console.log(`${result.name}: ${result.evidence.native}, ${result.evidence.renderer}, ${result.evidence.hotspots} hotspots`); 130} 131if (failures.length) { 132 for (const failure of failures) console.error(`FAIL ${failure}`); 133 process.exitCode = 1; 134} else { 135 console.log('PASS native IT Services page at desktop and mobile viewports'); 136} 137