850 lines
34 KiB
TypeScript
850 lines
34 KiB
TypeScript
import { expect, test, type Page, type TestInfo } from "@playwright/test";
|
|
|
|
const now = "2026-08-02T12:00:00Z";
|
|
const room = {
|
|
id: "room-1",
|
|
platform: 0,
|
|
platformName: "哔哩哔哩",
|
|
sourceUrl: "https://live.example/123",
|
|
originalLiveRoomUrl: "https://live.example/123",
|
|
normalizedUrl: "https://live.example/123",
|
|
roomId: "123456",
|
|
title: "夏日音乐直播间",
|
|
anchorName: "示例主播",
|
|
isPinned: true,
|
|
isPriority: false,
|
|
overrides: {},
|
|
effectiveSettings: {
|
|
preferredQuality: "origin",
|
|
outputFormat: 0,
|
|
saveMode: 1,
|
|
recordingTemplate: 0,
|
|
segmentDurationMinutes: 30,
|
|
enableAutoReconnect: true,
|
|
reconnectDelayMaxSeconds: 60,
|
|
readWriteTimeoutMilliseconds: 30000,
|
|
enableDanmakuRecording: true,
|
|
danmakuIncludeNonChatEvents: false,
|
|
danmakuMinPollIntervalMilliseconds: 1000,
|
|
danmakuRetryDelayMaxSeconds: 30
|
|
},
|
|
isEnabled: true,
|
|
availabilityStatus: 2,
|
|
currentRecordingState: 2,
|
|
lastAutoStartDecisionCode: "started",
|
|
lastAutoStartDecisionSummary: "已自动开始录制",
|
|
lastAutoStartDecisionDetail: "直播状态确认后创建录制会话。",
|
|
lastAutoStartDecisionAt: now,
|
|
lastCheckedAt: now,
|
|
createdAt: now,
|
|
updatedAt: now
|
|
};
|
|
|
|
const task = {
|
|
id: "task-1",
|
|
liveRoomId: room.id,
|
|
recordSessionId: "session-12345678",
|
|
segmentIndex: 1,
|
|
liveRoomTitle: room.title,
|
|
platform: 0,
|
|
roomId: room.roomId,
|
|
status: 4,
|
|
preferredQuality: "origin",
|
|
outputFormat: 0,
|
|
outputFilePath: "/volume1/录制/示例主播/2026-08-02/分片-001.mp4",
|
|
createdAt: now,
|
|
startedAt: now,
|
|
endedAt: now,
|
|
durationSeconds: 1800,
|
|
uploadStatus: 0
|
|
};
|
|
|
|
const session = {
|
|
id: "session-12345678",
|
|
liveRoomId: room.id,
|
|
liveRoomTitle: room.title,
|
|
anchorName: room.anchorName,
|
|
platform: 0,
|
|
roomId: room.roomId,
|
|
status: 4,
|
|
preferredQuality: "origin",
|
|
outputFormat: 0,
|
|
saveMode: 1,
|
|
activeSegmentIndex: 0,
|
|
segmentCount: 1,
|
|
createdAt: now,
|
|
startedAt: now,
|
|
endedAt: now,
|
|
totalFileSizeBytes: 8_589_934_592,
|
|
totalDanmakuMessageCount: 2680,
|
|
uploadedSegmentCount: 0,
|
|
failedUploadSegmentCount: 0,
|
|
uploadingSegmentCount: 0,
|
|
tasks: [task]
|
|
};
|
|
|
|
const sessionDetail = {
|
|
session,
|
|
timeline: {
|
|
anchorAt: now,
|
|
totalDurationSeconds: 5400,
|
|
segments: Array.from({ length: 3 }, (_, index) => ({
|
|
recordTaskId: `task-${index + 1}`,
|
|
segmentIndex: index + 1,
|
|
status: 4,
|
|
startedAt: new Date(Date.parse(now) + index * 1_800_000).toISOString(),
|
|
endedAt: new Date(Date.parse(now) + (index + 1) * 1_800_000).toISOString(),
|
|
offsetSeconds: index * 1800,
|
|
durationSeconds: 1800,
|
|
label: `/volume1/录制/示例主播/2026-08-02/分片-${String(index + 1).padStart(3, "0")}.mp4`,
|
|
detail: "录制完成"
|
|
})),
|
|
events: [],
|
|
heatBuckets: []
|
|
},
|
|
logs: []
|
|
};
|
|
|
|
const uploadTask = {
|
|
recordTaskId: task.id,
|
|
recordSessionId: session.id,
|
|
liveRoomId: room.id,
|
|
liveRoomTitle: room.title,
|
|
platform: room.platform,
|
|
roomId: room.roomId,
|
|
segmentIndex: 1,
|
|
outputFormat: 0,
|
|
filePath: task.outputFilePath,
|
|
fileSizeBytes: 8_589_934_592,
|
|
uploadStatus: 0,
|
|
uploadProgressPercent: 0,
|
|
uploadAttemptCount: 0,
|
|
createdAt: now
|
|
};
|
|
|
|
const recordingFailure = {
|
|
recordTaskId: "failed-task-1",
|
|
recordSessionId: "failed-session-1",
|
|
liveRoomId: room.id,
|
|
liveRoomTitle: room.title,
|
|
roomId: room.roomId,
|
|
platformName: room.platformName,
|
|
segmentIndex: 7,
|
|
failureKind: "ReadableFragment",
|
|
failureLabel: "异常退出分片",
|
|
recommendedAction: "文件可以读取。确认内容有效后，将它转为待上传任务。",
|
|
errorMessage: "FFmpeg 异常退出；原始文件会保留，不会被修复流程覆盖。",
|
|
filePath: "/volume1/录制/示例主播/2026-08-02/一个用于验证窄屏换行的很长文件名-007.mp4",
|
|
fileSizeBytes: 4_294_967_296,
|
|
durationSeconds: 1789,
|
|
fileExists: true,
|
|
canAccept: true,
|
|
canRepair: false,
|
|
canRetryRoom: false,
|
|
isRepairing: false,
|
|
createdAt: now
|
|
};
|
|
|
|
const dashboard = {
|
|
activeRecordingCount: 1,
|
|
liveRoomCount: 3,
|
|
offlineRoomCount: 5,
|
|
totalRoomCount: 8,
|
|
todayRecordingSeconds: 12600,
|
|
todayDataBytes: 32_212_254_720,
|
|
todayDanmakuCount: 12860,
|
|
activeSessionCount: 1,
|
|
recentErrorCount: 2,
|
|
currentErrorCount: 0,
|
|
storageStatus: {
|
|
isEnabled: true,
|
|
isAvailable: true,
|
|
hasEnoughSpace: true,
|
|
message: "空间充足",
|
|
checkedPath: "/volume1/录制/示例主播/2026-08-02",
|
|
totalBytes: 1_000_000_000_000,
|
|
usedBytes: 750_000_000_000,
|
|
availableBytes: 250_000_000_000,
|
|
requiredBytes: 100_000_000_000,
|
|
tier: "Green",
|
|
usagePercent: 75,
|
|
freePercent: 25,
|
|
greenThresholdPercent: 30,
|
|
redThresholdPercent: 10
|
|
},
|
|
recentSessions: [session],
|
|
topRooms: [{ liveRoomId: room.id, title: room.title, anchorName: room.anchorName, platformName: room.platformName, roomId: room.roomId, sessionCount: 1, totalDurationSeconds: 12600 }],
|
|
pendingTranscodeCount: 2,
|
|
pendingUploadCount: 3,
|
|
queuedDataBytes: 4_294_967_296
|
|
};
|
|
|
|
async function mockApi(page: Page) {
|
|
await page.addInitScript(() => {
|
|
localStorage.setItem("live-recorder-token", "e2e-token");
|
|
localStorage.setItem("live-recorder-user", JSON.stringify({
|
|
userId: "e2e-user",
|
|
username: "tester",
|
|
displayName: "界面测试"
|
|
}));
|
|
});
|
|
|
|
await page.route(/^http:\/\/127\.0\.0\.1:47173\/api\//, async (route) => {
|
|
const url = new URL(route.request().url());
|
|
const path = url.pathname;
|
|
let body: unknown = {};
|
|
|
|
if (path === "/api/dashboard") body = dashboard;
|
|
else if (path === "/api/live-rooms") body = [room];
|
|
else if (path === "/api/record-sessions/page") body = {
|
|
items: [session],
|
|
totalCount: 1,
|
|
skip: 0,
|
|
take: 20,
|
|
totalSessionCount: 1,
|
|
activeSessionCount: 0,
|
|
totalTaskCount: 1,
|
|
totalDanmakuCount: session.totalDanmakuMessageCount
|
|
};
|
|
else if (path === `/api/record-sessions/${session.id}`) body = sessionDetail;
|
|
else if (path === "/api/record-sessions") body = [session];
|
|
else if (path === "/api/record-tasks/upload-status") body = {
|
|
items: [uploadTask],
|
|
totalCount: 1,
|
|
notUploadedCount: 1,
|
|
failedArtifactCount: 0,
|
|
succeededCount: 0,
|
|
failedCount: 0,
|
|
queuedCount: 0,
|
|
uploadingCount: 0,
|
|
waitingRetryCount: 0,
|
|
matchingRetryableCount: 0,
|
|
queueHealth: { state: "Healthy", isPaused: false }
|
|
};
|
|
else if (path === "/api/recovery/recording-failures") body = {
|
|
items: [recordingFailure],
|
|
totalCount: 1
|
|
};
|
|
else if (path === "/api/recovery") body = {
|
|
storage: dashboard.storageStatus,
|
|
liveRooms: [],
|
|
finalizations: []
|
|
};
|
|
else if (path === "/api/settings") body = {};
|
|
else if (path.includes("/record-sessions/stream")) {
|
|
await route.fulfill({ status: 200, contentType: "text/event-stream", body: "" });
|
|
return;
|
|
}
|
|
|
|
await route.fulfill({ status: 200, contentType: "application/json", body: JSON.stringify(body) });
|
|
});
|
|
}
|
|
|
|
async function expectNoDocumentOverflow(page: Page) {
|
|
await expect.poll(() => page.evaluate(() => ({
|
|
scrollWidth: document.documentElement.scrollWidth,
|
|
clientWidth: document.documentElement.clientWidth
|
|
}))).toEqual(await page.evaluate(() => ({
|
|
scrollWidth: document.documentElement.clientWidth,
|
|
clientWidth: document.documentElement.clientWidth
|
|
})));
|
|
}
|
|
|
|
async function capture(page: Page, testInfo: TestInfo, name: string) {
|
|
await page.screenshot({ path: testInfo.outputPath(`${name}.png`), fullPage: true });
|
|
}
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
page.on("pageerror", (error) => console.error("[browser pageerror]", error.message));
|
|
page.on("console", (message) => {
|
|
if (message.type() === "error") console.error("[browser console]", message.text());
|
|
});
|
|
await mockApi(page);
|
|
});
|
|
|
|
test("login preserves the product hierarchy without viewport overflow", async ({ page }, testInfo) => {
|
|
await page.addInitScript(() => localStorage.clear());
|
|
await page.goto("/login");
|
|
await expect(page.getByRole("heading", { name: /让每一次开播/ })).toBeVisible();
|
|
await expect(page.getByRole("heading", { name: "欢迎回来" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: /登录控制台/ })).toBeVisible();
|
|
await expectNoDocumentOverflow(page);
|
|
await capture(page, testInfo, "login");
|
|
});
|
|
|
|
test("dashboard keeps storage semantics and the shell within the viewport", async ({ page }, testInfo) => {
|
|
await page.goto("/");
|
|
await expect(page.getByRole("heading", { name: "运行中心" })).toBeVisible();
|
|
const storage = page.getByTestId("storage-capacity");
|
|
await expect(storage).toContainText("75.0%");
|
|
await expect(storage).toContainText("已使用");
|
|
await expect(storage).toContainText("25.0%");
|
|
if ((page.viewportSize()?.width ?? 0) <= 768) {
|
|
const avatarGeometry = await page.locator(".app-user-btn").evaluate((button) => {
|
|
const avatar = button.querySelector<SVGSVGElement>(".app-user-btn__avatar")!;
|
|
const circle = avatar.querySelector<SVGCircleElement>("circle")!;
|
|
const buttonRect = button.getBoundingClientRect();
|
|
const avatarRect = avatar.getBoundingClientRect();
|
|
const circleRect = circle.getBoundingClientRect();
|
|
return {
|
|
tagName: avatar.tagName.toLowerCase(),
|
|
buttonDelta: Math.abs(buttonRect.width - buttonRect.height),
|
|
avatarDelta: Math.abs(avatarRect.width - avatarRect.height),
|
|
circleDelta: Math.abs(circleRect.width - circleRect.height)
|
|
};
|
|
});
|
|
expect(avatarGeometry.tagName).toBe("svg");
|
|
expect(avatarGeometry.buttonDelta).toBeLessThanOrEqual(1);
|
|
expect(avatarGeometry.avatarDelta).toBeLessThanOrEqual(1);
|
|
expect(avatarGeometry.circleDelta).toBeLessThanOrEqual(1);
|
|
}
|
|
await expectNoDocumentOverflow(page);
|
|
await capture(page, testInfo, "dashboard");
|
|
});
|
|
|
|
test("mobile navigation animates route and active state without a tap frame", async ({ page }, testInfo) => {
|
|
test.skip((page.viewportSize()?.width ?? 0) > 768, "mobile navigation contract");
|
|
await page.emulateMedia({ reducedMotion: "no-preference" });
|
|
await page.goto("/");
|
|
await expect(page.getByRole("heading", { name: "运行中心" })).toBeVisible();
|
|
await expect(page.locator(".app-main")).toBeVisible();
|
|
await expect(page.locator(".app-bottom-nav button[aria-current='page']")).toHaveCount(1);
|
|
|
|
await page.evaluate(() => {
|
|
(window as Window & { __pageSwapObserved?: boolean }).__pageSwapObserved = false;
|
|
const observer = new MutationObserver((mutations) => {
|
|
if (mutations.some((mutation) =>
|
|
mutation.target instanceof HTMLElement && mutation.target.className.includes("page-swap-")
|
|
)) {
|
|
(window as Window & { __pageSwapObserved?: boolean }).__pageSwapObserved = true;
|
|
observer.disconnect();
|
|
}
|
|
});
|
|
observer.observe(document.querySelector(".app-main")!, {
|
|
subtree: true,
|
|
attributes: true,
|
|
attributeFilter: ["class"]
|
|
});
|
|
});
|
|
|
|
const recordNavigation = page.locator(".app-bottom-nav").getByRole("button", { name: "录制", exact: true });
|
|
const tapHighlight = await recordNavigation.evaluate((element) =>
|
|
getComputedStyle(element).webkitTapHighlightColor
|
|
);
|
|
expect(tapHighlight).toBe("rgba(0, 0, 0, 0)");
|
|
|
|
await recordNavigation.click();
|
|
await expect(page).toHaveURL(/\/live-rooms$/);
|
|
await expect(recordNavigation).toHaveClass(/is-active/);
|
|
await expect(page.locator(".app-bottom-nav button[aria-current='page']")).toHaveCount(1);
|
|
await expect.poll(() => page.evaluate(() =>
|
|
(window as Window & { __pageSwapObserved?: boolean }).__pageSwapObserved
|
|
)).toBeTruthy();
|
|
const activeIndicator = await recordNavigation.locator(".app-bottom-nav__icon").evaluate((element) => ({
|
|
background: getComputedStyle(element).backgroundColor,
|
|
duration: getComputedStyle(element).transitionDuration
|
|
}));
|
|
expect(activeIndicator.background).not.toBe("rgba(0, 0, 0, 0)");
|
|
expect(activeIndicator.duration).not.toBe("0s");
|
|
await capture(page, testInfo, "mobile-navigation-active");
|
|
});
|
|
|
|
test("dark mode teleported overlays inherit dark surfaces and borders", async ({ page }) => {
|
|
await page.addInitScript(() => localStorage.setItem("live-recorder-ui-theme", "dark"));
|
|
await page.goto("/");
|
|
await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
|
|
|
|
await page.locator(".app-user-btn").click();
|
|
const dropdown = page.locator(".el-dropdown__popper:visible").first();
|
|
await expect(dropdown).toBeVisible();
|
|
const colors = await dropdown.evaluate((element) => ({
|
|
background: getComputedStyle(element).backgroundColor,
|
|
border: getComputedStyle(element).borderTopColor,
|
|
rootBorder: getComputedStyle(document.documentElement).getPropertyValue("--el-border-color-light").trim()
|
|
}));
|
|
expect(colors.background).toBe("rgb(23, 34, 53)");
|
|
expect(colors.border).toBe("rgb(44, 60, 85)");
|
|
expect(colors.rootBorder).toBe("#2c3c55");
|
|
});
|
|
|
|
test("live room table, drawer and dialog retain their final actions", async ({ page }, testInfo) => {
|
|
await page.goto("/live-rooms");
|
|
await expect(page.getByRole("heading", { name: "直播间列表" })).toBeVisible();
|
|
await expectNoDocumentOverflow(page);
|
|
|
|
if ((page.viewportSize()?.width ?? 0) > 768) {
|
|
const actionHeader = page.getByRole("columnheader", { name: "操作" }).last();
|
|
await expect(actionHeader).toBeVisible();
|
|
const box = await actionHeader.boundingBox();
|
|
expect(box && box.x + box.width).toBeLessThanOrEqual((page.viewportSize()?.width ?? 0) + 1);
|
|
const fixedActionCell = page.locator("td.el-table-fixed-column--right").first();
|
|
await expect(fixedActionCell).toBeVisible();
|
|
const fixedBackground = await fixedActionCell.evaluate((element) =>
|
|
window.getComputedStyle(element).backgroundColor
|
|
);
|
|
expect(fixedBackground).not.toBe("transparent");
|
|
expect(fixedBackground).not.toMatch(/rgba\([^)]*,\s*0\s*\)$/);
|
|
}
|
|
|
|
await page.getByRole("button", { name: /^查看/ }).first().click();
|
|
const drawer = page.locator(".right-drawer");
|
|
const drawerFooter = page.locator(".right-drawer__footer");
|
|
await expect(drawerFooter).toBeVisible();
|
|
if ((page.viewportSize()?.width ?? 0) <= 768) {
|
|
const viewportWidth = page.viewportSize()?.width ?? 0;
|
|
await expect.poll(async () => {
|
|
const box = await drawer.boundingBox();
|
|
return Boolean(box && box.x >= -1 && box.x + box.width <= viewportWidth + 1);
|
|
}).toBe(true);
|
|
if (viewportWidth <= 640) {
|
|
const box = await drawer.boundingBox();
|
|
expect(Math.round(box?.width ?? 0)).toBe(viewportWidth);
|
|
}
|
|
const drawerBody = page.locator(".right-drawer__body");
|
|
const bodyOverflow = await drawerBody.evaluate((element) => ({
|
|
clientWidth: element.clientWidth,
|
|
scrollWidth: element.scrollWidth,
|
|
overflowY: getComputedStyle(element).overflowY
|
|
}));
|
|
expect(bodyOverflow.scrollWidth).toBeLessThanOrEqual(bodyOverflow.clientWidth);
|
|
expect(bodyOverflow.overflowY).toBe("auto");
|
|
await drawerBody.evaluate((element) => { element.scrollTop = element.scrollHeight; });
|
|
const lastDetailRow = page.locator(".detail-panel__descriptions tr").last();
|
|
await expect(lastDetailRow).toBeVisible();
|
|
const lastRowBox = await lastDetailRow.boundingBox();
|
|
const fixedFooterBox = await drawerFooter.boundingBox();
|
|
expect(lastRowBox && fixedFooterBox && lastRowBox.y + lastRowBox.height)
|
|
.toBeLessThanOrEqual((fixedFooterBox?.y ?? 0) + 1);
|
|
}
|
|
const footerBox = await drawerFooter.boundingBox();
|
|
expect(footerBox && footerBox.y + footerBox.height).toBeLessThanOrEqual((page.viewportSize()?.height ?? 0) + 1);
|
|
await capture(page, testInfo, "live-room-drawer");
|
|
await page.getByRole("button", { name: "关闭", exact: true }).click();
|
|
await expect(drawerFooter).toBeHidden();
|
|
|
|
await page.getByRole("button", { name: "新增直播间" }).click();
|
|
const dialogFooter = page.locator(".el-dialog__footer");
|
|
await expect(dialogFooter).toBeVisible();
|
|
const dialogFooterBox = await dialogFooter.boundingBox();
|
|
expect(dialogFooterBox && dialogFooterBox.y + dialogFooterBox.height).toBeLessThanOrEqual((page.viewportSize()?.height ?? 0) + 1);
|
|
await page.getByRole("button", { name: "取消", exact: true }).click();
|
|
await expect(dialogFooter).toBeHidden();
|
|
await capture(page, testInfo, "live-rooms");
|
|
});
|
|
|
|
test("mobile live room list paginates large collections", async ({ page }) => {
|
|
test.skip((page.viewportSize()?.width ?? 0) > 768, "mobile-only pagination contract");
|
|
const manyRooms = Array.from({ length: 25 }, (_, index) => ({
|
|
...room,
|
|
id: `room-${index + 1}`,
|
|
roomId: String(100000 + index + 1),
|
|
title: `分页直播间 ${index + 1}`,
|
|
anchorName: `分页主播 ${index + 1}`
|
|
}));
|
|
await page.route("**/api/live-rooms", async (route) => {
|
|
await route.fulfill({ status: 200, contentType: "application/json", body: JSON.stringify(manyRooms) });
|
|
});
|
|
|
|
await page.goto("/live-rooms");
|
|
await expect(page.locator(".room-card")).toHaveCount(12);
|
|
await expect(page.getByText("分页直播间 1", { exact: true })).toBeVisible();
|
|
await page.locator(".mobile-room-pagination .btn-next").click();
|
|
await expect(page.getByText("分页直播间 13", { exact: true })).toBeVisible();
|
|
await expect(page.locator(".room-card")).toHaveCount(12);
|
|
});
|
|
|
|
test("record task cards and tables expose one primary action", async ({ page }, testInfo) => {
|
|
await page.goto("/record-tasks");
|
|
await expect(page.getByRole("heading", { name: "录制任务" })).toBeVisible();
|
|
await expect(page.getByText("主播 · 示例主播", { exact: true })).toBeVisible();
|
|
if ((page.viewportSize()?.width ?? 0) <= 768) {
|
|
const tapHighlight = await page.getByRole("button", { name: "刷新列表" }).evaluate((element) =>
|
|
getComputedStyle(element).webkitTapHighlightColor
|
|
);
|
|
expect(tapHighlight).toBe("rgba(0, 0, 0, 0)");
|
|
}
|
|
await expect(page.getByPlaceholder(/搜索直播间/)).toBeVisible();
|
|
await expect(page.getByRole("button", { name: /查看/ }).first()).toBeVisible();
|
|
await expect(page.getByRole("button", { name: /更多/ }).first()).toBeVisible();
|
|
await expectNoDocumentOverflow(page);
|
|
await capture(page, testInfo, "record-tasks");
|
|
});
|
|
|
|
test("record sessions paginate on the server and bound the rendered page", async ({ page }, testInfo) => {
|
|
const allSessions = Array.from({ length: 200 }, (_, index) => ({
|
|
...session,
|
|
id: `session-${index + 1}`,
|
|
liveRoomTitle: `分页录制会话 ${index + 1}`,
|
|
roomId: String(200000 + index + 1),
|
|
tasks: [{ ...task, id: `task-${index + 1}`, recordSessionId: `session-${index + 1}` }]
|
|
}));
|
|
const requests: Array<{ skip: number; take: number }> = [];
|
|
|
|
await page.route("**/api/record-sessions/page**", async (route) => {
|
|
const url = new URL(route.request().url());
|
|
const skip = Number(url.searchParams.get("skip") || 0);
|
|
const take = Number(url.searchParams.get("take") || 20);
|
|
requests.push({ skip, take });
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
items: allSessions.slice(skip, skip + take),
|
|
totalCount: allSessions.length,
|
|
skip,
|
|
take,
|
|
totalSessionCount: allSessions.length,
|
|
activeSessionCount: 0,
|
|
totalTaskCount: allSessions.length,
|
|
totalDanmakuCount: allSessions.length * session.totalDanmakuMessageCount
|
|
})
|
|
});
|
|
});
|
|
|
|
await page.goto("/record-tasks");
|
|
const expectedPageSize = (page.viewportSize()?.width ?? 0) <= 768 ? 12 : 20;
|
|
await expect.poll(() => requests.length).toBeGreaterThan(0);
|
|
expect(requests[0]).toEqual({ skip: 0, take: expectedPageSize });
|
|
await expect(page.getByText("当前页 " + expectedPageSize + " / 共 200")).toBeVisible();
|
|
await expect(page.locator((page.viewportSize()?.width ?? 0) <= 768 ? ".session-card" : ".session-panel"))
|
|
.toHaveCount(expectedPageSize);
|
|
const renderedNodeCount = await page.evaluate(() => document.getElementsByTagName("*").length);
|
|
expect(renderedNodeCount).toBeLessThan(5_000);
|
|
|
|
await page.locator(".session-pagination .btn-next").click();
|
|
await expect.poll(() => requests.some((item) => item.skip === expectedPageSize)).toBeTruthy();
|
|
await expect(page.getByText(`分页录制会话 ${expectedPageSize + 1}`, { exact: true })).toBeVisible();
|
|
if ((page.viewportSize()?.width ?? 0) <= 768) {
|
|
await expect(page.locator(".session-pagination__mobile .el-button")).toHaveCount(2);
|
|
const pageCount = Math.ceil(allSessions.length / expectedPageSize);
|
|
const middlePage = Math.ceil(pageCount / 2);
|
|
for (let pageNumber = 2; pageNumber < middlePage; pageNumber++) {
|
|
await page.locator(".session-pagination__mobile .btn-next").click();
|
|
await expect(page.getByText(`分页录制会话 ${pageNumber * expectedPageSize + 1}`, { exact: true })).toBeVisible();
|
|
}
|
|
await expect(page.locator(".session-pagination__position")).toContainText(`${middlePage}/ ${pageCount}`);
|
|
await expect(page.locator(".session-pagination__mobile .el-button")).toHaveCount(2);
|
|
await expectNoDocumentOverflow(page);
|
|
await page.locator(".session-pagination__mobile").scrollIntoViewIfNeeded();
|
|
await capture(page, testInfo, "record-session-middle-page");
|
|
}
|
|
});
|
|
|
|
test("mobile record session refresh keeps the current page and scroll position", async ({ page }) => {
|
|
test.skip((page.viewportSize()?.width ?? 0) > 768, "mobile refresh contract");
|
|
|
|
await page.addInitScript(() => {
|
|
class MockEventSource {
|
|
onopen: ((event: Event) => void) | null = null;
|
|
onerror: ((event: Event) => void) | null = null;
|
|
private listeners = new Map<string, Array<(event: Event) => void>>();
|
|
|
|
constructor() {
|
|
(window as any).__recordSessionEventSource = this;
|
|
window.setTimeout(() => this.onopen?.(new Event("open")), 0);
|
|
}
|
|
|
|
addEventListener(type: string, listener: EventListenerOrEventListenerObject) {
|
|
const callback = typeof listener === "function"
|
|
? listener
|
|
: (event: Event) => listener.handleEvent(event);
|
|
this.listeners.set(type, [...(this.listeners.get(type) ?? []), callback]);
|
|
}
|
|
|
|
emit(type: string) {
|
|
this.listeners.get(type)?.forEach((listener) => listener(new MessageEvent(type, { data: "{}" })));
|
|
}
|
|
|
|
close() {}
|
|
}
|
|
|
|
Object.defineProperty(window, "EventSource", { configurable: true, value: MockEventSource });
|
|
(window as any).__emitRecordSessionRefresh = () =>
|
|
(window as any).__recordSessionEventSource?.emit("refresh");
|
|
});
|
|
|
|
const allSessions = Array.from({ length: 60 }, (_, index) => ({
|
|
...session,
|
|
id: `refresh-session-${index + 1}`,
|
|
liveRoomTitle: `刷新录制会话 ${index + 1}`,
|
|
tasks: [{ ...task, id: `refresh-task-${index + 1}`, recordSessionId: `refresh-session-${index + 1}` }]
|
|
}));
|
|
let requestCount = 0;
|
|
await page.route("**/api/record-sessions/page**", async (route) => {
|
|
requestCount++;
|
|
const url = new URL(route.request().url());
|
|
const skip = Number(url.searchParams.get("skip") || 0);
|
|
const take = Number(url.searchParams.get("take") || 12);
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
items: allSessions.slice(skip, skip + take),
|
|
totalCount: allSessions.length,
|
|
skip,
|
|
take,
|
|
totalSessionCount: allSessions.length,
|
|
activeSessionCount: 0,
|
|
totalTaskCount: allSessions.length,
|
|
totalDanmakuCount: 0
|
|
})
|
|
});
|
|
});
|
|
|
|
await page.goto("/record-tasks");
|
|
await expect(page.locator(".session-card")).toHaveCount(12);
|
|
const main = page.locator(".app-main");
|
|
await main.evaluate((element) => { element.scrollTop = element.scrollHeight; });
|
|
const scrollTopBefore = await main.evaluate((element) => element.scrollTop);
|
|
expect(scrollTopBefore).toBeGreaterThan(500);
|
|
|
|
await page.evaluate(() => (window as any).__emitRecordSessionRefresh());
|
|
await expect.poll(() => requestCount).toBeGreaterThan(1);
|
|
await expect(page.locator(".session-card")).toHaveCount(12);
|
|
const scrollTopAfter = await main.evaluate((element) => element.scrollTop);
|
|
expect(Math.abs(scrollTopAfter - scrollTopBefore)).toBeLessThanOrEqual(2);
|
|
});
|
|
|
|
test("upload tasks use cards on mobile and never require table horizontal scrolling", async ({ page }, testInfo) => {
|
|
await page.goto("/upload-tasks");
|
|
await expect(page.getByRole("heading", { name: "上传任务" })).toBeVisible();
|
|
await expect(page.getByPlaceholder(/搜索直播间/)).toBeVisible();
|
|
await expect(page.getByText(task.outputFilePath, { exact: true })).toBeVisible();
|
|
await expectNoDocumentOverflow(page);
|
|
|
|
if ((page.viewportSize()?.width ?? 0) < 1280) {
|
|
await expect(page.locator(".upload-item-card")).toBeVisible();
|
|
await expect(page.locator(".upload-table")).toHaveCount(0);
|
|
await expect(page.getByRole("button", { name: "查看详情" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "立即上传" })).toBeVisible();
|
|
} else {
|
|
await expect(page.getByRole("columnheader", { name: "操作" })).toBeVisible();
|
|
const tableScroll = page.locator(".upload-table .el-scrollbar__wrap");
|
|
await expect(tableScroll).toBeVisible();
|
|
const dimensions = await tableScroll.evaluate((element) => ({
|
|
clientWidth: element.clientWidth,
|
|
scrollWidth: element.scrollWidth
|
|
}));
|
|
expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth + 1);
|
|
const uploadButton = page.getByRole("button", { name: "上传", exact: true });
|
|
await expect(uploadButton).toBeVisible();
|
|
const uploadButtonBox = await uploadButton.boundingBox();
|
|
expect(uploadButtonBox && uploadButtonBox.x + uploadButtonBox.width)
|
|
.toBeLessThanOrEqual((page.viewportSize()?.width ?? 0) + 1);
|
|
}
|
|
|
|
await capture(page, testInfo, "upload-tasks");
|
|
});
|
|
|
|
test("paused uploads expose retry controls without overflowing the viewport", async ({ page }, testInfo) => {
|
|
await page.route("**/api/record-tasks/upload-status**", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
items: [{
|
|
...uploadTask,
|
|
uploadStatus: 5,
|
|
uploadAttemptCount: 3,
|
|
uploadErrorMessage: "OpenList 登录请求过多，队列已全局暂停，当前任务次数不会继续消耗。"
|
|
}],
|
|
totalCount: 1,
|
|
notUploadedCount: 0,
|
|
failedArtifactCount: 0,
|
|
succeededCount: 0,
|
|
failedCount: 0,
|
|
queuedCount: 0,
|
|
uploadingCount: 0,
|
|
waitingRetryCount: 1,
|
|
matchingRetryableCount: 1,
|
|
queueHealth: {
|
|
state: "RateLimited",
|
|
isPaused: true,
|
|
reason: "OpenList 登录请求触发限流。队列暂停期间不会发起新的上传请求，也不会消耗单任务重试额度。",
|
|
retryAt: "2026-08-02T12:15:00Z"
|
|
}
|
|
})
|
|
});
|
|
});
|
|
|
|
await page.goto("/upload-tasks");
|
|
await expect(page.getByText("OpenList 正在限流", { exact: true })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "验证并恢复队列" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "重试全部匹配" })).toBeVisible();
|
|
const retryLabel = (page.viewportSize()?.width ?? 0) < 1280 ? "立即重试" : "重试";
|
|
await expect(page.getByRole("button", { name: retryLabel, exact: true })).toBeVisible();
|
|
await expectNoDocumentOverflow(page);
|
|
await capture(page, testInfo, "upload-queue-paused");
|
|
});
|
|
|
|
test("recording failure recovery adapts its actions and long paths to each viewport", async ({ page }, testInfo) => {
|
|
await page.goto("/recovery");
|
|
await expect(page.getByRole("heading", { name: "恢复中心" })).toBeVisible();
|
|
await expect(page.getByRole("heading", { name: "录制失败产物" })).toBeVisible();
|
|
await expect(page.getByText(recordingFailure.filePath, { exact: true })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "确认有效" })).toBeVisible();
|
|
|
|
if ((page.viewportSize()?.width ?? 0) <= 768) {
|
|
await expect(page.locator(".failure-card")).toHaveCount(1);
|
|
await expect(page.getByRole("columnheader", { name: "操作" })).toHaveCount(0);
|
|
} else {
|
|
await expect(page.locator(".failure-card")).toHaveCount(0);
|
|
await expect(page.getByRole("columnheader", { name: "操作" })).toBeVisible();
|
|
}
|
|
|
|
await expectNoDocumentOverflow(page);
|
|
await capture(page, testInfo, "recording-failure-recovery");
|
|
});
|
|
|
|
test("mobile session details keep segment actions visible and left aligned", async ({ page }, testInfo) => {
|
|
test.skip((page.viewportSize()?.width ?? 0) > 768, "mobile session detail contract");
|
|
|
|
await page.goto("/record-tasks");
|
|
const sessionCard = page.locator(".session-card").first();
|
|
await expect(sessionCard).toBeVisible();
|
|
await sessionCard.locator(":scope > .data-card__actions").getByRole("button", { name: "查看", exact: true }).click();
|
|
|
|
await expect(page.getByRole("heading", { name: "会话详情" })).toBeVisible();
|
|
await expect(page.locator(".segment-card")).toHaveCount(3);
|
|
await expect(page.getByRole("columnheader", { name: "操作" })).toHaveCount(0);
|
|
|
|
const firstCard = page.locator(".segment-card").first();
|
|
const firstActions = firstCard.locator(".segment-card__actions");
|
|
const cardBox = await firstCard.boundingBox();
|
|
const actionsBox = await firstActions.boundingBox();
|
|
expect(cardBox).not.toBeNull();
|
|
expect(actionsBox).not.toBeNull();
|
|
expect(actionsBox!.x - cardBox!.x).toBeLessThanOrEqual(20);
|
|
|
|
const lastActions = page.locator(".segment-card__actions").last();
|
|
await lastActions.scrollIntoViewIfNeeded();
|
|
await expect(lastActions.getByRole("button", { name: "查看分片" })).toBeVisible();
|
|
const actionsBottom = await lastActions.boundingBox();
|
|
const bottomNav = await page.locator(".app-bottom-nav").boundingBox();
|
|
expect(actionsBottom).not.toBeNull();
|
|
expect(bottomNav).not.toBeNull();
|
|
expect(actionsBottom!.y + actionsBottom!.height).toBeLessThanOrEqual(bottomNav!.y + 1);
|
|
await capture(page, testInfo, "mobile-session-detail");
|
|
});
|
|
|
|
test("mobile upload polling keeps cards and scroll position while progress updates", async ({ page }) => {
|
|
test.skip((page.viewportSize()?.width ?? 0) > 768, "mobile polling contract");
|
|
|
|
const allItems = Array.from({ length: 60 }, (_, index) => ({
|
|
...uploadTask,
|
|
recordTaskId: `upload-task-${index + 1}`,
|
|
segmentIndex: index + 1,
|
|
liveRoomTitle: `轮询直播间 ${index + 1}`,
|
|
uploadStatus: 3,
|
|
uploadProgressPercent: 10
|
|
}));
|
|
let requestCount = 0;
|
|
let inFlight = 0;
|
|
let maxInFlight = 0;
|
|
|
|
await page.route("**/api/record-tasks/upload-status**", async (route) => {
|
|
requestCount++;
|
|
inFlight++;
|
|
maxInFlight = Math.max(maxInFlight, inFlight);
|
|
const url = new URL(route.request().url());
|
|
const skip = Number(url.searchParams.get("skip") || 0);
|
|
const take = Number(url.searchParams.get("take") || 50);
|
|
if (requestCount > 1) {
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
}
|
|
const progress = requestCount > 1 ? 42 : 10;
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
items: allItems.slice(skip, skip + take).map((item) => ({ ...item, uploadProgressPercent: progress })),
|
|
totalCount: allItems.length,
|
|
notUploadedCount: 0,
|
|
failedArtifactCount: 0,
|
|
succeededCount: 0,
|
|
failedCount: 0,
|
|
queuedCount: 0,
|
|
uploadingCount: allItems.length,
|
|
waitingRetryCount: 0,
|
|
matchingRetryableCount: 0,
|
|
queueHealth: { state: "Healthy", isPaused: false }
|
|
})
|
|
});
|
|
inFlight--;
|
|
});
|
|
|
|
await page.goto("/upload-tasks");
|
|
await expect(page.locator(".upload-item-card")).toHaveCount(12);
|
|
await expect(page.getByText("10.0% · 第 0 次").first()).toBeVisible();
|
|
|
|
const main = page.locator(".app-main");
|
|
await main.evaluate((element) => { element.scrollTop = element.scrollHeight; });
|
|
const scrollTopBefore = await main.evaluate((element) => element.scrollTop);
|
|
expect(scrollTopBefore).toBeGreaterThan(500);
|
|
|
|
await expect.poll(() => requestCount, { timeout: 10_000 }).toBeGreaterThan(1);
|
|
await expect(page.locator(".upload-item-card")).toHaveCount(12);
|
|
await expect(page.locator(".el-skeleton")).toHaveCount(0);
|
|
await expect(page.getByText("42.0% · 第 0 次").first()).toBeVisible();
|
|
|
|
const scrollTopAfter = await main.evaluate((element) => element.scrollTop);
|
|
expect(Math.abs(scrollTopAfter - scrollTopBefore)).toBeLessThanOrEqual(2);
|
|
expect(maxInFlight).toBe(1);
|
|
});
|
|
|
|
test("settings layer advanced controls without clipping the quick bar", async ({ page }, testInfo) => {
|
|
await page.goto("/settings/recording");
|
|
await expect(page.getByRole("heading", { name: "系统设置" })).toBeVisible();
|
|
await expect(page.getByRole("heading", { name: "保留清理" })).toBeHidden();
|
|
await page.getByText("高级设置", { exact: true }).click();
|
|
await expect(page.getByRole("heading", { name: "保留清理" })).toBeVisible();
|
|
await expectNoDocumentOverflow(page);
|
|
await capture(page, testInfo, "settings");
|
|
});
|
|
|
|
test("OpenList test distinguishes login success from a broken destination mount", async ({ page }) => {
|
|
await page.route("**/api/settings", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
enableFileUpload: true,
|
|
enableAutoUpload: true,
|
|
uploadTarget: 3,
|
|
openListUpload: {
|
|
baseUrl: "https://openlist.example.com",
|
|
username: "tester",
|
|
password: "secret",
|
|
basePath: "/archive",
|
|
sourcePath: "/source",
|
|
destinationPath: "/archive"
|
|
}
|
|
})
|
|
});
|
|
});
|
|
await page.route("**/api/settings/openlist/test", async (route) => {
|
|
const request = route.request().postDataJSON();
|
|
expect(request.sourcePath).toBe("/source");
|
|
expect(request.destinationPath).toBe("/archive");
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
success: false,
|
|
version: "4.1.10",
|
|
message: "OpenList 登录成功，但一个或多个配置目录不可用。",
|
|
sourcePath: { path: "/source", success: true, canWrite: false, message: "目录可访问。" },
|
|
destinationPath: { path: "/archive", success: false, canWrite: false, message: "provider timeout" }
|
|
})
|
|
});
|
|
});
|
|
|
|
await page.goto("/settings/upload");
|
|
await expect(page.getByRole("heading", { name: "OpenList 服务端复制" })).toBeVisible();
|
|
await page.getByRole("button", { name: "测试连接" }).click();
|
|
await expect(page.getByText("配置异常", { exact: true })).toBeVisible();
|
|
await expect(page.getByText("目录可访问。", { exact: true })).toBeVisible();
|
|
await expect(page.getByText("provider timeout", { exact: true })).toBeVisible();
|
|
await expectNoDocumentOverflow(page);
|
|
});
|