feat: rebuild warm operations workbench
This commit is contained in:
Codex
+523
-38
@@ -2,7 +2,7 @@
|
||||
|
||||
import assert from 'node:assert/strict';
|
||||
import { spawn } from 'node:child_process';
|
||||
import { mkdtemp, readFile, rm } from 'node:fs/promises';
|
||||
import { mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
|
||||
import { createServer as createHttpServer } from 'node:http';
|
||||
import { tmpdir } from 'node:os';
|
||||
import { extname, join } from 'node:path';
|
||||
@@ -17,15 +17,63 @@ const DIST = fileURLToPath(new URL('../apps/web/dist/', import.meta.url));
|
||||
const CLEAN_DIST = process.argv.includes('--clean-dist');
|
||||
const FORBIDDEN_PORT = 8788;
|
||||
const EXTERNAL_ORIGIN = parseExternalE2eOrigin(process.env.E2E_ORIGIN);
|
||||
const SCREENSHOT_DIR = process.env.E2E_SCREENSHOT_DIR?.trim();
|
||||
const FLEET_FIXTURE = process.env.E2E_FLEET_FIXTURE !== '0';
|
||||
|
||||
const CHROME_CANDIDATES = [
|
||||
process.env.CHROME_BIN,
|
||||
'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
|
||||
'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
|
||||
'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
|
||||
'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
|
||||
'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
|
||||
'/Applications/Chromium.app/Contents/MacOS/Chromium',
|
||||
'/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary',
|
||||
].filter(Boolean);
|
||||
|
||||
const EMPTY_PAGE = { items: [], page: { page: 1, pageSize: 25, total: 0 } };
|
||||
const SCHEDULE_FIXTURE = {
|
||||
id: 'morning-restart',
|
||||
name: '每日服务重启',
|
||||
operationType: 'restart-service',
|
||||
cronExpression: '0 4 * * *',
|
||||
timezone: 'Asia/Shanghai',
|
||||
targetSelector: { mode: 'tags', match: 'all', tags: ['核心', '5G'] },
|
||||
misfirePolicy: 'skip',
|
||||
overlapPolicy: 'skip',
|
||||
retryPolicy: { maxRetries: 1, intervalSeconds: 60 },
|
||||
enabled: true,
|
||||
version: 3,
|
||||
createdBy: 'operator',
|
||||
updatedBy: 'operator',
|
||||
createdAt: '2026-07-30T00:00:00.000Z',
|
||||
updatedAt: '2026-07-30T00:00:00.000Z',
|
||||
nextDueAt: '2026-07-30T20:00:00.000Z',
|
||||
};
|
||||
const FLEET_FIXTURE_ITEMS = [
|
||||
{
|
||||
id: 'edge-north',
|
||||
name: 'Edge North',
|
||||
origin: 'http://10.0.0.21',
|
||||
tags: ['核心', '5G'],
|
||||
revision: 4,
|
||||
},
|
||||
{ id: 'lab-backup', name: 'Lab Backup', origin: 'http://10.0.0.22', tags: ['备用'], revision: 2 },
|
||||
{
|
||||
id: 'harbour-gateway',
|
||||
name: 'Harbour Gateway',
|
||||
origin: 'http://10.0.0.23',
|
||||
tags: ['香港', '公网'],
|
||||
revision: 7,
|
||||
},
|
||||
{
|
||||
id: 'field-unit',
|
||||
name: 'Field Unit 07',
|
||||
origin: 'http://10.0.0.24',
|
||||
tags: ['外场'],
|
||||
revision: 3,
|
||||
},
|
||||
];
|
||||
|
||||
async function builtAssetHandler(request, response) {
|
||||
const pathname = new URL(request.url ?? '/', 'http://e2e.local').pathname;
|
||||
@@ -35,8 +83,45 @@ async function builtAssetHandler(request, response) {
|
||||
return;
|
||||
}
|
||||
let body;
|
||||
if (pathname === '/api/v1/instances') body = EMPTY_PAGE;
|
||||
if (pathname === '/api/v1/jobs' || pathname === '/api/v1/audit') body = EMPTY_PAGE;
|
||||
if (pathname === '/api/v1/auth/status')
|
||||
body = { configured: false, protectionEnabled: false, authenticated: false };
|
||||
if (pathname === '/api/v1/instances')
|
||||
body = FLEET_FIXTURE
|
||||
? {
|
||||
items: FLEET_FIXTURE_ITEMS,
|
||||
page: { page: 1, pageSize: 25, total: FLEET_FIXTURE_ITEMS.length },
|
||||
}
|
||||
: EMPTY_PAGE;
|
||||
if (FLEET_FIXTURE && /^\/api\/v1\/instances\/[^/]+\/resources$/u.test(pathname)) {
|
||||
const fixtureIndex = FLEET_FIXTURE_ITEMS.findIndex((item) => pathname.includes(item.id));
|
||||
body = {
|
||||
version: `2.4.${Math.max(0, fixtureIndex)}`,
|
||||
cpuPercent: [24, 61, 38, 76][Math.max(0, fixtureIndex)],
|
||||
memoryPercent: [52, 43, 68, 71][Math.max(0, fixtureIndex)],
|
||||
maxTemperatureCelsius: [42, 47, 44, 58][Math.max(0, fixtureIndex)],
|
||||
phoneNumbers: [`+852 5550 10${Math.max(0, fixtureIndex)}`],
|
||||
};
|
||||
}
|
||||
if (FLEET_FIXTURE && /^\/api\/v1\/instances\/[^/]+\/messages$/u.test(pathname))
|
||||
body = { messages: [] };
|
||||
if (
|
||||
pathname === '/api/v1/jobs' ||
|
||||
pathname === '/api/v1/audit' ||
|
||||
pathname === '/api/v1/automation/runs'
|
||||
)
|
||||
body = EMPTY_PAGE;
|
||||
if (pathname === '/api/v1/automation/schedules')
|
||||
body = { items: [SCHEDULE_FIXTURE], page: { page: 1, pageSize: 25, total: 1 } };
|
||||
if (pathname === '/api/v1/automation/cron/preview')
|
||||
body = {
|
||||
occurrences: [
|
||||
'2026-07-31T01:00:00.000Z',
|
||||
'2026-08-01T01:00:00.000Z',
|
||||
'2026-08-02T01:00:00.000Z',
|
||||
'2026-08-03T01:00:00.000Z',
|
||||
'2026-08-04T01:00:00.000Z',
|
||||
],
|
||||
};
|
||||
if (body !== undefined) {
|
||||
response.statusCode = 200;
|
||||
response.setHeader('content-type', 'application/json; charset=utf-8');
|
||||
@@ -252,7 +337,7 @@ async function press(cdp, key, code, windowsVirtualKeyCode, text) {
|
||||
async function keyboardNavigate(cdp, label, expectedPath, expectedHeading) {
|
||||
const focused = await evaluate(
|
||||
cdp,
|
||||
`(() => { const link = [...document.querySelectorAll('nav[aria-label="Global navigation"] a')].find((item) => item.textContent.trim() === ${JSON.stringify(label)}); if (!link) return false; link.focus(); return document.activeElement === link; })()`,
|
||||
`(() => { const link = [...document.querySelectorAll('nav[aria-label="全局导航"] a')].find((item) => item.textContent.trim() === ${JSON.stringify(label)}); if (!link) return false; link.focus(); return document.activeElement === link; })()`,
|
||||
);
|
||||
assert.equal(focused, true, `${label} navigation link must accept keyboard focus`);
|
||||
await press(cdp, 'Enter', 'Enter', 13, '\r');
|
||||
@@ -272,6 +357,115 @@ async function keyboardNavigate(cdp, label, expectedPath, expectedHeading) {
|
||||
);
|
||||
}
|
||||
|
||||
async function captureScreenshot(cdp, filename) {
|
||||
if (!SCREENSHOT_DIR) return;
|
||||
await mkdir(SCREENSHOT_DIR, { recursive: true });
|
||||
const result = await cdp.send('Page.captureScreenshot', {
|
||||
format: 'png',
|
||||
captureBeyondViewport: false,
|
||||
});
|
||||
await writeFile(join(SCREENSHOT_DIR, filename), Buffer.from(result.data, 'base64'));
|
||||
}
|
||||
|
||||
async function navigate(cdp, url) {
|
||||
const loaded = cdp.once('Page.loadEventFired');
|
||||
await cdp.send('Page.navigate', { url });
|
||||
await loaded;
|
||||
}
|
||||
|
||||
async function clickButton(cdp, label) {
|
||||
const clicked = await evaluate(
|
||||
cdp,
|
||||
`(() => { const button = [...document.querySelectorAll('button')].find((item) => item.textContent.trim() === ${JSON.stringify(label)}); if (!button) return false; button.click(); return true; })()`,
|
||||
);
|
||||
assert.equal(clicked, true, `Button not found: ${label}`);
|
||||
}
|
||||
|
||||
async function fleetLayout(cdp) {
|
||||
return evaluate(
|
||||
cdp,
|
||||
`(() => {
|
||||
const grid = document.querySelector('.fleet-card-grid');
|
||||
const workspace = document.querySelector('.fleet-workspace');
|
||||
const sidebar = document.querySelector('.fleet-sidebar');
|
||||
const sidebarHeader = document.querySelector('.fleet-sidebar-header');
|
||||
const results = document.querySelector('.fleet-results-pane');
|
||||
const groups = document.querySelector('.fleet-group-tabs');
|
||||
const firstCard = document.querySelector('.fleet-card');
|
||||
const version = document.querySelector('.fleet-card-version');
|
||||
const firstResource = document.querySelector('.fleet-resource-row');
|
||||
const telemetry = document.querySelector('.fleet-card-telemetry');
|
||||
const footer = document.querySelector('.fleet-card-footer');
|
||||
const menuTrigger = document.querySelector('.fleet-card-menu-trigger');
|
||||
const menuPanel = document.querySelector('.fleet-card-menu-panel');
|
||||
const checkbox = document.querySelector('.fleet-card-select');
|
||||
const bounds = (element) => {
|
||||
if (!element) return null;
|
||||
const rect = element.getBoundingClientRect();
|
||||
return { top: rect.top, right: rect.right, bottom: rect.bottom, left: rect.left, width: rect.width, height: rect.height };
|
||||
};
|
||||
const hardwareEntries = [...document.querySelectorAll('.fleet-card-hardware > div')].map((item) => {
|
||||
const label = item.querySelector('dt');
|
||||
const value = item.querySelector('dd');
|
||||
return {
|
||||
labelHeight: label?.getBoundingClientRect().height ?? 0,
|
||||
labelFits: label ? label.scrollWidth <= label.clientWidth : false,
|
||||
valueHeight: value?.getBoundingClientRect().height ?? 0,
|
||||
valueFits: value ? value.scrollWidth <= value.clientWidth : false,
|
||||
};
|
||||
});
|
||||
const navigation = [...document.querySelectorAll('nav[aria-label="全局导航"] a')].map((item) => {
|
||||
const rect = item.getBoundingClientRect();
|
||||
return { text: item.textContent.trim(), left: rect.left, right: rect.right };
|
||||
});
|
||||
return {
|
||||
viewport: window.innerWidth,
|
||||
scrollWidth: document.documentElement.scrollWidth,
|
||||
columns: grid ? getComputedStyle(grid).gridTemplateColumns.split(' ').length : 0,
|
||||
groupDisplay: groups ? getComputedStyle(groups).display : null,
|
||||
resourceDisplay: firstResource ? getComputedStyle(firstResource).display : null,
|
||||
telemetryDisplay: telemetry ? getComputedStyle(telemetry).display : null,
|
||||
footerDisplay: footer ? getComputedStyle(footer).display : null,
|
||||
workspaceDisplay: workspace ? getComputedStyle(workspace).display : null,
|
||||
sidebarHeaderDisplay: sidebarHeader ? getComputedStyle(sidebarHeader).display : null,
|
||||
sidebar: bounds(sidebar),
|
||||
results: bounds(results),
|
||||
groups: bounds(groups),
|
||||
firstCard: bounds(firstCard),
|
||||
version: bounds(version),
|
||||
versionText: version?.textContent.trim() ?? null,
|
||||
versionFits: version ? version.scrollWidth <= version.clientWidth : false,
|
||||
firstResource: bounds(firstResource),
|
||||
telemetry: bounds(telemetry),
|
||||
footer: bounds(footer),
|
||||
menuTrigger: bounds(menuTrigger),
|
||||
menuPanel: bounds(menuPanel),
|
||||
checkbox: bounds(checkbox),
|
||||
hardwareEntries,
|
||||
navigation,
|
||||
};
|
||||
})()`,
|
||||
);
|
||||
}
|
||||
|
||||
async function pageLayout(cdp) {
|
||||
return evaluate(
|
||||
cdp,
|
||||
`(() => { const layout = document.querySelector('.app-layout'); if (!layout) return null; const rect = layout.getBoundingClientRect(); const style = getComputedStyle(layout); const paddingLeft = Number.parseFloat(style.paddingLeft); const paddingRight = Number.parseFloat(style.paddingRight); return { viewport: document.documentElement.clientWidth, left: rect.left + paddingLeft, right: rect.right - paddingRight, width: rect.width - paddingLeft - paddingRight }; })()`,
|
||||
);
|
||||
}
|
||||
|
||||
async function assertWidePageGutters(cdp, label) {
|
||||
const layout = await pageLayout(cdp);
|
||||
assert.ok(layout, `${label} application layout must render`);
|
||||
const rightGap = layout.viewport - layout.right;
|
||||
assert.equal(
|
||||
layout.left >= 16 && layout.left <= 24 && rightGap >= 16 && rightGap <= 24,
|
||||
true,
|
||||
`${label} must keep 16px to 24px outer gutters: ${JSON.stringify(layout)}`,
|
||||
);
|
||||
}
|
||||
|
||||
let http;
|
||||
let chrome;
|
||||
let cdp;
|
||||
@@ -351,20 +545,210 @@ try {
|
||||
assert.deepEqual(unknownApiProblem, { error: 'Not Found', statusCode: 404 });
|
||||
}
|
||||
|
||||
const loaded = cdp.once('Page.loadEventFired');
|
||||
await cdp.send('Page.navigate', { url: `${origin}/fleet` });
|
||||
await loaded;
|
||||
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.querySelector('h1')?.textContent.trim() === 'Fleet'`,
|
||||
'Fleet did not render',
|
||||
);
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.body.textContent.includes('No instances are configured.')`,
|
||||
'Fleet mock data did not load',
|
||||
);
|
||||
const viewportCases = [
|
||||
{ width: 390, height: 844, columns: 1, sidebarMode: 'stacked', mobile: true },
|
||||
{ width: 768, height: 900, columns: 2, sidebarMode: 'stacked', mobile: false },
|
||||
{ width: 1024, height: 900, columns: 2, sidebarMode: 'left', mobile: false },
|
||||
{ width: 1440, height: 1000, columns: 4, sidebarMode: 'left', mobile: false },
|
||||
{ width: 1920, height: 1080, columns: 5, sidebarMode: 'left', mobile: false },
|
||||
];
|
||||
for (const viewport of viewportCases) {
|
||||
await cdp.send('Emulation.setDeviceMetricsOverride', {
|
||||
width: viewport.width,
|
||||
height: viewport.height,
|
||||
deviceScaleFactor: 1,
|
||||
mobile: viewport.mobile,
|
||||
});
|
||||
await navigate(cdp, `${origin}/fleet`);
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.querySelector('h1')?.textContent.trim() === '节点'`,
|
||||
`Fleet did not render at ${viewport.width}px`,
|
||||
);
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.querySelectorAll('[role="article"]').length === ${FLEET_FIXTURE_ITEMS.length}`,
|
||||
`Fleet mock data did not load at ${viewport.width}px`,
|
||||
);
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.querySelector('.fleet-card-version')?.textContent.trim() === 'SimAdmin 2.4.0'`,
|
||||
`Fleet SimAdmin version did not synchronize at ${viewport.width}px`,
|
||||
);
|
||||
const layout = await fleetLayout(cdp);
|
||||
assert.equal(
|
||||
layout.scrollWidth <= layout.viewport,
|
||||
true,
|
||||
`${viewport.width}px layout overflows: ${JSON.stringify(layout)}`,
|
||||
);
|
||||
assert.equal(layout.columns, viewport.columns, `${viewport.width}px Fleet column count`);
|
||||
assert.equal(layout.groupDisplay, 'flex', `${viewport.width}px tag groups must use flex`);
|
||||
assert.equal(layout.resourceDisplay, 'grid', `${viewport.width}px resource rows must use grid`);
|
||||
assert.equal(layout.telemetryDisplay, 'grid', `${viewport.width}px telemetry must use grid`);
|
||||
assert.equal(layout.footerDisplay, 'flex', `${viewport.width}px SMS footer must use flex`);
|
||||
assert.equal(
|
||||
layout.workspaceDisplay,
|
||||
'grid',
|
||||
`${viewport.width}px Fleet workspace must use the responsive grid`,
|
||||
);
|
||||
assert.notEqual(
|
||||
layout.sidebarHeaderDisplay,
|
||||
'none',
|
||||
`${viewport.width}px Fleet sidebar heading must remain visible`,
|
||||
);
|
||||
assert.ok(layout.sidebar && layout.results, `${viewport.width}px Fleet panes must render`);
|
||||
assert.ok(
|
||||
layout.groups &&
|
||||
layout.firstCard &&
|
||||
layout.version &&
|
||||
layout.firstResource &&
|
||||
layout.telemetry &&
|
||||
layout.footer &&
|
||||
layout.menuTrigger,
|
||||
`${viewport.width}px Fleet information hierarchy must render`,
|
||||
);
|
||||
for (const [name, bounds] of [
|
||||
['tag groups', layout.groups],
|
||||
['first card', layout.firstCard],
|
||||
]) {
|
||||
assert.equal(
|
||||
bounds.left >= layout.results.left - 0.5 && bounds.right <= layout.results.right + 0.5,
|
||||
true,
|
||||
`${viewport.width}px ${name} leaves results pane: ${JSON.stringify({ bounds, results: layout.results })}`,
|
||||
);
|
||||
}
|
||||
assert.equal(
|
||||
layout.versionText,
|
||||
'SimAdmin 2.4.0',
|
||||
`${viewport.width}px card must render the upstream SimAdmin version`,
|
||||
);
|
||||
assert.equal(
|
||||
layout.versionFits,
|
||||
true,
|
||||
`${viewport.width}px SimAdmin version must remain fully visible`,
|
||||
);
|
||||
assert.equal(
|
||||
layout.firstResource.left >= layout.firstCard.left - 0.5 &&
|
||||
layout.firstResource.right <= layout.firstCard.right + 0.5,
|
||||
true,
|
||||
`${viewport.width}px resource row leaves card: ${JSON.stringify(layout)}`,
|
||||
);
|
||||
for (const [name, bounds] of [
|
||||
['SimAdmin version', layout.version],
|
||||
['telemetry', layout.telemetry],
|
||||
['SMS footer', layout.footer],
|
||||
['action menu trigger', layout.menuTrigger],
|
||||
]) {
|
||||
assert.equal(
|
||||
bounds.left >= layout.firstCard.left - 0.5 && bounds.right <= layout.firstCard.right + 0.5,
|
||||
true,
|
||||
`${viewport.width}px ${name} leaves card: ${JSON.stringify(layout)}`,
|
||||
);
|
||||
}
|
||||
assert.equal(
|
||||
layout.menuTrigger.width >= 40 && layout.menuTrigger.height >= 40,
|
||||
true,
|
||||
`${viewport.width}px card action trigger is too small: ${JSON.stringify(layout.menuTrigger)}`,
|
||||
);
|
||||
assert.equal(
|
||||
layout.hardwareEntries.length === FLEET_FIXTURE_ITEMS.length * 2 &&
|
||||
layout.hardwareEntries.every(
|
||||
(entry) =>
|
||||
entry.labelFits &&
|
||||
entry.valueFits &&
|
||||
entry.labelHeight <= 20 &&
|
||||
entry.valueHeight <= 20,
|
||||
),
|
||||
true,
|
||||
`${viewport.width}px hardware facts wrap or clip: ${JSON.stringify(layout.hardwareEntries)}`,
|
||||
);
|
||||
if (viewport.sidebarMode === 'left') {
|
||||
assert.equal(
|
||||
layout.sidebar.right < layout.results.left,
|
||||
true,
|
||||
`${viewport.width}px Fleet sidebar must remain left of results: ${JSON.stringify(layout)}`,
|
||||
);
|
||||
} else {
|
||||
assert.equal(
|
||||
layout.sidebar.bottom < layout.results.top,
|
||||
true,
|
||||
`${viewport.width}px Fleet sidebar must stack above results: ${JSON.stringify(layout)}`,
|
||||
);
|
||||
assert.equal(
|
||||
layout.sidebar.left <= layout.results.left && layout.sidebar.right >= layout.results.right,
|
||||
true,
|
||||
`${viewport.width}px stacked Fleet sidebar must span the results width: ${JSON.stringify(layout)}`,
|
||||
);
|
||||
}
|
||||
assert.equal(layout.navigation.length, 3, 'Global navigation must have three entries');
|
||||
assert.deepEqual(
|
||||
layout.navigation.map((item) => item.text),
|
||||
['节点', '自动化', '设置'],
|
||||
);
|
||||
assert.equal(
|
||||
layout.navigation.every((item) => item.left >= 0 && item.right <= layout.viewport),
|
||||
true,
|
||||
`${viewport.width}px navigation leaves viewport: ${JSON.stringify(layout.navigation)}`,
|
||||
);
|
||||
assert.equal(
|
||||
await evaluate(cdp, `document.querySelectorAll('.fleet-card-select input').length`),
|
||||
0,
|
||||
'Fleet checkboxes must be hidden outside batch mode',
|
||||
);
|
||||
await captureScreenshot(cdp, `warm-fleet-${viewport.width}.png`);
|
||||
if (viewport.width === 390) {
|
||||
await evaluate(
|
||||
cdp,
|
||||
`(() => { const card = document.querySelector('.fleet-card'); window.scrollBy({ top: card.getBoundingClientRect().top - 128 }); })()`,
|
||||
);
|
||||
await delay(200);
|
||||
await captureScreenshot(cdp, 'warm-fleet-390-cards.png');
|
||||
}
|
||||
if (viewport.width === 1440) {
|
||||
await evaluate(cdp, `document.querySelector('.fleet-card-menu-trigger').click()`);
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.querySelector('.fleet-card-menu-panel') !== null`,
|
||||
'Fleet card action menu did not open',
|
||||
);
|
||||
const menuLayout = await fleetLayout(cdp);
|
||||
assert.ok(menuLayout.menuPanel, 'Fleet card action menu geometry missing');
|
||||
assert.equal(
|
||||
menuLayout.menuPanel.left >= menuLayout.firstCard.left - 0.5 &&
|
||||
menuLayout.menuPanel.right <= menuLayout.firstCard.right + 0.5 &&
|
||||
menuLayout.menuPanel.right <= menuLayout.viewport + 0.5,
|
||||
true,
|
||||
`Fleet card action menu leaves its card or viewport: ${JSON.stringify(menuLayout)}`,
|
||||
);
|
||||
await captureScreenshot(cdp, 'warm-fleet-1440-menu.png');
|
||||
await evaluate(cdp, `document.querySelector('.fleet-card-menu-trigger').click()`);
|
||||
}
|
||||
if (viewport.width === 390) {
|
||||
await clickButton(cdp, '批量选择');
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.querySelectorAll('.fleet-card-select input').length === ${FLEET_FIXTURE_ITEMS.length}`,
|
||||
'Mobile Fleet checkboxes did not appear in batch mode',
|
||||
);
|
||||
const mobileSelectionLayout = await fleetLayout(cdp);
|
||||
assert.ok(
|
||||
mobileSelectionLayout.checkbox && mobileSelectionLayout.firstCard,
|
||||
'Mobile Fleet selection geometry missing',
|
||||
);
|
||||
assert.equal(
|
||||
mobileSelectionLayout.checkbox.left >
|
||||
mobileSelectionLayout.firstCard.left + mobileSelectionLayout.firstCard.width / 2,
|
||||
true,
|
||||
`Mobile Fleet checkbox must stay in the card upper-right: ${JSON.stringify(mobileSelectionLayout)}`,
|
||||
);
|
||||
assert.equal(
|
||||
mobileSelectionLayout.checkbox.top <
|
||||
mobileSelectionLayout.firstCard.top + mobileSelectionLayout.firstCard.height / 3,
|
||||
true,
|
||||
`Mobile Fleet checkbox must stay in the card header: ${JSON.stringify(mobileSelectionLayout)}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
assert.equal(
|
||||
await evaluate(
|
||||
@@ -374,34 +758,134 @@ try {
|
||||
true,
|
||||
'Fleet search must accept focus',
|
||||
);
|
||||
for (const character of 'edge')
|
||||
await press(
|
||||
cdp,
|
||||
character,
|
||||
`Key${character.toUpperCase()}`,
|
||||
character.toUpperCase().charCodeAt(0),
|
||||
character,
|
||||
);
|
||||
assert.equal(await evaluate(cdp, `document.querySelector('input[type="search"]').value`), 'edge');
|
||||
await clickButton(cdp, '批量选择');
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.querySelectorAll('.fleet-card-select input').length === ${FLEET_FIXTURE_ITEMS.length}`,
|
||||
'Fleet checkboxes did not appear in batch mode',
|
||||
);
|
||||
await evaluate(cdp, `document.querySelector('.fleet-card-select input').click()`);
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.querySelector('.fleet-card-select input').checked === true`,
|
||||
'Fleet selection did not update',
|
||||
);
|
||||
const selectionLayout = await fleetLayout(cdp);
|
||||
assert.ok(
|
||||
selectionLayout.checkbox && selectionLayout.firstCard,
|
||||
'Fleet selection geometry missing',
|
||||
);
|
||||
assert.equal(
|
||||
selectionLayout.checkbox.left >
|
||||
selectionLayout.firstCard.left + selectionLayout.firstCard.width / 2,
|
||||
true,
|
||||
`Fleet checkbox must stay in the card upper-right: ${JSON.stringify(selectionLayout)}`,
|
||||
);
|
||||
assert.equal(
|
||||
selectionLayout.checkbox.top <
|
||||
selectionLayout.firstCard.top + selectionLayout.firstCard.height / 3,
|
||||
true,
|
||||
`Fleet checkbox must stay in the card header: ${JSON.stringify(selectionLayout)}`,
|
||||
);
|
||||
|
||||
await keyboardNavigate(cdp, 'Jobs', '/jobs', 'Jobs');
|
||||
await assertWidePageGutters(cdp, 'Nodes');
|
||||
await keyboardNavigate(cdp, '设置', '/settings/instances', '实例');
|
||||
await assertWidePageGutters(cdp, 'Settings');
|
||||
await keyboardNavigate(cdp, '自动化', '/automation', '自动化');
|
||||
await assertWidePageGutters(cdp, 'Automation');
|
||||
assert.deepEqual(
|
||||
await evaluate(
|
||||
cdp,
|
||||
`[...document.querySelectorAll('[role="tab"]')].map((item) => item.textContent.trim())`,
|
||||
),
|
||||
['计划任务', '执行记录', '操作审计'],
|
||||
);
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.body.textContent.includes('No jobs match the current query.')`,
|
||||
'Jobs mock data did not load',
|
||||
`document.querySelectorAll('.row-action-trigger').length === 1 && document.querySelector('.row-actions') === null`,
|
||||
'Schedule row menu trigger did not render',
|
||||
);
|
||||
await keyboardNavigate(cdp, 'Audit', '/audit', 'Audit');
|
||||
const createButtonStyle = await evaluate(
|
||||
cdp,
|
||||
`(() => { const button = [...document.querySelectorAll('button')].find((item) => item.textContent.trim() === '创建任务'); const style = getComputedStyle(button); return { color: style.color, backgroundColor: style.backgroundColor, opacity: style.opacity }; })()`,
|
||||
);
|
||||
assert.equal(
|
||||
createButtonStyle.backgroundColor,
|
||||
'rgb(23, 143, 132)',
|
||||
`Create button lost its primary fill: ${JSON.stringify(createButtonStyle)}`,
|
||||
);
|
||||
const shortPageGeometry = await evaluate(
|
||||
cdp,
|
||||
`(() => ({ footerBottom: document.querySelector('.app-footer').getBoundingClientRect().bottom, viewportBottom: innerHeight }))()`,
|
||||
);
|
||||
assert.equal(
|
||||
Math.abs(shortPageGeometry.footerBottom - shortPageGeometry.viewportBottom) <= 1,
|
||||
true,
|
||||
`Short-page footer is not anchored to the viewport: ${JSON.stringify(shortPageGeometry)}`,
|
||||
);
|
||||
const scheduleTableGeometry = await evaluate(
|
||||
cdp,
|
||||
`(() => { const table = document.querySelector('.schedule-table-wrap'); return { clientHeight: table.clientHeight, scrollHeight: table.scrollHeight, overflowY: getComputedStyle(table).overflowY }; })()`,
|
||||
);
|
||||
assert.equal(
|
||||
scheduleTableGeometry.overflowY,
|
||||
'hidden',
|
||||
`Schedule table has an unnecessary vertical scrollbar: ${JSON.stringify(scheduleTableGeometry)}`,
|
||||
);
|
||||
await evaluate(cdp, `document.querySelector('.row-action-trigger').click()`);
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.body.textContent.includes('No audit events match the current query.')`,
|
||||
'Audit mock data did not load',
|
||||
`document.querySelectorAll('.row-actions button').length === 4`,
|
||||
'Schedule row menu actions did not render',
|
||||
);
|
||||
await keyboardNavigate(cdp, 'Settings', '/settings/instances', 'Instances');
|
||||
await captureScreenshot(cdp, 'warm-automation-1440.png');
|
||||
await evaluate(cdp, `document.querySelector('.row-action-trigger').click()`);
|
||||
await cdp.send('Emulation.setDeviceMetricsOverride', {
|
||||
width: 390,
|
||||
height: 844,
|
||||
deviceScaleFactor: 1,
|
||||
mobile: true,
|
||||
});
|
||||
await clickButton(cdp, '创建任务');
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.body.textContent.includes('No instances are configured.')`,
|
||||
'Settings mock data did not load',
|
||||
`document.querySelector('[role="dialog"]') !== null`,
|
||||
'Schedule drawer did not open',
|
||||
);
|
||||
await eventually(
|
||||
cdp,
|
||||
`(() => { const rect = document.querySelector('[role="dialog"]').getBoundingClientRect(); return rect.left >= 0 && rect.right <= innerWidth + 0.5; })()`,
|
||||
'Schedule drawer did not settle inside the viewport',
|
||||
);
|
||||
const drawerLayout = await evaluate(
|
||||
cdp,
|
||||
`(() => { const dialog = document.querySelector('[role="dialog"]'); const rect = dialog.getBoundingClientRect(); return { viewport: innerWidth, scrollWidth: document.documentElement.scrollWidth, left: rect.left, right: rect.right }; })()`,
|
||||
);
|
||||
assert.equal(
|
||||
drawerLayout.scrollWidth <= drawerLayout.viewport,
|
||||
true,
|
||||
'Schedule drawer overflows',
|
||||
);
|
||||
assert.equal(
|
||||
drawerLayout.left >= 0 && drawerLayout.right <= drawerLayout.viewport + 0.5,
|
||||
true,
|
||||
`Schedule drawer leaves viewport: ${JSON.stringify(drawerLayout)}`,
|
||||
);
|
||||
await captureScreenshot(cdp, 'warm-automation-drawer-390.png');
|
||||
|
||||
await navigate(cdp, `${origin}/jobs`);
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.querySelector('[role="tab"][aria-selected="true"]')?.textContent.trim() === '执行记录'`,
|
||||
'/jobs alias did not select execution history',
|
||||
);
|
||||
await navigate(cdp, `${origin}/audit`);
|
||||
await eventually(
|
||||
cdp,
|
||||
`document.querySelector('[role="tab"][aria-selected="true"]')?.textContent.trim() === '操作审计'`,
|
||||
'/audit alias did not select operation audit',
|
||||
);
|
||||
await keyboardNavigate(cdp, '设置', '/settings/instances', '实例');
|
||||
|
||||
assert.deepEqual(failures, [], `Browser failures detected:\n${failures.join('\n')}`);
|
||||
console.log(`PASS real Chrome E2E (${chromeBinary})`);
|
||||
@@ -411,7 +895,7 @@ try {
|
||||
: `PASS isolated built-asset server on ${origin} (legacy port 8788 untouched)`,
|
||||
);
|
||||
console.log(
|
||||
'PASS keyboard navigation and rendered API states: /fleet -> /jobs -> /audit -> /settings/instances',
|
||||
'PASS three-item navigation, Automation drawer and aliases, batch selection, and 390/768/1024/1440/1920 responsive layouts',
|
||||
);
|
||||
} catch (error) {
|
||||
console.error(error instanceof Error ? error.stack : error);
|
||||
@@ -425,7 +909,8 @@ try {
|
||||
http.closeAllConnections?.();
|
||||
await new Promise((resolve) => http.close(resolve));
|
||||
}
|
||||
if (profile) await rm(profile, { recursive: true, force: true });
|
||||
if (profile)
|
||||
await rm(profile, { recursive: true, force: true, maxRetries: 8, retryDelay: 125 });
|
||||
if (CLEAN_DIST) await rm(DIST, { recursive: true, force: true });
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user