503 lines
19 KiB
TypeScript
503 lines
19 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,
|
|
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 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 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") 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
|
|
};
|
|
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("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%");
|
|
await expectNoDocumentOverflow(page);
|
|
await capture(page, testInfo, "dashboard");
|
|
});
|
|
|
|
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);
|
|
}
|
|
|
|
await page.getByRole("button", { name: /^查看/ }).first().click();
|
|
const drawerFooter = page.locator(".right-drawer__footer");
|
|
await expect(drawerFooter).toBeVisible();
|
|
const footerBox = await drawerFooter.boundingBox();
|
|
expect(footerBox && footerBox.y + footerBox.height).toBeLessThanOrEqual((page.viewportSize()?.height ?? 0) + 1);
|
|
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.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 }) => {
|
|
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();
|
|
});
|
|
|
|
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("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
|
|
})
|
|
});
|
|
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");
|
|
});
|