+ 
+
+
+
+
+
+
+ Register Now
+ Invest In Yourself and Hone Your Craft
+Method Conference Springfield, MO is an immersive one-day conference with three tracks, two one-hour session tracks, a workshop track, and a keynote. All with an intense focus on digital development, design, UX, content, code, and more.
+Download Our Mobile App!
+
+ 
+ 
+
+
+
+
+
+
+
+ Stay in-the-know about event updates and new speaker announcements.
+ +Head fixture
+Missing fixture +`; + +const defaultFixturePage = `Default fixture
+Missing fixture +Server error fixture +`; + +const notFoundFixture = `import { error } from '@sveltejs/kit'; + +export function load() { + error(404, 'Not found'); +} +`; + +const serverErrorFixture = `import { error } from '@sveltejs/kit'; + +export function load() { + error(500, 'Probe failure'); +} +`; + +function run(command, args, options = {}) { + const result = spawnSync(command, args, { + cwd: options.cwd ?? root, + env: options.env ?? process.env, + stdio: options.stdio ?? 'inherit', + }); + if (result.status !== 0) { + throw new Error( + `${command} ${args.join(' ')} failed with ${result.status}`, + ); + } + return result; +} + +function httpJson(portNumber, path) { + return new Promise((resolve, reject) => { + const request = httpRequest( + { host: '127.0.0.1', port: portNumber, path }, + (response) => { + let data = ''; + response.setEncoding('utf8'); + response.on('data', (chunk) => { + data += chunk; + }); + response.on('end', () => { + try { + resolve(JSON.parse(data)); + } catch (error) { + reject(error); + } + }); + }, + ); + request.on('error', reject); + request.end(); + }); +} + +async function waitForHttp(url, attempts = 160) { + for (let index = 0; index < attempts; index += 1) { + try { + const response = await fetch(url, { + headers: { 'user-agent': chromeUserAgent }, + }); + if (response.status < 500) return; + } catch { + // retry below + } + await delay(250); + } + throw new Error(`server did not become ready: ${url}`); +} + +class ChromeSession { + constructor() { + this.port = 12000 + Math.floor(Math.random() * 1000); + this.profile = join( + outputRoot, + `chrome-profile-${process.pid}-${this.port}`, + ); + this.nextId = 1; + this.pending = new Map(); + this.consoleMessages = []; + } + + async start() { + this.process = spawn( + chromeBin, + [ + '--headless=new', + `--remote-debugging-port=${this.port}`, + '--remote-allow-origins=*', + `--user-data-dir=${this.profile}`, + '--no-first-run', + '--no-default-browser-check', + '--disable-gpu', + '--disable-dev-shm-usage', + '--force-device-scale-factor=1', + 'about:blank', + ], + { stdio: ['ignore', 'pipe', 'pipe'] }, + ); + this.stderr = ''; + this.process.stderr.on('data', (data) => { + this.stderr += data.toString(); + }); + + for (let index = 0; index < 160; index += 1) { + try { + await httpJson(this.port, '/json/version'); + break; + } catch { + await delay(100); + } + if (index === 159) + throw new Error( + `Chrome did not start: ${this.stderr.slice(-1000)}`, + ); + } + + const targets = await httpJson(this.port, '/json/list'); + const target = targets.find((item) => item.type === 'page'); + this.ws = new WebSocket(target.webSocketDebuggerUrl); + await new Promise((resolve, reject) => { + this.ws.addEventListener('open', resolve, { once: true }); + this.ws.addEventListener('error', reject, { once: true }); + }); + this.ws.addEventListener('message', (event) => + this.onMessage(JSON.parse(event.data)), + ); + await this.cdp('Page.enable'); + await this.cdp('Runtime.enable'); + await this.cdp('Log.enable'); + await this.cdp('Network.enable'); + await this.cdp('Network.setUserAgentOverride', { + userAgent: chromeUserAgent, + }); + } + + onMessage(message) { + if (message.method === 'Runtime.consoleAPICalled') { + this.consoleMessages.push({ + source: 'console', + type: message.params.type, + text: message.params.args + .map((arg) => arg.value ?? arg.description ?? '') + .join(' '), + }); + } + if (message.method === 'Runtime.exceptionThrown') { + this.consoleMessages.push({ + source: 'exception', + type: 'error', + text: message.params.exceptionDetails?.text ?? 'exception', + }); + } + if (message.method === 'Log.entryAdded') { + this.consoleMessages.push({ + source: 'log', + type: message.params.entry.level, + text: message.params.entry.text, + }); + } + if (message.id && this.pending.has(message.id)) { + const { resolve, reject } = this.pending.get(message.id); + this.pending.delete(message.id); + if (message.error) reject(new Error(JSON.stringify(message.error))); + else resolve(message.result ?? {}); + } + } + + cdp(method, params = {}) { + const id = this.nextId; + this.nextId += 1; + this.ws.send(JSON.stringify({ id, method, params })); + return new Promise((resolve, reject) => + this.pending.set(id, { resolve, reject }), + ); + } + + async evaluate(expression) { + const result = await this.cdp('Runtime.evaluate', { + expression, + awaitPromise: true, + returnByValue: true, + }); + if (result.exceptionDetails) + throw new Error(JSON.stringify(result.exceptionDetails)); + return result.result?.value; + } + + async waitForExpression(expression, attempts = 80) { + for (let index = 0; index < attempts; index += 1) { + if (await this.evaluate(expression)) return; + await delay(100); + } + throw new Error(`timed out waiting for ${expression}`); + } + + async navigate(url, viewport) { + await this.cdp('Emulation.setDeviceMetricsOverride', { + width: viewport.width, + height: viewport.height, + deviceScaleFactor: 1, + mobile: false, + }); + await this.cdp( + 'Emulation.setTouchEmulationEnabled', + viewport.touch + ? { enabled: true, maxTouchPoints: 1 } + : { enabled: false }, + ); + await this.cdp('Page.navigate', { url }); + for (let index = 0; index < 220; index += 1) { + if ((await this.evaluate('document.readyState')) === 'complete') + break; + await delay(100); + } + await this.evaluate( + 'document.fonts?.ready ? document.fonts.ready.then(() => true) : true', + ); + await delay(250); + } + + async settleSponsors() { + await this.evaluate(`(async () => { + const root = document.querySelector('#sponsor'); + root.scrollIntoView({ block: 'start', inline: 'nearest' }); + await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))); + for (const img of root.querySelectorAll('img')) { + img.scrollIntoView({ block: 'center', inline: 'nearest' }); + await new Promise((resolve) => requestAnimationFrame(resolve)); + if (!img.complete) await new Promise((resolve) => { + img.addEventListener('load', resolve, { once: true }); + img.addEventListener('error', resolve, { once: true }); + }); + } + root.scrollIntoView({ block: 'start', inline: 'nearest' }); + await document.fonts.ready; + await new Promise((resolve) => setTimeout(resolve, 500)); + return true; + })()`); + } + + async sponsorMeta() { + return await this.evaluate(`(() => { + const root = document.querySelector('#sponsor'); + const rect = (el) => { const r = el.getBoundingClientRect(); return { x: r.x, y: r.y, width: r.width, height: r.height, top: r.top + scrollY, left: r.left + scrollX }; }; + const css = (el) => { const s = getComputedStyle(el); return { color: s.color, fontFamily: s.fontFamily, fontSize: s.fontSize, fontWeight: s.fontWeight, lineHeight: s.lineHeight, display: s.display, objectFit: s.objectFit, transform: s.transform }; }; + return { + url: location.href, + scrollY, + viewport: { width: innerWidth, height: innerHeight, devicePixelRatio }, + body: { box: rect(document.body), css: css(document.body) }, + main: document.querySelector('main') ? { box: rect(document.querySelector('main')), css: css(document.querySelector('main')) } : null, + root: { box: rect(root), css: css(root), text: root.textContent.replace(/\\s+/g, ' ').trim() }, + imgs: [...root.querySelectorAll('img')].map((img) => ({ alt: img.alt, currentSrc: img.currentSrc, widthAttr: img.getAttribute('width'), heightAttr: img.getAttribute('height'), naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight, complete: img.complete, box: rect(img), css: css(img) })), + headings: [...root.querySelectorAll('h1,h2,h3,p')].map((el) => ({ tag: el.tagName, text: el.textContent.replace(/\\s+/g, ' ').trim(), box: rect(el), css: css(el) })), + }; + })()`); + } + + async captureSponsor(url, viewport) { + await this.navigate(url, viewport); + await this.settleSponsors(); + return await this.sponsorMeta(); + } + + async stop() { + try { + this.ws?.close(); + } catch { + // ignore cleanup errors + } + this.process?.kill('SIGTERM'); + await delay(200); + if (existsSync(this.profile)) + rmSync(this.profile, { recursive: true, force: true }); + } +} + +function boxDelta(liveBox, candidateBox, rootLive, rootCandidate) { + return { + x: candidateBox.x - liveBox.x, + width: candidateBox.width - liveBox.width, + height: candidateBox.height - liveBox.height, + yRelative: candidateBox.y - rootCandidate.y - (liveBox.y - rootLive.y), + }; +} + +function assertNear(value, limit, label, failures) { + if (Math.abs(value) > limit) failures.push(`${label}: ${value}`); +} + +function compactText(value) { + return value.replace(/\s+/g, ''); +} + +function headHtml(html) { + return /
