import fs from 'node:fs'; import assert from 'node:assert/strict'; import { chromium, expect } from '@playwright/test'; import { login, call } from './role-permissions-live.mjs'; const output = 'reports/virtual-floating-preparation-20260913'; fs.mkdirSync(output, { recursive: true }); const session = await login('root'); const task = await call('tran/v1/teaching/assignments/81', session.accessToken); assert.equal(task.status, 200); const browser = await chromium.launch({ channel: 'msedge', headless: true, args: ['--enable-unsafe-swiftshader'] }); const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } }); await context.addInitScript(s => { sessionStorage.setItem('unreal-tran:web:access-token:v1', s.accessToken); sessionStorage.setItem('unreal-tran:web:refresh-token:v1', s.refreshToken); localStorage.setItem('unreal-tran:web:preferences:v1', JSON.stringify({ themeMode: 'military' })); }, session); const page = await context.newPage(), checks = [], pageErrors = []; page.on('pageerror', error => pageErrors.push(error.message)); const checked = name => { checks.push({ name, pass: true }); console.log('PASS', name); }; const diagnostic = () => page.evaluate(() => globalThis.__trainingSceneDiagnostics?.()); try { await page.goto('http://127.0.0.1:6180/teaching/virtual-training/preview/81'); await expect.poll(async () => Boolean((await diagnostic())?.publishedContentMounted), { timeout: 90000 }).toBe(true); const panel = page.locator('.training-server-preparation'); await expect(panel).not.toBeVisible(); await expect(page.locator('[data-role="instruction"]')).toContainText('操作准备'); await expect(page.locator('[data-role="instruction"]')).toContainText('数字压力表'); await expect(page.locator('[data-open-preparation]')).toBeVisible(); await page.locator('[data-open-preparation]').click(); await expect(panel).toHaveAttribute('open', ''); assert.equal(await page.locator('.training-steps-panel .training-server-preparation').count(), 0); for (const size of [{width:1920,height:1080},{width:1440,height:900},{width:1366,height:768}]) { await page.setViewportSize(size); await page.waitForTimeout(300); const bounds = await page.evaluate(() => { const rect = selector => { const r=document.querySelector(selector).getBoundingClientRect(); return {x:r.x,y:r.y,width:r.width,height:r.height,right:r.right,bottom:r.bottom}; }; return {panel:rect('.training-server-preparation'), canvas:rect('.training-viewport'), left:rect('.training-steps-panel'), header:rect('.training-header'), dock:rect('.training-operation-dock'), footer:rect('.training-bottom-bar')}; }); assert.ok(bounds.left.width <= 220); assert.ok(bounds.header.height <= 46); assert.ok(bounds.footer.height <= 36); assert.ok(bounds.panel.x >= bounds.canvas.x && bounds.panel.right <= bounds.canvas.right); assert.ok(bounds.panel.y >= bounds.canvas.y && bounds.panel.bottom < bounds.dock.y); assert.ok(bounds.canvas.bottom <= size.height, '3D viewport stays within screen'); assert.ok(bounds.footer.bottom <= size.height, 'Bottom actions stay within screen'); await panel.locator('[data-measurement]').fill('浮窗收起与尺寸切换保留输入'); await panel.locator('[data-close-preparation]').click(); await expect(panel).not.toBeVisible(); await page.screenshot({path:`${output}/workspace-${size.width}.png`,fullPage:true}); await page.locator('[data-open-preparation]').click(); await expect(panel.locator('[data-measurement]')).toHaveValue('浮窗收起与尺寸切换保留输入'); const summary = await panel.locator('summary').boundingBox(), floating = await panel.boundingBox(); assert.ok(summary.y >= floating.y && summary.y + summary.height <= floating.y + floating.height, 'Floating header stays visible after textarea scroll'); await page.screenshot({path:`${output}/floating-${size.width}.png`,fullPage:true}); checked(`${size.width}×${size.height}: compact layout, floating window stays inside viewport, input survives closing`); } await panel.locator('[data-measurement]').fill(''); await panel.locator('[data-measurement]').press('Escape'); await expect(panel).not.toBeVisible(); await expect(page.locator('[data-open-preparation]')).toBeFocused(); await page.locator('[data-open-preparation]').click(); checked('Preparation starts collapsed, opens inside 3D area, and Escape returns focus'); const clickTarget = async () => { await page.locator('[data-action="toggle-issue-highlight"]').click(); await page.waitForTimeout(700); const d = await diagnostic(), box = await page.locator('canvas.training-canvas').boundingBox(); assert.ok(d.framing.targetOnScreen?.insideCanvas); await page.mouse.click(box.x + d.framing.targetOnScreen.localX, box.y + d.framing.targetOnScreen.localY + 38); }; await panel.locator('summary').click(); await page.waitForTimeout(4500); await clickTarget(); await expect(page.locator('.el-message--warning')).toBeVisible({ timeout: 10000 }); await expect(panel).toHaveAttribute('open', ''); await expect(page.locator('.el-message')).toHaveCount(1); await expect(page.locator('.training-feedback.is-visible.is-error')).toHaveCount(0); await expect(page.locator('.el-message')).not.toContainText('尚未执行实际三维操作'); assert.equal((await diagnostic()).server.completed.length, 0); await page.screenshot({ path: `${output}/preparation-required.png`, fullPage: true }); checked('Missing preparation opens controls, emits one accurate warning, and does not advance'); const raw = task.data.definitionSnapshot.steps[0]; await panel.locator(`[data-tool="${raw.toolId}"]`).check(); for (const checkbox of await panel.locator('[data-safety]').all()) await checkbox.check(); await panel.locator('[data-measurement]').fill('测试观察记录：液压压力归零，个人防护齐全，危险区域无人员。'); await panel.locator('[data-save-preparation]').click(); await expect(panel.locator('[data-save-status]')).toContainText('本次预览'); await panel.locator('summary').click(); const validated = page.waitForResponse(response => response.url().includes('/preview/validate') && response.request().method() === 'POST'); await clickTarget(); const response = await validated; assert.equal(response.status(), 200); await expect.poll(async () => (await diagnostic()).server.completed.length).toBe(1); await expect(page.locator('[data-action="next"]')).toBeEnabled(); await page.screenshot({ path: `${output}/step-completed.png`, fullPage: true }); checked('Prepared truck target click passes real preview validation and enables next step'); await page.locator('[data-action="next"]').click(); await expect(panel).not.toBeVisible(); await page.locator('[data-open-preparation]').click(); await expect(panel).toHaveAttribute('open', ''); await expect(panel.locator('b').first()).toContainText(task.data.definitionSnapshot.steps[1].title); await expect(panel.locator('[data-tool]').first()).not.toBeChecked(); checked('Next step keeps viewport clear and provides fresh preparation without previous confirmations'); await page.evaluate(() => { document.documentElement.classList.add('dark'); document.documentElement.dataset.theme = 'dark'; document.documentElement.dataset.colorTheme = 'dark'; document.documentElement.style.colorScheme = 'dark'; }); const colors = await panel.locator('[data-save-preparation]').evaluate(button => { const style = getComputedStyle(button); return {color:style.color,background:style.backgroundColor}; }); assert.notEqual(colors.color, colors.background); assert.equal(colors.color, 'rgb(5, 34, 30)', 'Dark theme uses dark text on mint action buttons'); await expect(panel.locator('summary')).toBeVisible(); await page.screenshot({path:`${output}/floating-dark.png`,fullPage:true}); checked('Dark theme floating controls use readable surface and button colors'); assert.deepEqual(pageErrors, []); } catch (error) { await page.screenshot({ path: `${output}/failure.png`, fullPage: true }); throw error; } finally { fs.writeFileSync(`${output}/checks.json`, JSON.stringify({ checks, pageErrors }, null, 2)); const escape = value => String(value).replace(/[&<>"']/g, ch => ({ '&':'&', '<':'<', '>':'>', '"':'"', "'":''' }[ch])); fs.writeFileSync(`${output}/index.html`, `虚拟仿真浮窗与空间布局验证

虚拟仿真浮窗与空间布局验证

2026-09-13 · 本地 6180 前端与真实教学接口 · 内部维护账号 · 任务 81 教员预览。未创建教学任务或学员成绩。

共 ${checks.length} 项通过；页面运行错误 ${pageErrors.length} 项。本报告记录本轮实际完成的浏览器检查，未写入学员成绩。

操作顺序

打开操作准备 → 选择数字压力表 → 确认本步安全条件 → 填写测量观察记录 → 保存准备记录 → 点击高亮卡车模型 → 下一步。测量记录应按实际观察填写。

${['workspace-1920','floating-1920','workspace-1440','floating-1440','workspace-1366','floating-1366','preparation-required','step-completed'].map(name=>`

${name}

${name}`).join('')}`); await browser.close(); }