boos
e0a5f57793
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
821 lines
31 KiB
JavaScript
821 lines
31 KiB
JavaScript
#!/usr/bin/env node
|
|
|
|
import { spawn } from 'node:child_process'
|
|
import { existsSync } from 'node:fs'
|
|
import net from 'node:net'
|
|
import path from 'node:path'
|
|
import process from 'node:process'
|
|
import { fileURLToPath } from 'node:url'
|
|
import { chromium } from 'playwright-core'
|
|
|
|
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
|
const repoRoot = path.resolve(__dirname, '..')
|
|
const playgroundDir = path.join(repoRoot, 'playground-angular')
|
|
const host = '127.0.0.1'
|
|
|
|
function isPortOpen(port, listenHost = host) {
|
|
return new Promise((resolve) => {
|
|
const socket = net.createConnection({ host: listenHost, port })
|
|
socket.on('connect', () => {
|
|
socket.end()
|
|
resolve(true)
|
|
})
|
|
socket.on('error', () => {
|
|
socket.destroy()
|
|
resolve(false)
|
|
})
|
|
})
|
|
}
|
|
|
|
async function findFreePort(start = 4175, end = 4205) {
|
|
for (let port = start; port <= end; port++) {
|
|
if (!await isPortOpen(port))
|
|
return port
|
|
}
|
|
throw new Error(`No free port found in ${start}-${end}`)
|
|
}
|
|
|
|
async function waitForPort(port, timeout = 60000) {
|
|
const startedAt = Date.now()
|
|
while (Date.now() - startedAt < timeout) {
|
|
if (await isPortOpen(port))
|
|
return
|
|
await new Promise(resolve => setTimeout(resolve, 150))
|
|
}
|
|
throw new Error(`Timed out waiting for ${host}:${port}`)
|
|
}
|
|
|
|
function killProcessTree(child) {
|
|
if (!child || child.killed)
|
|
return
|
|
try {
|
|
child.kill('SIGTERM')
|
|
}
|
|
catch {}
|
|
setTimeout(() => {
|
|
try {
|
|
if (!child.killed)
|
|
child.kill('SIGKILL')
|
|
}
|
|
catch {}
|
|
}, 3000).unref?.()
|
|
}
|
|
|
|
function resolveChromeLaunchOptions() {
|
|
const candidates = [
|
|
process.env.PLAYWRIGHT_CHROME_PATH,
|
|
'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
|
|
'/Applications/Chromium.app/Contents/MacOS/Chromium',
|
|
'/usr/bin/google-chrome',
|
|
'/usr/bin/chromium',
|
|
'/usr/bin/chromium-browser',
|
|
'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
|
|
'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
|
|
].filter(Boolean)
|
|
|
|
for (const candidate of candidates) {
|
|
if (existsSync(candidate)) {
|
|
return {
|
|
executablePath: candidate,
|
|
headless: true,
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
channel: 'chrome',
|
|
headless: true,
|
|
}
|
|
}
|
|
|
|
function startDevServer(port) {
|
|
const logBuffer = []
|
|
const child = spawn(
|
|
'pnpm',
|
|
['exec', 'vite', 'dev', '--host', host, '--port', String(port)],
|
|
{
|
|
cwd: playgroundDir,
|
|
env: {
|
|
...process.env,
|
|
CI: '1',
|
|
},
|
|
stdio: ['ignore', 'pipe', 'pipe'],
|
|
},
|
|
)
|
|
|
|
const appendLogs = (chunk) => {
|
|
const text = String(chunk)
|
|
logBuffer.push(text)
|
|
if (logBuffer.length > 160)
|
|
logBuffer.splice(0, logBuffer.length - 160)
|
|
}
|
|
|
|
child.stdout.on('data', appendLogs)
|
|
child.stderr.on('data', appendLogs)
|
|
|
|
return {
|
|
child,
|
|
getLogs() {
|
|
return logBuffer.join('')
|
|
},
|
|
}
|
|
}
|
|
|
|
function summarizeErrors(errors) {
|
|
return errors
|
|
.map(error => error.trim())
|
|
.filter(Boolean)
|
|
}
|
|
|
|
function isExecutionContextDestroyed(error) {
|
|
const message = String(error?.message ?? error ?? '')
|
|
return message.includes('Execution context was destroyed')
|
|
|| message.includes('most likely because of a navigation')
|
|
}
|
|
|
|
async function installHoverProbe(page) {
|
|
await page.addInitScript(() => {
|
|
const globalKey = '__MARKSTREAM_HOVER_PROBE__'
|
|
if (globalThis[globalKey])
|
|
return
|
|
|
|
const state = {
|
|
mouseoverCount: 0,
|
|
mouseoutCount: 0,
|
|
lastTitle: '',
|
|
frameCount: 0,
|
|
maxFrameGap: 0,
|
|
maxTimerDrift: 0,
|
|
}
|
|
|
|
let lastFrameAt = performance.now()
|
|
const tick = (now) => {
|
|
state.frameCount += 1
|
|
state.maxFrameGap = Math.max(state.maxFrameGap, now - lastFrameAt)
|
|
lastFrameAt = now
|
|
requestAnimationFrame(tick)
|
|
}
|
|
requestAnimationFrame(tick)
|
|
|
|
let expectedTimerAt = performance.now() + 100
|
|
setInterval(() => {
|
|
const now = performance.now()
|
|
state.maxTimerDrift = Math.max(state.maxTimerDrift, Math.max(0, now - expectedTimerAt))
|
|
expectedTimerAt = now + 100
|
|
}, 100)
|
|
|
|
const resolveTarget = (value) => {
|
|
if (!(value instanceof Element))
|
|
return null
|
|
return value.closest('[title], a[href]')
|
|
}
|
|
|
|
document.addEventListener('mouseover', (event) => {
|
|
const target = resolveTarget(event.target)
|
|
if (!target)
|
|
return
|
|
state.mouseoverCount += 1
|
|
state.lastTitle = target.getAttribute('title') || target.getAttribute('href') || target.textContent || ''
|
|
}, true)
|
|
|
|
document.addEventListener('mouseout', (event) => {
|
|
const target = resolveTarget(event.target)
|
|
if (!target)
|
|
return
|
|
state.mouseoutCount += 1
|
|
}, true)
|
|
|
|
globalThis[globalKey] = state
|
|
})
|
|
}
|
|
|
|
async function readHoverProbe(page) {
|
|
return page.evaluate(() => {
|
|
const state = globalThis.__MARKSTREAM_HOVER_PROBE__ || {}
|
|
return {
|
|
mouseoverCount: Number(state.mouseoverCount || 0),
|
|
mouseoutCount: Number(state.mouseoutCount || 0),
|
|
lastTitle: String(state.lastTitle || ''),
|
|
frameCount: Number(state.frameCount || 0),
|
|
maxFrameGap: Number(state.maxFrameGap || 0),
|
|
maxTimerDrift: Number(state.maxTimerDrift || 0),
|
|
}
|
|
})
|
|
}
|
|
|
|
async function readHomeProgress(page) {
|
|
return page.evaluate(() => {
|
|
const text = document.querySelector('.meta')?.textContent?.trim() || ''
|
|
const match = text.match(/^(\d+)\s*\/\s*(\d+)\s*\((\d+)%\)$/)
|
|
const current = match ? Number.parseInt(match[1], 10) : 0
|
|
const total = match ? Number.parseInt(match[2], 10) : 0
|
|
const percent = match ? Number.parseInt(match[3], 10) : 0
|
|
return {
|
|
text,
|
|
current,
|
|
total,
|
|
percent,
|
|
done: total > 0 && current >= total && percent === 100,
|
|
}
|
|
})
|
|
}
|
|
|
|
async function readHomePlaceholderCount(page) {
|
|
return page.evaluate(() => {
|
|
const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0
|
|
const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0
|
|
return Array.from(document.querySelectorAll('.panel.preview .markstream-angular .node-placeholder'))
|
|
.filter((node) => {
|
|
const rect = node.getBoundingClientRect()
|
|
return rect.width > 0
|
|
&& rect.height > 0
|
|
&& rect.bottom > 0
|
|
&& rect.right > 0
|
|
&& rect.top < viewportHeight
|
|
&& rect.left < viewportWidth
|
|
})
|
|
.length
|
|
})
|
|
}
|
|
|
|
async function waitForProbeIncrement(page, key, previousValue, timeout = 1500) {
|
|
const startedAt = Date.now()
|
|
while (Date.now() - startedAt < timeout) {
|
|
const current = await readHoverProbe(page)
|
|
if (current[key] > previousValue)
|
|
return Date.now() - startedAt
|
|
await page.waitForTimeout(50)
|
|
}
|
|
throw new Error(`Timed out waiting for hover probe increment: ${key}`)
|
|
}
|
|
|
|
async function waitForHomeHoverTarget(page, timeout = 90000) {
|
|
const selector = '.panel.preview .markstream-angular [title], .panel.preview .markstream-angular a[href]'
|
|
const startedAt = Date.now()
|
|
|
|
while (Date.now() - startedAt < timeout) {
|
|
const locator = page.locator(selector).first()
|
|
if (await locator.count()) {
|
|
try {
|
|
if (await locator.isVisible())
|
|
return selector
|
|
}
|
|
catch {
|
|
// The preview re-renders while streaming; retry with a fresh locator.
|
|
}
|
|
}
|
|
await page.waitForTimeout(250)
|
|
}
|
|
|
|
throw new Error('Timed out waiting for a hoverable home preview target.')
|
|
}
|
|
|
|
async function exerciseHomeHoverDuringStreaming(page, selector) {
|
|
const samples = []
|
|
const startedAt = Date.now()
|
|
let maxPlaceholderCount = 0
|
|
|
|
while (Date.now() - startedAt < 180000) {
|
|
const progress = await readHomeProgress(page)
|
|
if (progress.done)
|
|
break
|
|
|
|
const before = await readHoverProbe(page)
|
|
const target = page.locator(selector).first()
|
|
await target.hover({ timeout: 3000 })
|
|
const overLatencyMs = await waitForProbeIncrement(page, 'mouseoverCount', before.mouseoverCount, 1500)
|
|
|
|
await page.mouse.move(8, 8)
|
|
const outLatencyMs = await waitForProbeIncrement(page, 'mouseoutCount', before.mouseoutCount, 1500)
|
|
const placeholderCount = await readHomePlaceholderCount(page)
|
|
maxPlaceholderCount = Math.max(maxPlaceholderCount, placeholderCount)
|
|
|
|
samples.push({
|
|
current: progress.current,
|
|
percent: progress.percent,
|
|
overLatencyMs,
|
|
outLatencyMs,
|
|
placeholderCount,
|
|
})
|
|
|
|
await page.waitForTimeout(1200)
|
|
}
|
|
|
|
const finalProbe = await readHoverProbe(page)
|
|
return {
|
|
interactionCount: samples.length,
|
|
maxOverLatencyMs: Math.max(0, ...samples.map(sample => sample.overLatencyMs)),
|
|
maxOutLatencyMs: Math.max(0, ...samples.map(sample => sample.outLatencyMs)),
|
|
maxPlaceholderCount,
|
|
finalProbe,
|
|
samples,
|
|
}
|
|
}
|
|
|
|
async function waitForHomeCompletion(page, timeout = 180000) {
|
|
await page.waitForFunction(() => {
|
|
const text = document.querySelector('.meta')?.textContent?.trim() || ''
|
|
const match = text.match(/^(\d+)\s*\/\s*(\d+)\s*\((\d+)%\)$/)
|
|
if (!match)
|
|
return false
|
|
const current = Number.parseInt(match[1], 10)
|
|
const total = Number.parseInt(match[2], 10)
|
|
const percent = Number.parseInt(match[3], 10)
|
|
return total > 0 && current >= total && percent === 100
|
|
}, { timeout })
|
|
}
|
|
|
|
async function collectHomeCompletionMetrics(page) {
|
|
return page.evaluate(() => {
|
|
const preview = document.querySelector('.panel.preview .markstream-angular')
|
|
const text = preview?.textContent || ''
|
|
const metaText = document.querySelector('.meta')?.textContent?.trim() || ''
|
|
return {
|
|
metaText,
|
|
textLength: text.length,
|
|
containsTaylor: text.includes('泰勒公式'),
|
|
containsOrthogonalComplement: text.includes('正交补空间'),
|
|
containsHelloWorldTail: text.includes('hello world'),
|
|
linkCount: document.querySelectorAll('.panel.preview .markstream-angular a').length,
|
|
katexCount: document.querySelectorAll('.panel.preview .markstream-angular .katex').length,
|
|
}
|
|
})
|
|
}
|
|
|
|
async function waitForHomeStreamingCodeHighlight(page, timeout = 180000) {
|
|
const startedAt = Date.now()
|
|
let lastSnapshot = null
|
|
|
|
while (Date.now() - startedAt < timeout) {
|
|
lastSnapshot = await page.evaluate(() => {
|
|
const text = document.querySelector('.meta')?.textContent?.trim() || ''
|
|
const match = text.match(/^(\d+)\s*\/\s*(\d+)\s*\((\d+)%\)$/)
|
|
const current = match ? Number.parseInt(match[1], 10) : 0
|
|
const total = match ? Number.parseInt(match[2], 10) : 0
|
|
const percent = match ? Number.parseInt(match[3], 10) : 0
|
|
return {
|
|
metaText: text,
|
|
current,
|
|
total,
|
|
percent,
|
|
done: total > 0 && current >= total && percent === 100,
|
|
monacoCount: document.querySelectorAll('.panel.preview .markstream-angular [data-markstream-monaco="1"]').length,
|
|
fallbackPreCount: document.querySelectorAll('.panel.preview .markstream-angular .code-fallback-plain').length,
|
|
}
|
|
})
|
|
|
|
if (lastSnapshot.monacoCount > 0)
|
|
return lastSnapshot
|
|
|
|
if (lastSnapshot.done)
|
|
return lastSnapshot
|
|
|
|
await page.waitForTimeout(400)
|
|
}
|
|
|
|
throw new Error(`Timed out waiting for a highlighted home code block: ${JSON.stringify(lastSnapshot)}`)
|
|
}
|
|
|
|
async function collectHomeThinkingMetrics(page) {
|
|
await page.waitForFunction(() => {
|
|
const text = document.querySelector('.meta')?.textContent?.trim() || ''
|
|
const match = text.match(/(\d+)\s*\/\s*(\d+)/)
|
|
return !!match && Number.parseInt(match[1], 10) >= 1000
|
|
}, { timeout: 30000 })
|
|
|
|
return page.evaluate(() => {
|
|
const content = document.querySelector('.thinking-node__content')
|
|
const text = content?.textContent || ''
|
|
return {
|
|
textLength: text.trim().length,
|
|
containsComprehensiveAnswer: text.includes('全面的回答'),
|
|
paragraphCount: content?.querySelectorAll('p').length || 0,
|
|
listCount: content?.querySelectorAll('li').length || 0,
|
|
}
|
|
})
|
|
}
|
|
|
|
async function collectHomeLinkTooltip(page) {
|
|
const link = page
|
|
.locator('.panel.preview .markstream-angular a.link-node[href="https://github.com/Simon-He95/markstream-vue"]')
|
|
.filter({ hasText: 'Star on GitHub' })
|
|
.first()
|
|
|
|
await link.waitFor({ state: 'visible', timeout: 30000 })
|
|
await link.hover()
|
|
await page.waitForFunction(() => {
|
|
const tooltip = document.querySelector('.ms-tooltip')
|
|
if (!tooltip)
|
|
return false
|
|
const style = window.getComputedStyle(tooltip)
|
|
const text = tooltip.textContent?.trim() || ''
|
|
return style.display !== 'none'
|
|
&& style.visibility !== 'hidden'
|
|
&& Number(style.opacity || '1') > 0.05
|
|
&& text.includes('https://github.com/Simon-He95/markstream-vue')
|
|
}, { timeout: 10000 })
|
|
|
|
return page.evaluate(() => {
|
|
const tooltip = document.querySelector('.ms-tooltip')
|
|
const style = tooltip ? window.getComputedStyle(tooltip) : null
|
|
return {
|
|
text: tooltip?.textContent?.trim() || '',
|
|
visible: Boolean(
|
|
tooltip
|
|
&& style
|
|
&& style.display !== 'none'
|
|
&& style.visibility !== 'hidden'
|
|
&& Number(style.opacity || '1') > 0.05,
|
|
),
|
|
}
|
|
})
|
|
}
|
|
|
|
async function waitForStableEnhancements(page) {
|
|
await page.waitForSelector('.preview-surface .katex', { timeout: 30000 })
|
|
await page.waitForSelector('.preview-surface .markstream-angular-mermaid svg', { timeout: 30000 })
|
|
await page.waitForSelector('.preview-surface [data-markstream-infographic="1"] svg', { timeout: 30000 })
|
|
await page.waitForSelector('.preview-surface [data-markstream-d2="1"] svg', { timeout: 30000 })
|
|
}
|
|
|
|
async function collectBaselineMetrics(page) {
|
|
return page.evaluate(() => ({
|
|
katexCount: document.querySelectorAll('.preview-surface .katex').length,
|
|
mermaidSvgCount: document.querySelectorAll('.preview-surface .markstream-angular-mermaid svg').length,
|
|
infographicSvgCount: document.querySelectorAll('.preview-surface [data-markstream-infographic="1"] svg').length,
|
|
d2SvgCount: document.querySelectorAll('.preview-surface [data-markstream-d2="1"] svg').length,
|
|
}))
|
|
}
|
|
|
|
async function verifyBaselineInteractions(page) {
|
|
const mermaidBlock = page.locator('.preview-surface .mermaid-block').first()
|
|
await mermaidBlock.getByRole('button', { name: 'Source' }).click()
|
|
await page.waitForSelector('.preview-surface .mermaid-block .mermaid-source', { timeout: 10000 })
|
|
await mermaidBlock.getByRole('button', { name: 'Preview' }).click()
|
|
await page.waitForSelector('.preview-surface .mermaid-block .markstream-angular-mermaid svg', { timeout: 10000 })
|
|
await mermaidBlock.getByRole('button', { name: 'Fullscreen' }).click()
|
|
await page.waitForSelector('.mermaid-modal-overlay', { timeout: 10000 })
|
|
await page.getByRole('button', { name: 'Close' }).click()
|
|
await page.waitForSelector('.mermaid-modal-overlay', { state: 'hidden', timeout: 10000 })
|
|
|
|
const d2Block = page.locator('.preview-surface [data-markstream-d2="1"]').first()
|
|
await d2Block.getByRole('button', { name: 'Source' }).click()
|
|
await page.waitForFunction(() => {
|
|
const block = document.querySelector('.preview-surface [data-markstream-d2="1"]')
|
|
return block?.getAttribute('data-mode') === 'source'
|
|
}, { timeout: 10000 })
|
|
await d2Block.getByRole('button', { name: 'Preview' }).click()
|
|
await page.waitForFunction(() => {
|
|
const block = document.querySelector('.preview-surface [data-markstream-d2="1"]')
|
|
return block?.getAttribute('data-mode') === 'preview'
|
|
}, { timeout: 10000 })
|
|
|
|
const infographicBlock = page.locator('.preview-surface [data-markstream-infographic="1"]').first()
|
|
await infographicBlock.getByRole('button', { name: 'Source' }).click()
|
|
await page.waitForFunction(() => {
|
|
const block = document.querySelector('.preview-surface [data-markstream-infographic="1"]')
|
|
return block?.getAttribute('data-mode') === 'source'
|
|
}, { timeout: 10000 })
|
|
await infographicBlock.getByRole('button', { name: 'Preview' }).click()
|
|
await page.waitForFunction(() => {
|
|
const block = document.querySelector('.preview-surface [data-markstream-infographic="1"]')
|
|
return block?.getAttribute('data-mode') === 'preview'
|
|
}, { timeout: 10000 })
|
|
}
|
|
|
|
async function collectDiffMetrics(page) {
|
|
return page.evaluate(() => ({
|
|
wrapperCount: document.querySelectorAll('.preview-surface [data-markstream-monaco="1"]').length,
|
|
monacoCount: document.querySelectorAll('.preview-surface [data-markstream-monaco="1"] .monaco-editor').length,
|
|
monacoDiffCount: document.querySelectorAll('.preview-surface [data-markstream-monaco="1"] .monaco-diff-editor').length,
|
|
badgeTexts: Array.from(document.querySelectorAll('.preview-surface .markstream-angular-enhanced-block__badge'))
|
|
.map(node => node.textContent?.trim())
|
|
.filter(Boolean),
|
|
}))
|
|
}
|
|
|
|
async function verifyDiffInteractions(page) {
|
|
const diffBlock = page.locator('.preview-surface [data-markstream-monaco-diff="1"]').first()
|
|
await diffBlock.locator('button[title="Collapse"]').first().click()
|
|
await page.waitForFunction(() => {
|
|
const body = document.querySelector('.preview-surface [data-markstream-monaco-diff="1"] .code-block-body')
|
|
return body?.classList.contains('code-block-body--collapsed') === true
|
|
}, { timeout: 10000 })
|
|
await diffBlock.locator('button[title="Expand"]').first().click()
|
|
await page.waitForFunction(() => {
|
|
const body = document.querySelector('.preview-surface [data-markstream-monaco-diff="1"] .code-block-body')
|
|
return body?.classList.contains('code-block-body--collapsed') === false
|
|
}, { timeout: 10000 })
|
|
await diffBlock.locator('button[title="Copy"]').first().click()
|
|
await page.waitForFunction(() => {
|
|
const live = document.querySelector('.preview-surface [data-markstream-monaco-diff="1"] [role="status"]')
|
|
return live?.textContent?.includes('Copied')
|
|
}, { timeout: 10000 })
|
|
}
|
|
|
|
async function collectThinkingMetrics(page) {
|
|
return page.evaluate(() => ({
|
|
thinkingCount: document.querySelectorAll('.preview-surface .thinking-node').length,
|
|
mermaidSvgCount: document.querySelectorAll('.preview-surface .thinking-node .markstream-angular-mermaid svg').length,
|
|
monacoCount: document.querySelectorAll('.preview-surface .thinking-node [data-markstream-monaco="1"]').length,
|
|
listCount: document.querySelectorAll('.preview-surface .thinking-node li').length,
|
|
previewExcerpt: (document.querySelector('.preview-surface')?.textContent || '').slice(0, 500),
|
|
}))
|
|
}
|
|
|
|
async function collectThinkingDebug(page) {
|
|
return page.evaluate(() => ({
|
|
thinkingHtml: (document.querySelector('.preview-surface .thinking-node')?.innerHTML || '').slice(0, 8000),
|
|
blockCount: document.querySelectorAll('.preview-surface .thinking-node .mermaid-block').length,
|
|
blockHtml: (document.querySelector('.preview-surface .thinking-node .mermaid-block')?.outerHTML || '').slice(0, 4000),
|
|
sourceCount: document.querySelectorAll('.preview-surface .thinking-node .mermaid-source').length,
|
|
previewCount: document.querySelectorAll('.preview-surface .thinking-node .mermaid-preview').length,
|
|
hostCount: document.querySelectorAll('.preview-surface .thinking-node .markstream-angular-mermaid').length,
|
|
stage: document.querySelector('.preview-surface .thinking-node .mermaid-block')?.getAttribute('data-stage'),
|
|
errorTexts: Array.from(document.querySelectorAll('.preview-surface .thinking-node .mermaid-error'))
|
|
.map(node => node.textContent?.trim())
|
|
.filter(Boolean),
|
|
}))
|
|
}
|
|
|
|
async function waitForDiffEditors(page, timeout = 60000) {
|
|
const startedAt = Date.now()
|
|
let lastSnapshot = null
|
|
|
|
while (Date.now() - startedAt < timeout) {
|
|
lastSnapshot = await page.evaluate(() => ({
|
|
wrapperCount: document.querySelectorAll('.preview-surface [data-markstream-monaco="1"]').length,
|
|
monacoCount: document.querySelectorAll('.preview-surface [data-markstream-monaco="1"] .monaco-editor').length,
|
|
badgeTexts: Array.from(document.querySelectorAll('.preview-surface .markstream-angular-enhanced-block__badge'))
|
|
.map(node => node.textContent?.trim())
|
|
.filter(Boolean),
|
|
previewExcerpt: (document.querySelector('.preview-surface')?.textContent || '').slice(0, 500),
|
|
textareaExcerpt: (((document.querySelector('textarea') && 'value' in document.querySelector('textarea'))
|
|
? document.querySelector('textarea').value
|
|
: '') || '').slice(0, 160),
|
|
}))
|
|
|
|
if (lastSnapshot.wrapperCount >= 2 && lastSnapshot.monacoCount >= 2)
|
|
return lastSnapshot
|
|
|
|
await page.waitForTimeout(1000)
|
|
}
|
|
|
|
throw new Error(`Timed out waiting for diff Monaco blocks: ${JSON.stringify(lastSnapshot)}`)
|
|
}
|
|
|
|
async function collectStressMetrics(page) {
|
|
return page.evaluate(() => ({
|
|
tableCount: document.querySelectorAll('.preview-surface table').length,
|
|
detailsCount: document.querySelectorAll('.preview-surface details').length,
|
|
summaryCount: document.querySelectorAll('.preview-surface summary').length,
|
|
blockquoteCount: document.querySelectorAll('.preview-surface blockquote').length,
|
|
previewExcerpt: (document.querySelector('.preview-surface')?.textContent || '').slice(0, 500),
|
|
}))
|
|
}
|
|
|
|
async function collectStreamingMetrics(page) {
|
|
const progressNode = page.locator('.hero-panel__metrics .metric-card').nth(3).locator('strong')
|
|
const readProgress = async () => {
|
|
const text = (await progressNode.textContent()).trim()
|
|
return Number.parseInt(text.replace(/\D/g, ''), 10)
|
|
}
|
|
|
|
await page.getByRole('button', { name: '开始流式渲染' }).click()
|
|
await page.waitForFunction(() => {
|
|
const pill = document.querySelectorAll('.workspace-card .mini-pill')[1]
|
|
const foot = document.querySelectorAll('.workspace-card__foot span')[3]
|
|
return pill?.textContent?.trim() === 'Streaming'
|
|
&& foot?.textContent?.includes('正在逐步追加中')
|
|
}, { timeout: 10000 })
|
|
|
|
const earlyProgress = await readProgress()
|
|
|
|
await page.waitForFunction(() => {
|
|
const progress = document.querySelectorAll('.hero-panel__metrics .metric-card strong')[3]
|
|
const pill = document.querySelectorAll('.workspace-card .mini-pill')[1]
|
|
const foot = document.querySelectorAll('.workspace-card__foot span')[3]
|
|
return progress?.textContent?.trim() === '100%'
|
|
&& pill?.textContent?.trim() === 'Ready'
|
|
&& foot?.textContent?.includes('已显示完整输入')
|
|
}, { timeout: 30000 })
|
|
|
|
return {
|
|
earlyProgress,
|
|
finalProgress: await readProgress(),
|
|
}
|
|
}
|
|
|
|
async function collectHomeStreamingHealth(page, initialMetaText) {
|
|
let previousMetaText = initialMetaText
|
|
|
|
for (let attempt = 0; attempt < 3; attempt += 1) {
|
|
try {
|
|
await page.waitForFunction((previous) => {
|
|
const meta = document.querySelector('.meta')
|
|
return !!meta && meta.textContent?.trim() !== previous
|
|
}, previousMetaText, { timeout: 20000 })
|
|
|
|
return await page.evaluate(() => new Promise((resolve) => {
|
|
let frameCount = 0
|
|
const startedAt = performance.now()
|
|
const tick = (now) => {
|
|
frameCount += 1
|
|
if (now - startedAt >= 800) {
|
|
resolve({
|
|
frameCount,
|
|
metaText: document.querySelector('.meta')?.textContent?.trim() || '',
|
|
})
|
|
return
|
|
}
|
|
requestAnimationFrame(tick)
|
|
}
|
|
requestAnimationFrame(tick)
|
|
}))
|
|
}
|
|
catch (error) {
|
|
if (!isExecutionContextDestroyed(error) || attempt === 2)
|
|
throw error
|
|
|
|
await page.waitForLoadState('domcontentloaded', { timeout: 30000 }).catch(() => {})
|
|
await page.waitForSelector('.meta', { timeout: 30000 })
|
|
previousMetaText = (await page.locator('.meta').textContent().catch(() => initialMetaText)).trim()
|
|
}
|
|
}
|
|
|
|
throw new Error('Unable to collect home streaming health after navigation retries')
|
|
}
|
|
|
|
async function main() {
|
|
const port = await findFreePort()
|
|
const server = startDevServer(port)
|
|
|
|
try {
|
|
await waitForPort(port)
|
|
|
|
const browser = await chromium.launch(resolveChromeLaunchOptions())
|
|
const page = await browser.newPage({ viewport: { width: 1440, height: 1600 } })
|
|
await installHoverProbe(page)
|
|
const consoleErrors = []
|
|
const pageErrors = []
|
|
|
|
page.on('console', (msg) => {
|
|
if (msg.type() === 'error')
|
|
consoleErrors.push(msg.text())
|
|
})
|
|
page.on('pageerror', error => pageErrors.push(String(error)))
|
|
|
|
const homeUrl = `http://${host}:${port}/`
|
|
await page.goto(homeUrl, { waitUntil: 'domcontentloaded' })
|
|
await page.waitForSelector('text=markstream-angular playground', { timeout: 30000 })
|
|
await page.waitForSelector('text=Open /test', { timeout: 30000 })
|
|
|
|
const homeProgressText = (await page.locator('.meta').textContent()).trim()
|
|
const homeStreamingHealth = await collectHomeStreamingHealth(page, homeProgressText)
|
|
const homeHoverSelector = await waitForHomeHoverTarget(page)
|
|
const homeStreamingCodeHighlight = await waitForHomeStreamingCodeHighlight(page)
|
|
const homeHoverDuringStreaming = await exerciseHomeHoverDuringStreaming(page, homeHoverSelector)
|
|
const homeThinking = await collectHomeThinkingMetrics(page)
|
|
const homeLinkTooltip = await collectHomeLinkTooltip(page)
|
|
await waitForHomeCompletion(page)
|
|
const homeCompletion = await collectHomeCompletionMetrics(page)
|
|
await page.getByRole('button', { name: 'Open /test' }).click()
|
|
await page.waitForURL(new RegExp(`http://${host}:${port}/test$`), { timeout: 15000 })
|
|
await page.waitForSelector('text=markstream-angular /test', { timeout: 30000 })
|
|
|
|
await waitForStableEnhancements(page)
|
|
const baseline = await collectBaselineMetrics(page)
|
|
await verifyBaselineInteractions(page)
|
|
|
|
await page.getByRole('button', { name: 'Thinking 嵌套重节点' }).click()
|
|
await page.waitForSelector('.preview-surface .thinking-node', { timeout: 20000 })
|
|
try {
|
|
await page.waitForSelector('.preview-surface .thinking-node .markstream-angular-mermaid svg', { timeout: 30000 })
|
|
}
|
|
catch (error) {
|
|
const thinkingDebug = await collectThinkingDebug(page)
|
|
throw new Error(`Timed out waiting for thinking Mermaid render: ${JSON.stringify(thinkingDebug)}`, { cause: error })
|
|
}
|
|
await page.waitForSelector('.preview-surface .thinking-node [data-markstream-monaco="1"]', { timeout: 30000 })
|
|
const thinking = await collectThinkingMetrics(page)
|
|
|
|
await page.getByRole('button', { name: 'Diff 与代码流' }).click()
|
|
await waitForDiffEditors(page)
|
|
const diff = await collectDiffMetrics(page)
|
|
await verifyDiffInteractions(page)
|
|
|
|
await page.getByRole('button', { name: '结构压力' }).click()
|
|
await page.waitForSelector('.preview-surface table', { timeout: 20000 })
|
|
await page.waitForFunction(() => {
|
|
return document.querySelectorAll('.preview-surface details').length >= 1
|
|
&& document.querySelectorAll('.preview-surface summary').length >= 1
|
|
}, { timeout: 20000 })
|
|
const stress = await collectStressMetrics(page)
|
|
const streaming = await collectStreamingMetrics(page)
|
|
|
|
await page.getByRole('button', { name: '返回主 demo' }).click()
|
|
await page.waitForURL(new RegExp(`http://${host}:${port}/$`), { timeout: 15000 })
|
|
await page.waitForSelector('text=markstream-angular playground', { timeout: 30000 })
|
|
|
|
const screenshot = '/tmp/markstream-angular-playground-e2e.png'
|
|
await page.screenshot({ path: screenshot, fullPage: true })
|
|
await browser.close()
|
|
|
|
const result = {
|
|
homeUrl,
|
|
homeProgressText,
|
|
homeStreamingHealth,
|
|
homeHoverDuringStreaming,
|
|
homeThinking,
|
|
homeLinkTooltip,
|
|
homeStreamingCodeHighlight,
|
|
homeCompletion,
|
|
baseline,
|
|
thinking,
|
|
diff,
|
|
stress,
|
|
streaming,
|
|
consoleErrors: summarizeErrors(consoleErrors),
|
|
pageErrors: summarizeErrors(pageErrors),
|
|
screenshot,
|
|
}
|
|
|
|
console.log(JSON.stringify(result, null, 2))
|
|
|
|
if (result.consoleErrors.length > 0 || result.pageErrors.length > 0) {
|
|
throw new Error(`Unexpected browser errors: console=${result.consoleErrors.length}, page=${result.pageErrors.length}`)
|
|
}
|
|
if (result.homeStreamingHealth.frameCount < 20 || result.homeStreamingHealth.metaText === result.homeProgressText) {
|
|
throw new Error(`Home page became unresponsive while streaming: ${JSON.stringify(result.homeStreamingHealth)}`)
|
|
}
|
|
if (result.homeCompletion.metaText !== '11268 / 11268 (100%)') {
|
|
throw new Error(`Home page did not reach full completion: ${JSON.stringify(result.homeCompletion)}`)
|
|
}
|
|
if (!result.homeCompletion.containsTaylor || !result.homeCompletion.containsOrthogonalComplement || !result.homeCompletion.containsHelloWorldTail) {
|
|
throw new Error(`Home page final content is missing expected sections: ${JSON.stringify(result.homeCompletion)}`)
|
|
}
|
|
if (result.homeCompletion.katexCount < 10) {
|
|
throw new Error(`Home page did not keep KaTeX refreshed through the full stream: ${JSON.stringify(result.homeCompletion)}`)
|
|
}
|
|
if (
|
|
result.homeHoverDuringStreaming.interactionCount < 3
|
|
|| result.homeHoverDuringStreaming.maxOverLatencyMs > 1200
|
|
|| result.homeHoverDuringStreaming.maxOutLatencyMs > 1200
|
|
|| result.homeHoverDuringStreaming.maxPlaceholderCount > 0
|
|
|| result.homeHoverDuringStreaming.finalProbe.mouseoverCount < result.homeHoverDuringStreaming.interactionCount
|
|
|| result.homeHoverDuringStreaming.finalProbe.mouseoutCount < result.homeHoverDuringStreaming.interactionCount
|
|
) {
|
|
throw new Error(`Home hover probe was sluggish while streaming: ${JSON.stringify(result.homeHoverDuringStreaming)}`)
|
|
}
|
|
if (
|
|
result.homeThinking.textLength < 200
|
|
|| !result.homeThinking.containsComprehensiveAnswer
|
|
|| result.homeThinking.paragraphCount < 2
|
|
) {
|
|
throw new Error(`Home thinking stream did not keep nested content expanded: ${JSON.stringify(result.homeThinking)}`)
|
|
}
|
|
if (!result.homeLinkTooltip.visible || !result.homeLinkTooltip.text.includes('https://github.com/Simon-He95/markstream-vue')) {
|
|
throw new Error(`Home link tooltip did not match the shared singleton behavior: ${JSON.stringify(result.homeLinkTooltip)}`)
|
|
}
|
|
if (result.homeStreamingCodeHighlight.monacoCount < 1 || result.homeStreamingCodeHighlight.done) {
|
|
throw new Error(`Home code blocks did not enter highlighted mode before stream completion: ${JSON.stringify(result.homeStreamingCodeHighlight)}`)
|
|
}
|
|
if (baseline.katexCount < 1 || baseline.mermaidSvgCount < 1 || baseline.infographicSvgCount < 1 || baseline.d2SvgCount < 1) {
|
|
throw new Error(`Baseline enhancements did not all render: ${JSON.stringify(baseline)}`)
|
|
}
|
|
if (thinking.thinkingCount < 1 || thinking.mermaidSvgCount < 1 || thinking.monacoCount < 1 || thinking.listCount < 2) {
|
|
throw new Error(`Thinking sample did not render nested heavy nodes as expected: ${JSON.stringify(thinking)}`)
|
|
}
|
|
if (diff.wrapperCount < 2 || diff.monacoCount < 2) {
|
|
throw new Error(`Diff sample did not mount Monaco editors as expected: ${JSON.stringify(diff)}`)
|
|
}
|
|
if (stress.tableCount < 1 || stress.detailsCount < 1 || stress.summaryCount < 1) {
|
|
throw new Error(`Stress sample missed expected structural nodes: ${JSON.stringify(stress)}`)
|
|
}
|
|
if (!(streaming.earlyProgress > 0 && streaming.earlyProgress < 100) || streaming.finalProgress !== 100) {
|
|
throw new Error(`Streaming progress did not behave as expected: ${JSON.stringify(streaming)}`)
|
|
}
|
|
}
|
|
catch (error) {
|
|
const recentLogs = server.getLogs().trim()
|
|
if (recentLogs) {
|
|
console.error('--- playground-angular recent logs ---')
|
|
console.error(recentLogs)
|
|
console.error('--- end playground-angular recent logs ---')
|
|
}
|
|
throw error
|
|
}
|
|
finally {
|
|
killProcessTree(server.child)
|
|
}
|
|
}
|
|
|
|
main()
|
|
.then(() => {
|
|
process.exit(0)
|
|
})
|
|
.catch((error) => {
|
|
console.error(error)
|
|
process.exit(1)
|
|
})
|