2144 lines
152 KiB
TypeScript
2144 lines
152 KiB
TypeScript
import { expect, Page, test } from "@playwright/test";
|
||
import { mkdir } from "node:fs/promises";
|
||
|
||
const source = {
|
||
id: "source-1", kind: "local", name: "私有影片", status: "idle", enabled: true,
|
||
config: { path: "/media/private", writable: true },
|
||
};
|
||
const tags = [{
|
||
id: "group-1", name: "场景", selection_mode: "multi", sort_order: 0, tag_count: 2, video_count: 2,
|
||
tags: [
|
||
{ id: "tag-1", group_id: "group-1", group_name: "场景", selection_mode: "multi", name: "卧室", ai_enabled: true, ai_method: "visual", ai_description: "卧室内景", ai_threshold: .28, match_terms: [], video_count: 2 },
|
||
{ id: "tag-2", group_id: "group-1", group_name: "场景", selection_mode: "multi", name: "浴室", ai_enabled: false, ai_method: "visual", ai_description: "", ai_threshold: .28, match_terms: [], video_count: 0 },
|
||
],
|
||
}];
|
||
const videos = Array.from({ length: 8 }, (_, index) => ({
|
||
id: `video-${index}`, source_id: source.id, display_name: `PRIVATE-${index + 1}.mp4`,
|
||
title: index ? `私人收藏影片 ${index + 1}` : "示例影片：已整理的私人收藏",
|
||
source_key: `collection/PRIVATE-${index + 1}.mp4`, source_name: source.name, source_kind: "local",
|
||
source_driver: "local", size_bytes: 2_000_000_000 + index * 1000, duration_ms: 5_400_000,
|
||
width: index % 2 ? 1920 : 3840, height: index % 2 ? 1080 : 2160, status: "indexed", available: true,
|
||
catalog_code: `PRIVATE-${String(index + 1).padStart(3, "0")}`, studio: "本地收藏", series: "示例系列",
|
||
collection_id:"collection-1",collection_name:"示例合集",collection_position:index,
|
||
description: "这是用于验证布局的本地示例资料。", actors: ["示例演员"], tags: index < 2 ? ["卧室"] : [],
|
||
tag_items: index < 2 ? [{ id: "tag-1", name: "卧室", group_id: "group-1", group_name: "场景", selection_mode: "multi" }] : [],
|
||
liked: index === 0, favorited: index === 1, progress_ms: index < 2 ? 900_000 + index * 300_000 : 0,
|
||
completed: false, last_played_at: index < 2 ? "2026-07-27T12:00:00Z" : null,
|
||
created_at: "2026-07-27T10:00:00Z", updated_at: "2026-07-27T10:00:00Z",
|
||
playback_url: `/api/v1/videos/video-${index}/stream`, download_url: `/api/v1/videos/video-${index}/download`,
|
||
}));
|
||
const collections=[{id:"collection-1",name:"示例合集",description:"按推荐顺序连续观看",cover_video_id:"video-0",video_count:8,duration_ms:43_200_000,thumbnail_url:null,created_at:"2026-07-27T10:00:00Z",updated_at:"2026-07-27T10:00:00Z"}];
|
||
|
||
async function mockApi(page: Page, accessMode: "direct"|"gateway"="direct", gatewayAuthRecovery=false) {
|
||
let preferences = { autoplay: true, mask_covers: false, theme: "system" as "system"|"light"|"dark", home_video_columns: 2 as 1|2, upload_paths: {} };
|
||
let speechConfig = { language_policy: "zh_priority" as "zh_priority"|"auto"|"zh", quality_profile: "accuracy" as "speed"|"balanced"|"accuracy", index_revision: 2 };
|
||
let webdavConfig = { enabled: false, source_id: source.id as string|null, relative_path: "", url: "http://127.0.0.1:8765/webdav/", username: "imagefind", direct_access: true, direct_port: 8765, gateway_supported: false as const };
|
||
let collectionTags = [tags[0].tags[0]];
|
||
let markers = [{ id: "marker-1", video_id: "video-0", position_ms: 600_000, title: "精彩片段", created_at: "2026-07-27T10:00:00Z", updated_at: "2026-07-27T10:00:00Z" }];
|
||
let backupExports:Array<Record<string,unknown>>=[];
|
||
const authProbe={gatewayLoginRequests:0,gatewayMediaTokenRequests:0,gatewaySessionHeaders:[] as string[]};
|
||
await page.route("**/api/v1/**", async route => {
|
||
const url = new URL(route.request().url());
|
||
const apiIndex = url.pathname.indexOf("/api/v1");
|
||
const path = url.pathname.slice(apiIndex + "/api/v1".length);
|
||
let body: unknown = {};
|
||
if (path === "/status") body = { configured: true, version: "0.5.45", access_mode: accessMode };
|
||
else if (path === "/auth/me") {
|
||
const gatewayHeader=route.request().headers()["x-imagefind-gateway-session"]||"";
|
||
authProbe.gatewaySessionHeaders.push(gatewayHeader);
|
||
if(gatewayAuthRecovery&&gatewayHeader!=="gateway-session-token"){
|
||
await route.fulfill({status:401,contentType:"application/json",body:JSON.stringify({detail:"飞牛管理员会话需要重新建立"})});
|
||
return;
|
||
}
|
||
body = { csrf: gatewayAuthRecovery?"gateway-csrf":"test-csrf" };
|
||
}
|
||
else if(path==="/auth/gateway/media-token"){
|
||
authProbe.gatewayMediaTokenRequests+=1;
|
||
body={gateway_media_token:"gateway-media-token",gateway_media_expires_at:"2026-07-30T00:00:00Z"};
|
||
}
|
||
else if(path==="/auth/gateway"){
|
||
authProbe.gatewayLoginRequests+=1;
|
||
body={csrf_token:"gateway-csrf",gateway_session_token:"gateway-session-token",gateway_media_token:"gateway-media-token",kind:"gateway",nas_user_id:"nas-admin",nas_username:"Administrator"};
|
||
}
|
||
else if (path === "/sources") body = [source];
|
||
else if (path === "/home") body = {
|
||
video_count:videos.length,updated_at:"2026-07-27T10:00:00Z",
|
||
recent:{id:"recent",title:"最近新增",total:videos.length,items:videos},
|
||
collections:{total:collections.length,items:collections},
|
||
categories:[{id:"tag:tag-1",tag_id:"tag-1",title:"卧室",group_name:"场景",total:2,items:videos.slice(0,2)}],
|
||
people:[{id:"actor-1",name:"示例演员",video_count:8,thumbnail_url:null}],
|
||
unorganized:null,
|
||
};
|
||
else if (path === "/files") body = [];
|
||
else if (path === "/videos") body = videos;
|
||
else if (path === "/search/coverage") body = {available:true,model_version:"audio-v1",total:8,indexed:5,searchable:4,empty:1,queued:2,running:1,failed:0,pending:0,percent:50,current_model_percent:62.5};
|
||
else if (/^\/videos\/[^/]+\/transcript$/.test(path)) body = {status:"ready",model_version:"audio-v1",indexed_version:"audio-v1",detected_language:"zh",quality_score:.94,quality_state:"filtered",rejected_segments:1,quality_flags:["short_hallucination"],items:[{id:"speech-1",start_ms:180000,end_ms:184000,raw_text:"这是一段可以搜索的中文音频转写",language:"zh",quality_score:.96},{id:"speech-2",start_ms:360000,end_ms:365000,raw_text:"点击时间片段可以直接跳转播放",language:"zh",quality_score:.92}],page:1,page_size:30,total:2,pages:1,job:null};
|
||
else if (/^\/videos\/[^/]+\/transcript\/reindex$/.test(path)) body = {job_id:"audio-reindex-1",status:"queued"};
|
||
else if (/^\/videos\/[^/]+\/markers$/.test(path)) {
|
||
if (route.request().method() === "POST") {
|
||
const request = route.request().postDataJSON() as {position_ms:number;title?:string};
|
||
const videoId = path.split("/")[2];
|
||
const marker = { id: `marker-${markers.length + 1}`, video_id: videoId, position_ms: request.position_ms, title: request.title || "", created_at: "2026-07-27T10:00:00Z", updated_at: "2026-07-27T10:00:00Z" };
|
||
markers = [...markers, marker]; body = marker;
|
||
} else body = markers.filter(marker => marker.video_id === path.split("/")[2]);
|
||
}
|
||
else if (/^\/videos\/[^/]+\/markers\/[^/]+$/.test(path)) {
|
||
const markerId = path.split("/")[4];
|
||
if (route.request().method() === "PATCH") {
|
||
const request = route.request().postDataJSON() as {title?:string};
|
||
markers = markers.map(marker => marker.id === markerId ? { ...marker, title: request.title || "", updated_at: "2026-07-27T11:00:00Z" } : marker);
|
||
body = markers.find(marker => marker.id === markerId);
|
||
} else if (route.request().method() === "DELETE") {
|
||
markers = markers.filter(marker => marker.id !== markerId); body = { deleted: true };
|
||
}
|
||
}
|
||
else if (path.startsWith("/videos/") && route.request().method() === "DELETE") {
|
||
body = { video_id: path.split("/")[2], trash_id: "trash-video", cancelled_jobs: 0 };
|
||
}
|
||
else if (path === "/uploads") body = [];
|
||
else if (path === "/downloads") body = [];
|
||
else if (path === "/downloads/runtime") body = { available: true, running: false };
|
||
else if (path === "/jobs") body = url.searchParams.has("page")?{items:[],page:1,page_size:10,total:0,pages:1,retryable_failed_count:0}:[];
|
||
else if (path === "/people") body = [];
|
||
else if (path === "/actors") body = [{ id: "actor-1", name: "示例演员", video_count: 8, aliases: [] }];
|
||
else if (path === "/tag-groups") body = tags;
|
||
else if (path === "/preferences") {
|
||
if (route.request().method() === "PATCH") preferences = { ...preferences, ...(route.request().postDataJSON() as Partial<typeof preferences>) };
|
||
body = preferences;
|
||
}
|
||
else if (path === "/profile") body = { nickname: "管理员", avatar: { text: "管", color: "#3974dc", accent: "#6f9df1" }, role: "administrator", created_at: "2026-01-01T00:00:00Z", counts: { favorites: 1, likes: 1, history: 2, continue_watching: 2 } };
|
||
else if(path==="/collections") body=route.request().method()==="POST"?{...collections[0],id:"collection-new",name:(route.request().postDataJSON() as {name:string}).name}:collections;
|
||
else if(path==="/collections/collection-1/tags") {
|
||
if(route.request().method()==="PUT") {
|
||
const ids=(route.request().postDataJSON() as {tag_ids:string[]}).tag_ids;
|
||
collectionTags=tags.flatMap(group=>group.tags).filter(tag=>ids.includes(tag.id));
|
||
body={applied:videos.length};
|
||
} else body=collectionTags;
|
||
}
|
||
else if(path==="/collections/collection-1") body={...collections[0],videos};
|
||
else if(path.startsWith("/collections/")) body={updated:1};
|
||
else if (path === "/series") body = [{ name: "示例系列", video_count: 8, duration_ms: 43_200_000 }];
|
||
else if (path === "/storage/usage") body = { disk: { total_bytes: 4 * 1024 ** 4, used_bytes: 2 * 1024 ** 4, available_bytes: 2 * 1024 ** 4 }, app_bytes: 20 * 1024 ** 3, categories: { database: { bytes: 1024 ** 3, available: true }, ai_index: { bytes: 8 * 1024 ** 3, available: true, mode: "qdrant" }, models: { bytes: 5 * 1024 ** 3, available: true }, thumbnails: { bytes: 2 * 1024 ** 3, available: true }, preview_cache: { bytes: 3 * 1024 ** 3, available: true }, upload_staging: { bytes: 0, available: true }, other: { bytes: 1024 ** 3, available: true } } };
|
||
else if (path === "/system/resources") body = { profile:"balanced",ai_gpu_mode:"balanced",ai_gpu_profile:{mode:"balanced",selected_mode:"balanced",degraded:false,hint:"THROUGHPUT",streams:2,batch_size:2},manual_pause:false,running_jobs:1,paused_jobs:0,cpu_percent:12.5,memory_total_bytes:8*1024**3,memory_available_bytes:5*1024**3,disk_available_bytes:2*1024**4,database:{engine:"postgresql",journal_mode:"server",writer_queue_depth:0,writer_active:false,last_wait_ms:0.4,max_wait_ms:12.5,lock_retry_count:0,slow_transaction_count:0},lanes:{ai:{limit:1,running:1,queued:2,paused:0},transfer:{limit:1,running:0,queued:1,paused:0},download:{limit:1,running:0,queued:0,paused:0},scan:{limit:1,running:0,queued:0,paused:0}},policy:{cpu_pause_percent:70,cpu_resume_percent:55,memory_reserve_mb:768,memory_reserve_percent:20,disk_reserve_gb:5},io:{supported:true,state:"normal",scope:"data_volume",some_avg10:61.2,some_avg60:48.8,full_avg10:32.2,full_avg60:21.1,volume_supported:true,volume_sampled:true,volume_device:"253:1",volume_mount_point:"/vol1",volume_in_flight:1,volume_utilization_percent:21.4,effective_limit_bytes:12*1024**2},remote_cache:{limit_bytes:10*1024**3,used_bytes:2*1024**3,active_bytes:1024**3,evictable_bytes:1024**3,entries:2,downloading:1},rclone:{managed:1,orphaned:0,draining:1,verifying:1,unresolved:0,reclaimed:2,last_checked_at:"2026-08-05T08:00:00Z",next_check_seconds:60,reasons:{observing_idle:1},cache_bytes:128*1024**2} };
|
||
else if (path === "/system/resources/rclone/reconcile") body = {matched:1,reaped:0,verifying:1,unresolved:0,status:{managed:1,orphaned:0,draining:1,verifying:1,unresolved:0,reclaimed:2,last_checked_at:"2026-08-05T08:01:00Z",next_check_seconds:60,reasons:{observing_idle:1},cache_bytes:128*1024**2}};
|
||
else if (path === "/speech/config") {
|
||
if(route.request().method()==="PATCH")speechConfig={...speechConfig,...route.request().postDataJSON() as Partial<typeof speechConfig>};
|
||
body=speechConfig;
|
||
}
|
||
else if (path === "/speech/reconcile") body={scanned:8,flagged:2,current:6,queued:2};
|
||
else if (path === "/activity") body = { items: [], unread: 0 };
|
||
else if (path === "/tag-suggestions") body = [];
|
||
else if (path === "/models") body = {
|
||
visual_ready: false, ocr_ready: false, faces_ready: false, audio_ready: false, pending_videos: 0,
|
||
hf_endpoint: "https://huggingface.co", pip: { index_url: "https://pypi.tuna.tsinghua.edu.cn/simple", pytorch_index_url: "https://download.pytorch.org/whl/cpu" }, accelerator: { selected: "首次推理时自动选择" },
|
||
proxy: { enabled: false, url: "", username: "", has_password: false }, component_sizes: { audio: 0 }, component_versions: {},runtime_dependencies:{},runtime_environment:{state:"missing",size_bytes:0,components:[]},component_health:{},
|
||
sources: {
|
||
visual_image: "https://huggingface.co/sentence-transformers/clip-ViT-B-32",
|
||
visual_text: "https://huggingface.co/sentence-transformers/clip-ViT-B-32-multilingual-v1",
|
||
ocr: "https://github.com/RapidAI/RapidOCR/tree/main/python/rapidocr_onnxruntime/rapidocr_onnxruntime/models",
|
||
audio: "https://huggingface.co/openai/whisper-small",
|
||
faces: { detector_xml: "https://models.example/face-detection.xml", detector_bin: "https://models.example/face-detection.bin", reidentification_xml: "https://models.example/face-reidentification.xml", reidentification_bin: "https://models.example/face-reidentification.bin" },
|
||
},
|
||
};
|
||
else if (path === "/tokens") body = route.request().method()==="POST"?{id:"token-webdav",name:"WebDAV 专用 Token 1",token:"dav-secret-once",created_at:"2026-07-27T10:00:00Z"}:[];
|
||
else if (path === "/webdav/config") {
|
||
if(route.request().method()==="PATCH") webdavConfig={...webdavConfig,...route.request().postDataJSON() as Partial<typeof webdavConfig>};
|
||
body=webdavConfig;
|
||
}
|
||
else if (path === "/backups/status") body = {
|
||
empty: true, can_restore: true, blockers: {},
|
||
business_counts: { sources: 0, videos: 0, people: 0, actors: 0, tags: 0 },
|
||
supported_format_versions: [1], max_upload_bytes: 2 * 1024 ** 3, max_extract_bytes: 4 * 1024 ** 3,
|
||
};
|
||
else if (path === "/backups") {
|
||
if(route.request().method()==="POST"){
|
||
const request=route.request().postDataJSON() as {scope:"keys"|"full"};
|
||
const queued={id:"backup-1",job_id:"backup-job-1",scope:request.scope,status:"queued",created_at:"2026-07-28T10:00:00Z"};
|
||
backupExports=[queued];
|
||
await route.fulfill({status:202,contentType:"application/json",body:JSON.stringify(queued)});
|
||
return;
|
||
}
|
||
if(backupExports.length&&backupExports[0].status==="queued")backupExports=[{...backupExports[0],status:"completed",filename:"imagefind-backup-20260728-full.ifbackup",size_bytes:16,finished_at:"2026-07-28T10:00:03Z"}];
|
||
body=backupExports;
|
||
}
|
||
else if (/^\/backups\/[^/]+\/download$/.test(path)) {
|
||
await route.fulfill({
|
||
status: 200,
|
||
contentType: "application/vnd.imagefind.backup",
|
||
headers: { "Content-Disposition": 'attachment; filename="imagefind-backup-20260728-full.ifbackup"' },
|
||
body: Buffer.from("encrypted-backup"),
|
||
});
|
||
return;
|
||
}
|
||
else if (path === "/backups/restore") body = {
|
||
scope: "full", created_at: "2026-07-28T10:00:00Z", source_app_version: "0.3.3",
|
||
counts: { sources: 2, videos: 8, tag_groups: 1, tags: 2, actors: 1, video_metadata: 8, video_state: 2 },
|
||
scan_jobs: [{ source_id: "source-1", job_id: "scan-1" }, { source_id: "source-2", job_id: "scan-2" }],
|
||
warnings: ["本地来源“离线盘”路径暂不可用，将在路径恢复后重新扫描"],
|
||
};
|
||
await route.fulfill({ status: 200, contentType: "application/json", body: JSON.stringify(body) });
|
||
});
|
||
return authProbe;
|
||
}
|
||
|
||
async function visualSnapshot(page: Page, name: string, fullPage=true) {
|
||
await expect(page.locator(".mobile-more-menu.closing")).toHaveCount(0);
|
||
await page.evaluate(()=>document.fonts.ready);
|
||
await page.evaluate(async()=>{
|
||
const finite=document.getAnimations().filter(animation=>Number.isFinite(animation.effect?.getComputedTiming().endTime??Number.POSITIVE_INFINITY));
|
||
await Promise.all(finite.map(animation=>animation.finished.catch(()=>undefined)));
|
||
});
|
||
const cjkFont=await page.evaluate(()=>{
|
||
const canvas=document.createElement("canvas");const context=canvas.getContext("2d")!;
|
||
context.font='32px monospace';const fallback=context.measureText("Wi中文排版验证").width;
|
||
context.font='32px "Noto Sans CJK SC", monospace';const noto=context.measureText("Wi中文排版验证").width;
|
||
return Math.abs(noto-fallback)>.1;
|
||
});
|
||
expect(cjkFont,"视觉测试需要安装 fonts-noto-cjk").toBe(true);
|
||
const metrics = await page.evaluate(() => {
|
||
const rect = (selector: string) => {
|
||
const box = document.querySelector(selector)?.getBoundingClientRect();
|
||
return box ? { x: Math.round(box.x), y: Math.round(box.y), width: Math.round(box.width), height: Math.round(box.height) } : null;
|
||
};
|
||
return {
|
||
viewport: { width: innerWidth, height: innerHeight },
|
||
document: { width: document.documentElement.scrollWidth, height: document.documentElement.scrollHeight },
|
||
topbar: rect(".topbar"), sidebar: rect(".sidebar"), content: rect(".content"), page: rect(".page"),
|
||
videoGrid: rect(".video-grid,.home-rail-track"), tagGroups: rect(".tag-groups"), mobileMore: rect(".mobile-more-menu"),
|
||
};
|
||
});
|
||
expect(metrics.document.width).toBeLessThanOrEqual(metrics.viewport.width + 1);
|
||
expect(JSON.stringify(metrics, null, 2)).toMatchSnapshot(name.replace(".png", ".json"));
|
||
await expect(page).toHaveScreenshot(name, { fullPage });
|
||
}
|
||
|
||
async function openSettings(page: Page, width: number) {
|
||
if (width <= 720) {
|
||
await page.getByRole("button", { name: "更多" }).click();
|
||
await page.locator(".mobile-more-menu").getByRole("button", { name: "设置" }).click();
|
||
} else {
|
||
await page.locator(".nav-item-8").click({ force: true });
|
||
}
|
||
await expect(page.getByRole("heading", { name: "设置" })).toBeVisible();
|
||
}
|
||
|
||
type AuditPage = "home"|"search"|"library"|"series"|"uploads"|"tags"|"actors"|"profile"|"settings"|"player";
|
||
const auditHeadings:Partial<Record<AuditPage,string>>={home:"最近新增",search:"搜索你的媒体库",library:"媒体资料库",series:"合集",uploads:"传输中心",tags:"分类与标签",actors:"演员与人物",profile:"管理员",settings:"设置"};
|
||
const auditMenuNames:Partial<Record<AuditPage,string>>={library:"资料库",series:"合集",uploads:"上传中心",tags:"分类与标签",actors:"演员与人物",settings:"设置"};
|
||
async function openAuditPage(page:Page,destination:AuditPage,width:number){
|
||
await page.goto("/");
|
||
const mobile=width<=720;
|
||
if(destination==="search")await page.getByRole("button",{name:"搜索",exact:true}).first().click();
|
||
else if(destination==="profile"){
|
||
if(mobile)await page.locator(".mobile-profile-button").click();
|
||
else{await page.locator(".avatar").click();await page.locator(".account-popover").getByRole("button",{name:"个人中心"}).click()}
|
||
}else if(destination==="player")await page.locator(".video-card").first().click();
|
||
else if(destination!=="home"){
|
||
if(mobile){
|
||
await page.getByRole("button",{name:"更多"}).click();
|
||
await page.locator(".mobile-more-menu").getByRole("button",{name:new RegExp(auditMenuNames[destination]||destination)}).first().click();
|
||
}else{
|
||
const selector:Record<Exclude<AuditPage,"home"|"search"|"profile"|"player">,string>={library:".nav-item-3",series:".nav-item-4",uploads:".sidebar nav > .upload-status",tags:".nav-item-6",actors:".nav-item-7",settings:".nav-item-8"};
|
||
await page.locator(selector[destination as keyof typeof selector]).click();
|
||
}
|
||
}
|
||
if(destination==="player")await expect(page.locator(".player-stage")).toBeVisible();
|
||
else await expect(page.getByRole("heading",{name:auditHeadings[destination]!,exact:destination!=="profile"}).first()).toBeVisible();
|
||
}
|
||
|
||
test("desktop home and tag management visual contract", async ({ page }) => {
|
||
await page.setViewportSize({ width: 1440, height: 900 });
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await expect(page.getByRole("heading", { name: "最近新增" })).toBeVisible();
|
||
await expect(page.getByText("你的私有媒体空间")).toHaveCount(0);
|
||
await expect(page.locator(".home-content-rail")).toHaveCount(4);
|
||
await expect(page.locator(".home-rail-track").first().locator(".video-card")).toHaveCount(8);
|
||
await expect(page.getByText("继续观看", { exact: true })).toHaveCount(0);
|
||
const recentRail=page.locator(".home-rail-track").first();
|
||
await expect(page.locator(".home-feed").getByRole("button",{name:"单列显示"})).toHaveCount(0);
|
||
await expect(page.locator(".home-feed").getByRole("button",{name:"双列显示"})).toHaveCount(0);
|
||
const recentSection=page.locator(".home-content-rail").filter({has:page.getByRole("heading",{name:"最近新增"})});
|
||
await recentSection.getByRole("button",{name:/查看全部/}).click();
|
||
const focusedGrid=page.locator(".home-focused-browser .home-video-grid");
|
||
const compactCardWidth=(await focusedGrid.locator(".video-card").first().boundingBox())!.width;
|
||
const layoutRequest=page.waitForRequest(request=>request.url().endsWith("/api/v1/preferences")&&request.method()==="PATCH");
|
||
await page.getByRole("button",{name:"单列显示"}).click();
|
||
expect((await layoutRequest).postDataJSON()).toMatchObject({home_video_columns:1});
|
||
await expect(focusedGrid).toHaveClass(/columns-1/);
|
||
const wideCardWidth=(await focusedGrid.locator(".video-card").first().boundingBox())!.width;
|
||
expect(wideCardWidth).toBeGreaterThan(compactCardWidth*1.5);
|
||
await page.getByRole("button",{name:"双列显示"}).click();
|
||
await expect(focusedGrid).toHaveClass(/columns-2/);
|
||
await page.goBack();
|
||
await expect(recentRail).toBeVisible();
|
||
await visualSnapshot(page, "desktop-home.png");
|
||
await page.getByRole("button", { name: "分类与标签" }).click({ force: true });
|
||
await expect(page.getByRole("heading", { name: "分类与标签" })).toBeVisible();
|
||
await expect(page.getByText("画面识别 ≥ 0.28")).toBeVisible();
|
||
await visualSnapshot(page, "desktop-tags.png");
|
||
});
|
||
|
||
test("search focus and mobile filters remain contained",async({page})=>{
|
||
await page.setViewportSize({width:1440,height:900});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
const globalInput=page.locator(".global-search>input:not([type=file])");
|
||
await globalInput.focus();
|
||
await expect(globalInput).toHaveCSS("outline-style","none");
|
||
|
||
await page.setViewportSize({width:390,height:844});
|
||
await page.getByRole("button",{name:"搜索",exact:true}).first().click();
|
||
const mobileInput=page.getByLabel("搜索内容");
|
||
await mobileInput.focus();
|
||
await expect(mobileInput).toHaveCSS("outline-style","none");
|
||
const searchHeaderLayout=await page.locator(".mobile-search-header").evaluate(header=>{const outer=header.getBoundingClientRect();const children=[...header.children].filter(element=>(element as HTMLElement).offsetParent!==null).map(element=>{const box=element.getBoundingClientRect();return {top:box.top,bottom:box.bottom}});return {height:outer.height,contains:children.every(box=>box.top>=outer.top-1&&box.bottom<=outer.bottom+1)}});
|
||
expect(searchHeaderLayout.height).toBeGreaterThanOrEqual(64);
|
||
expect(searchHeaderLayout.contains).toBe(true);
|
||
for(const selector of [".recognition-filter",".filter-row"]){
|
||
const filterMetrics=await page.locator(selector).evaluate(element=>({right:element.getBoundingClientRect().right,viewport:innerWidth,scrollWidth:element.scrollWidth,clientWidth:element.clientWidth}));
|
||
expect(filterMetrics.right).toBeLessThanOrEqual(filterMetrics.viewport+1);
|
||
expect(filterMetrics.scrollWidth).toBeLessThanOrEqual(filterMetrics.clientWidth+1);
|
||
}
|
||
const selectStyles=await page.locator(".filter-row select").evaluateAll(elements=>elements.map(element=>({appearance:getComputedStyle(element).appearance,background:getComputedStyle(element).backgroundImage,height:element.getBoundingClientRect().height})));
|
||
expect(selectStyles.every(style=>style.appearance==="none"&&style.background!=="none"&&style.height>=44)).toBe(true);
|
||
await expect(page.locator("html")).toHaveJSProperty("scrollWidth",390);
|
||
});
|
||
|
||
test("home shelves open bounded browse views and preserve browser navigation",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
await page.route("**/api/v1/home**",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({
|
||
video_count:videos.length,updated_at:"2026-07-27T10:00:00Z",
|
||
recent:{id:"recent",title:"最近新增",total:videos.length,items:videos.slice(0,4)},
|
||
collections:{total:1,items:collections},categories:[],people:[],unorganized:null,
|
||
})}));
|
||
let requestedOffset="";
|
||
await page.route("**/api/v1/videos?*",async route=>{
|
||
const url=new URL(route.request().url());
|
||
if(url.searchParams.get("offset")!=="4")return route.fallback();
|
||
requestedOffset=url.searchParams.get("offset")||"";
|
||
await route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(videos.slice(4))});
|
||
});
|
||
await page.goto("/");
|
||
const recent=page.locator(".home-content-rail").filter({has:page.getByRole("heading",{name:"最近新增"})});
|
||
await expect(recent.locator(".video-card")).toHaveCount(4);
|
||
await recent.getByRole("button",{name:/查看全部/}).click();
|
||
await expect(page.locator(".home-focused-browser")).toBeVisible();
|
||
await expect(page.locator(".home-focused-browser .video-card")).toHaveCount(4);
|
||
await page.getByRole("button",{name:"加载更多"}).click();
|
||
await expect(page.locator(".home-focused-browser .video-card")).toHaveCount(8);
|
||
expect(requestedOffset).toBe("4");
|
||
await page.goBack();
|
||
await expect(recent).toBeVisible();
|
||
await expect(page.locator(".home-focused-browser")).toHaveCount(0);
|
||
await page.locator(".home-collection-card").click();
|
||
await expect(page.getByRole("heading",{name:"示例合集"})).toBeVisible();
|
||
await expect(page.locator(".collection-preview-directory")).toBeVisible();
|
||
await expect(page.locator(".collection-row-actions")).toHaveCount(0);
|
||
await page.goBack();
|
||
const collectionsRail=page.locator(".home-content-rail").filter({has:page.getByRole("heading",{name:"合集"})});
|
||
await collectionsRail.getByRole("button",{name:/查看全部/}).click();
|
||
await expect(page.locator(".collection-browser-grid .collection-overview-card")).toHaveCount(1);
|
||
await expect(page.locator(".collection-preview-video,.collection-video-row")).toHaveCount(0);
|
||
});
|
||
|
||
test("video covers summarize classification tags without crowding mobile cards",async({page})=>{
|
||
await page.setViewportSize({width:320,height:780});
|
||
await mockApi(page);
|
||
const tagged={...videos[0],tag_items:[
|
||
tags[0].tags[0],tags[0].tags[1],
|
||
{id:"tag-extra",group_id:"group-extra",group_name:"内容类型",selection_mode:"multi" as const,name:"需要截断的超长分类名称",ai_enabled:false,ai_method:"visual",ai_description:"",ai_threshold:.28,match_terms:[],video_count:1},
|
||
]};
|
||
await page.route("**/api/v1/home**",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({
|
||
video_count:videos.length,updated_at:"2026-07-27T10:00:00Z",
|
||
recent:{id:"recent",title:"最近新增",total:videos.length,items:[tagged,videos[1],...videos.slice(2)]},
|
||
collections:{total:0,items:[]},categories:[],people:[],unorganized:null,
|
||
})}));
|
||
await page.goto("/");
|
||
const first=page.locator(".home-rail-track .video-card").first();
|
||
const badges=first.locator(".video-cover-tags");
|
||
await expect(badges.locator(":scope > span")).toHaveCount(2);
|
||
await expect(badges.locator(":scope > b")).toHaveText("+1");
|
||
await expect(first).toHaveAttribute("aria-label",/分类 卧室、浴室、需要截断的超长分类名称/);
|
||
await expect(page.locator(".home-rail-track .video-card").nth(2).locator(".video-cover-tags")).toHaveCount(0);
|
||
const contained=await first.locator(".video-thumb").evaluate(thumb=>{const cover=thumb.getBoundingClientRect();const tags=thumb.querySelector(".video-cover-tags")!.getBoundingClientRect();const duration=thumb.querySelector(".duration")!.getBoundingClientRect();return tags.left>=cover.left&&tags.right<=cover.right+1&&tags.top>=cover.top&&tags.bottom<duration.top});
|
||
expect(contained).toBe(true);
|
||
expect(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth)).toBe(true);
|
||
});
|
||
|
||
test("mobile navigation keeps every page reachable", async ({ page }) => {
|
||
await page.setViewportSize({ width: 390, height: 844 });
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await expect(page.getByRole("heading", { name: "最近新增" })).toBeVisible();
|
||
await expect(page.getByText("你的私有媒体空间")).toHaveCount(0);
|
||
await expect(page.getByText("继续观看", { exact: true })).toHaveCount(0);
|
||
await expect(page.locator(".home-rail-track").first().locator(".video-card")).toHaveCount(8);
|
||
await expect(page.locator(".topbar")).toBeVisible();
|
||
await expect(page.locator(".mobile-profile-button")).toBeVisible();
|
||
await visualSnapshot(page, "mobile-home.png");
|
||
await page.getByRole("button", { name: "更多" }).click({ force: true });
|
||
await expect(page.getByRole("button", { name: "设置" })).toBeVisible();
|
||
await expect(page.getByRole("button", { name: "分类与标签" })).toBeVisible();
|
||
await expect(page.locator(".mobile-more-menu").getByRole("button", { name: "个人中心" })).toHaveCount(0);
|
||
await visualSnapshot(page, "mobile-more.png",false);
|
||
await page.locator(".mobile-more-menu").getByRole("button", { name: "资料库",exact:true }).click();
|
||
await expect(page.getByRole("heading", { name: "媒体资料库" })).toBeVisible();
|
||
await expect(page.locator(".sidebar")).toBeHidden();
|
||
await visualSnapshot(page,"mobile-library.png");
|
||
await page.goBack();
|
||
await expect(page.getByRole("heading", { name: "最近新增" })).toBeVisible();
|
||
await page.getByRole("button", { name: "更多" }).click();
|
||
await page.locator(".mobile-more-menu").getByRole("button", { name: "分类与标签" }).click();
|
||
await expect(page.getByRole("heading", { name: "分类与标签" })).toBeVisible();
|
||
await expect(page.locator(".topbar")).toBeHidden();
|
||
await expect(page.locator(".sidebar")).toBeHidden();
|
||
const tagActions = page.locator(".tag-list article").first().locator(":scope > button");
|
||
await expect(tagActions).toHaveCount(3);
|
||
for (let index = 0; index < 3; index += 1) {
|
||
await expect(tagActions.nth(index)).toBeVisible();
|
||
const box = await tagActions.nth(index).boundingBox();
|
||
expect(box).not.toBeNull();
|
||
expect(box!.x + box!.width).toBeLessThanOrEqual(391);
|
||
}
|
||
});
|
||
|
||
test("mobile app hierarchy uses immersive secondary screens and system history", async ({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
const destinations=[
|
||
["合集","合集","mobile-series.png"],
|
||
["上传中心","传输中心","mobile-uploads.png"],
|
||
["分类与标签","分类与标签","mobile-tags.png"],
|
||
["演员与人物","演员与人物","mobile-actors.png"],
|
||
] as const;
|
||
for(const [menuName,heading,snapshot] of destinations){
|
||
await page.getByRole("button",{name:"更多"}).click();
|
||
await page.locator(".mobile-more-list").getByRole("button",{name:new RegExp(menuName)}).first().click();
|
||
await expect(page.getByRole("heading",{name:heading}).first()).toBeVisible();
|
||
await expect(page.locator(".topbar")).toBeHidden();
|
||
await expect(page.locator(".sidebar")).toBeHidden();
|
||
await visualSnapshot(page,snapshot);
|
||
await page.goBack();
|
||
await expect(page.getByRole("heading",{name:"最近新增"})).toBeVisible();
|
||
await expect(page.locator(".sidebar")).toBeVisible();
|
||
}
|
||
|
||
await page.getByRole("button",{name:"搜索",exact:true}).click();
|
||
await expect(page.getByRole("form",{name:"移动端搜索"})).toBeVisible();
|
||
await expect(page.locator(".topbar")).toBeHidden();
|
||
await visualSnapshot(page,"mobile-search.png");
|
||
await page.goBack();
|
||
await expect(page.getByRole("heading",{name:"最近新增"})).toBeVisible();
|
||
|
||
await page.evaluate(()=>{const content=document.querySelector<HTMLElement>(".content")!;content.style.scrollBehavior="auto";content.scrollTo(0,280)});
|
||
await expect.poll(()=>page.locator(".content").evaluate(element=>element.scrollTop)).toBeGreaterThan(150);
|
||
await page.locator(".video-card").nth(4).click({force:true});
|
||
await expect(page.locator(".player-stage")).toBeVisible();
|
||
await expect(page.locator(".topbar")).toBeHidden();
|
||
await expect(page.locator(".sidebar")).toBeHidden();
|
||
await expect(page.locator(".player-back")).toBeVisible();
|
||
await visualSnapshot(page,"mobile-player.png");
|
||
await page.goBack();
|
||
await expect(page.getByRole("heading",{name:"最近新增"})).toBeVisible();
|
||
await expect.poll(()=>page.locator(".content").evaluate(element=>element.scrollTop)).toBeGreaterThan(150);
|
||
});
|
||
|
||
test("mobile home syncs its column layout and keeps actions in video details", async ({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
const grid=page.locator(".home-rail-track").first();
|
||
await expect(grid).toHaveClass(/columns-2/);
|
||
const firstCard=page.locator(".video-card").first();
|
||
await expect(firstCard.locator(".library-avatar,.source-badge,.card-menu-wrap")).toHaveCount(0);
|
||
await expect(firstCard.locator(".duration")).toHaveText("1:30:00");
|
||
await expect(firstCard).toContainText("PRIVATE-001");
|
||
await expect(firstCard).toContainText("示例演员");
|
||
await expect(firstCard).not.toContainText(source.name);
|
||
const twoColumnBox=await firstCard.boundingBox();
|
||
expect(twoColumnBox).not.toBeNull();
|
||
expect(twoColumnBox!.width).toBeLessThan(190);
|
||
|
||
await expect(page.locator(".home-feed").getByRole("button",{name:/单列|双列/})).toHaveCount(0);
|
||
const recentSection=page.locator(".home-content-rail").filter({has:page.getByRole("heading",{name:"最近新增"})});
|
||
await recentSection.getByRole("button",{name:/查看全部/}).click();
|
||
const focusedGrid=page.locator(".home-focused-browser .home-video-grid");
|
||
await expect(focusedGrid).toHaveClass(/columns-2/);
|
||
const requestPromise=page.waitForRequest(request=>request.url().endsWith("/api/v1/preferences")&&request.method()==="PATCH");
|
||
await page.getByRole("button",{name:"单列显示"}).click();
|
||
const request=await requestPromise;
|
||
expect(request.postDataJSON()).toMatchObject({home_video_columns:1});
|
||
await expect(focusedGrid).toHaveClass(/columns-1/);
|
||
const oneColumnBox=await focusedGrid.locator(".video-card").first().boundingBox();
|
||
expect(oneColumnBox).not.toBeNull();
|
||
expect(oneColumnBox!.width).toBeGreaterThan(300);
|
||
await page.goBack();
|
||
await page.reload();
|
||
await expect(page.locator(".home-rail-track").first()).toHaveClass(/columns-1/);
|
||
|
||
await page.locator(".video-card").first().click();
|
||
await expect(page.locator(".player-stage")).toBeVisible();
|
||
for(const name of ["喜欢","收藏","下载","编辑资料"]){
|
||
await expect(page.getByRole(name==="下载"?"link":"button",{name:new RegExp(name)})).toBeVisible();
|
||
}
|
||
});
|
||
|
||
for (const width of [320, 390, 768, 1024, 1440]) {
|
||
test(`settings and icons stay usable at ${width}px`, async ({ page }) => {
|
||
await page.setViewportSize({ width, height: width <= 390 ? 780 : 900 });
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await openSettings(page, width);
|
||
await expect(page.getByText("全部模型下载地址")).toBeVisible();
|
||
if (width <= 720) {await expect(page.locator(".topbar")).toBeHidden();await expect(page.locator(".sidebar")).toBeHidden()}
|
||
else {
|
||
await expect(page.locator(".topbar")).toBeVisible();
|
||
await expect(page.getByRole("button",{name:"首页",exact:true})).toBeVisible();
|
||
await expect(page.getByRole("button",{name:"设置",exact:true})).toBeVisible();
|
||
}
|
||
const layout = await page.evaluate(() => {
|
||
const centers = [...document.querySelectorAll<HTMLElement>(".icon-button")]
|
||
.filter(button => {
|
||
const style = getComputedStyle(button);
|
||
return style.display !== "none" && button.getBoundingClientRect().width > 0;
|
||
})
|
||
.map(button => {
|
||
const icon = button.querySelector<SVGElement>("svg");
|
||
if (!icon) return 0;
|
||
const outer = button.getBoundingClientRect();
|
||
const inner = icon.getBoundingClientRect();
|
||
return Math.max(
|
||
Math.abs(outer.left + outer.width / 2 - (inner.left + inner.width / 2)),
|
||
Math.abs(outer.top + outer.height / 2 - (inner.top + inner.height / 2)),
|
||
);
|
||
});
|
||
return {
|
||
overflow: document.documentElement.scrollWidth - innerWidth,
|
||
maxIconCenterError: Math.max(0, ...centers),
|
||
};
|
||
});
|
||
expect(layout.overflow).toBeLessThanOrEqual(1);
|
||
expect(layout.maxIconCenterError).toBeLessThanOrEqual(1);
|
||
await visualSnapshot(page, `settings-${width}.png`);
|
||
});
|
||
}
|
||
|
||
test("mobile more closes on browser back and keeps each item centered", async ({ page }) => {
|
||
await page.setViewportSize({ width: 320, height: 780 });
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await page.getByRole("button", { name: "更多" }).click();
|
||
await expect(page.locator(".mobile-more-backdrop")).toBeVisible();
|
||
await page.goBack();
|
||
await expect(page.locator(".mobile-more-menu")).toBeHidden();
|
||
await page.getByRole("button", { name: "更多" }).click();
|
||
const settingsItem=page.locator(".mobile-more-menu").getByRole("button", { name: "设置" });
|
||
const centers=await settingsItem.evaluate(item=>{
|
||
const outer=item.getBoundingClientRect();
|
||
const icon=item.querySelector<HTMLElement>(".mobile-more-icon")||item.querySelector<SVGElement>("svg")!;
|
||
const label=[...item.children].find(child=>child!==icon&&child.tagName==="SPAN") as HTMLElement;
|
||
const primary=[icon,label];
|
||
const boxes=primary.map(child=>child.getBoundingClientRect());
|
||
return {
|
||
vertical:Math.abs(outer.top+outer.height/2-(Math.min(...boxes.map(box=>box.top))+Math.max(...boxes.map(box=>box.bottom)))/2),
|
||
horizontal:Math.max(...boxes.map(box=>Math.abs(outer.left+outer.width/2-(box.left+box.width/2)))),
|
||
};
|
||
});
|
||
expect(centers.vertical).toBeLessThanOrEqual(1);
|
||
expect(centers.horizontal).toBeLessThanOrEqual(1);
|
||
await settingsItem.click();
|
||
await expect(page.getByRole("heading",{name:"设置"})).toBeVisible();
|
||
await expect(page.locator(".sidebar")).toBeHidden();
|
||
await page.goBack();
|
||
await expect(page.getByRole("heading",{name:"最近新增"})).toBeVisible();
|
||
});
|
||
|
||
test("upload picker appends and removes multiple files", async ({ page }) => {
|
||
await page.setViewportSize({ width: 390, height: 844 });
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await page.locator(".sidebar nav > .upload-status").click();
|
||
const picker = page.locator(".drop-zone input[type=file]");
|
||
await picker.setInputFiles([
|
||
{ name: "first.mp4", mimeType: "video/mp4", buffer: Buffer.from("first") },
|
||
{ name: "second.mkv", mimeType: "video/x-matroska", buffer: Buffer.from("second") },
|
||
]);
|
||
await expect(page.locator(".selected-files>div")).toHaveCount(2);
|
||
await picker.setInputFiles({ name: "third.mp4", mimeType: "video/mp4", buffer: Buffer.from("third") });
|
||
await expect(page.locator(".selected-files>div")).toHaveCount(3);
|
||
await page.getByRole("button", { name: "移除 second.mkv" }).click();
|
||
await expect(page.locator(".selected-files>div")).toHaveCount(2);
|
||
await expect(page.getByText("first.mp4")).toBeVisible();
|
||
await expect(page.getByText("third.mp4")).toBeVisible();
|
||
});
|
||
|
||
test("upload batch metadata survives closing the dialog while chunks continue", async ({ page }) => {
|
||
await page.setViewportSize({ width: 1024, height: 800 });
|
||
await mockApi(page);
|
||
const submitted:Array<Record<string,unknown>>=[];
|
||
const chunkIndexes:number[]=[];
|
||
let firstChunkSeen!:()=>void;
|
||
let releaseFirstChunk!:()=>void;
|
||
const firstChunk=new Promise<void>(resolve=>{firstChunkSeen=resolve});
|
||
const chunkGate=new Promise<void>(resolve=>{releaseFirstChunk=resolve});
|
||
await page.route("**/api/v1/uploads**",async route=>{
|
||
const request=route.request();
|
||
const path=new URL(request.url()).pathname;
|
||
if(request.method()==="GET")return route.fulfill({status:200,contentType:"application/json",body:"[]"});
|
||
if(request.method()==="POST"&&path.endsWith("/uploads")){
|
||
const body=request.postDataJSON() as Record<string,unknown>;submitted.push(body);
|
||
return route.fulfill({status:201,contentType:"application/json",body:JSON.stringify({id:"upload-background",...body,status:"receiving",progress:0,bytes_received:0,chunk_size:5,total_chunks:2,received_chunks:[]})});
|
||
}
|
||
const chunk=path.match(/\/chunks\/(\d+)$/);
|
||
if(request.method()==="PUT"&&chunk){
|
||
const index=Number(chunk[1]);chunkIndexes.push(index);
|
||
if(index===0){firstChunkSeen();await chunkGate}
|
||
return route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({received:index})});
|
||
}
|
||
if(request.method()==="POST"&&path.endsWith("/complete"))return route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({status:"queued"})});
|
||
return route.fallback();
|
||
});
|
||
await page.goto("/");
|
||
await page.locator(".top-upload .upload-status").click();
|
||
await page.getByLabel("加入合集").selectOption("collection-1");
|
||
await page.locator(".upload-tag-groups").getByRole("button",{name:"浴室"}).click();
|
||
await page.locator(".drop-zone input[type=file]").setInputFiles({name:"background.mp4",mimeType:"video/mp4",buffer:Buffer.from("0123456789")});
|
||
await page.getByRole("button",{name:"开始上传"}).click();
|
||
await firstChunk;
|
||
await expect(page.getByRole("button",{name:"后台继续",exact:true})).toBeVisible();
|
||
await page.getByRole("button",{name:"后台继续",exact:true}).click();
|
||
await expect(page.getByRole("heading",{name:"上传到私有媒体库"})).toBeHidden();
|
||
releaseFirstChunk();
|
||
await expect.poll(()=>chunkIndexes).toEqual([0,1]);
|
||
expect(submitted).toHaveLength(1);
|
||
expect(submitted[0]).toMatchObject({collection_id:"collection-1",tag_ids:["tag-2"]});
|
||
});
|
||
|
||
test("collection default categories can be saved and propagated",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
const updates:string[][]=[];
|
||
await page.route("**/api/v1/collections/collection-1/tags",async route=>{
|
||
if(route.request().method()==="PUT"){
|
||
const ids=(route.request().postDataJSON() as {tag_ids:string[]}).tag_ids;updates.push(ids);
|
||
return route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({applied:8})});
|
||
}
|
||
return route.fulfill({status:200,contentType:"application/json",body:JSON.stringify([tags[0].tags[0]])});
|
||
});
|
||
await page.goto("/");
|
||
await page.locator(".nav-item-4").click();
|
||
await page.getByRole("button",{name:"管理合集"}).click();
|
||
await page.locator(".collection-list").getByRole("button",{name:/示例合集/}).click();
|
||
await expect(page.getByRole("heading",{name:"示例合集"})).toBeVisible();
|
||
await page.getByRole("button",{name:"默认分类"}).click();
|
||
const rules=page.locator(".collection-tag-rules");
|
||
await expect(rules.getByRole("button",{name:"卧室"})).toHaveAttribute("aria-pressed","true");
|
||
await rules.getByRole("button",{name:"浴室"}).click();
|
||
await rules.getByRole("button",{name:"保存并应用"}).click();
|
||
await expect.poll(()=>updates).toEqual([["tag-1","tag-2"]]);
|
||
await expect(page.locator(".toast-host")).toContainText("默认分类已应用到 8 部影片");
|
||
});
|
||
|
||
test("nested collection directories stay usable on mobile",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
const sectionVideo={...videos[0],collection_item_id:"item-video",collection_parent_id:"group-section",collection_path:["第一章","第一节"]};
|
||
const tree=[{id:"group-chapter",collection_id:"collection-1",parent_id:null,kind:"group",name:"第一章",position:0,path:["第一章"],video_count:1,duration_ms:sectionVideo.duration_ms,children:[{id:"group-section",collection_id:"collection-1",parent_id:"group-chapter",kind:"group",name:"第一节",position:0,path:["第一章","第一节"],video_count:1,duration_ms:sectionVideo.duration_ms,children:[{id:"item-video",collection_id:"collection-1",parent_id:"group-section",kind:"video",video_id:sectionVideo.id,position:0,path:["第一章","第一节"],duration_ms:sectionVideo.duration_ms,video:sectionVideo}]}]}];
|
||
let moved:{parent_id:string|null;position:number}|null=null;
|
||
await page.route("**/api/v1/collections/collection-1",async route=>{
|
||
if(route.request().method()!=="GET")return route.fallback();
|
||
await route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({...collections[0],video_count:1,videos:[sectionVideo],items:tree})});
|
||
});
|
||
await page.route("**/api/v1/collections/collection-1/items/item-video/move",async route=>{
|
||
moved=route.request().postDataJSON() as typeof moved;
|
||
await route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({id:"item-video",...moved})});
|
||
});
|
||
await page.goto("/");
|
||
await page.getByRole("button",{name:"更多"}).click();
|
||
await page.locator(".mobile-more-menu").getByText("合集",{exact:true}).click();
|
||
await page.getByRole("button",{name:"管理合集"}).click();
|
||
await page.locator(".collection-list").getByRole("button",{name:/示例合集/}).click();
|
||
await expect(page.locator(".collection-group-row").filter({hasText:"第一章"})).toBeVisible();
|
||
const videoRow=page.locator(".collection-video-row").filter({hasText:videos[0].title});
|
||
await expect(videoRow).toContainText("第一章 / 第一节");
|
||
await videoRow.getByRole("button",{name:"移动",exact:true}).click();
|
||
const dialog=page.getByRole("dialog");
|
||
await expect(dialog).toContainText("合集根级（未分组）");
|
||
await dialog.getByRole("button",{name:/示例合集/}).click();
|
||
await expect.poll(()=>moved).toEqual({parent_id:null,position:1});
|
||
expect(await page.evaluate(()=>document.documentElement.scrollWidth<=document.documentElement.clientWidth)).toBe(true);
|
||
});
|
||
|
||
test("player time markers stay inside the player and support complete editing",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await page.addInitScript(()=>{
|
||
const mediaSources=new WeakMap<HTMLMediaElement,string>();
|
||
Object.defineProperty(HTMLMediaElement.prototype,"src",{configurable:true,get(){return mediaSources.get(this)||""},set(value:string){mediaSources.set(this,value)}});
|
||
Object.defineProperty(HTMLMediaElement.prototype,"load",{configurable:true,value:function(){}});
|
||
Object.defineProperty(HTMLMediaElement.prototype,"play",{configurable:true,value:function(this:HTMLMediaElement){Object.defineProperty(this,"paused",{configurable:true,writable:true,value:false});this.dispatchEvent(new Event("playing"));return Promise.resolve()}});
|
||
});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await page.locator(".video-card").first().click();
|
||
const video=page.locator("video");
|
||
await video.evaluate(element=>{Object.defineProperties(element,{duration:{configurable:true,value:5400},currentTime:{configurable:true,writable:true,value:120},paused:{configurable:true,writable:true,value:true}});element.dispatchEvent(new Event("loadedmetadata"));element.dispatchEvent(new Event("timeupdate"));element.dispatchEvent(new Event("canplay"))});
|
||
await expect(page.locator(".video-marker-panel")).toHaveCount(0);
|
||
await expect(page.locator(".player-actions").getByRole("button",{name:/添加时间点/})).toHaveCount(0);
|
||
await page.getByRole("button",{name:"视频时间点"}).click();
|
||
const markerPanel=page.locator(".player-marker-drawer");
|
||
await expect(markerPanel.getByText("精彩片段")).toBeVisible();
|
||
await markerPanel.getByRole("button",{name:/精彩片段/}).click();
|
||
expect(await video.evaluate(element=>element.currentTime)).toBe(600);
|
||
await video.evaluate(element=>{element.currentTime=123;element.dispatchEvent(new Event("timeupdate"))});
|
||
await markerPanel.getByRole("button",{name:"标记当前位置"}).click();
|
||
await expect(markerPanel.locator("article")).toHaveCount(2);
|
||
const added=markerPanel.locator("article").last();
|
||
await added.getByRole("button",{name:"编辑时间点"}).click();
|
||
const rename=page.getByRole("alertdialog");
|
||
await rename.getByLabel("请输入").fill("片尾彩蛋");
|
||
await rename.getByRole("button",{name:"确定"}).click();
|
||
await expect(added.getByText("片尾彩蛋")).toBeVisible();
|
||
await added.getByRole("button",{name:"删除时间点"}).click();
|
||
await page.getByRole("alertdialog").getByRole("button",{name:"继续"}).click();
|
||
await expect(markerPanel.locator("article")).toHaveCount(1);
|
||
const transcript=page.locator(".transcript-panel");
|
||
await expect(transcript).toContainText("2 个高可信时间片段");
|
||
await transcript.getByRole("button",{name:/音频转写/}).click();
|
||
await transcript.getByRole("button",{name:/这是一段可以搜索的中文音频转写/}).click();
|
||
expect(await video.evaluate(element=>element.currentTime)).toBe(180);
|
||
await expect(transcript.getByRole("button",{name:"重新识别"})).toBeVisible();
|
||
await transcript.getByRole("button",{name:"重新识别"}).click();
|
||
const languageDialog=page.getByRole("dialog",{name:"重新识别音频"});
|
||
await expect(languageDialog).toBeVisible();
|
||
await languageDialog.getByRole("radio",{name:/中文/}).click();
|
||
const reindexRequest=page.waitForRequest(request=>request.url().endsWith(`/videos/${videos[0].id}/transcript/reindex`)&&request.method()==="POST");
|
||
await languageDialog.getByRole("button",{name:"开始识别"}).click();
|
||
expect((await reindexRequest).postDataJSON()).toEqual({language:"zh"});
|
||
await expect(languageDialog).toHaveCount(0);
|
||
});
|
||
|
||
test("WebDAV settings expose the write target and save without storing credentials",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
const updates:Array<Record<string,unknown>>=[];
|
||
await page.route("**/api/v1/webdav/config",async route=>{
|
||
if(route.request().method()==="PATCH")updates.push(route.request().postDataJSON() as Record<string,unknown>);
|
||
const request=updates.at(-1)||{};
|
||
return route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({enabled:false,source_id:source.id,relative_path:"",url:"http://127.0.0.1:8765/webdav/",username:"imagefind",direct_access:true,direct_port:8765,gateway_supported:false,...request})});
|
||
});
|
||
await page.goto("/");
|
||
await openSettings(page,1024);
|
||
await page.getByRole("button",{name:"账户与 API"}).click();
|
||
const panel=page.locator(".webdav-server-panel");
|
||
await expect(panel).toContainText("http://127.0.0.1:8765/webdav/");
|
||
await expect(panel).toContainText("imagefind");
|
||
await expect(panel).toContainText("第一层目录作为合集");
|
||
await panel.getByRole("switch",{name:"启用 WebDAV 入口"}).click();
|
||
await panel.getByLabel("目标基础目录（可选）").fill("手机上传");
|
||
await panel.getByRole("button",{name:"保存 WebDAV 设置"}).click();
|
||
await expect.poll(()=>updates).toEqual([{enabled:true,source_id:source.id,relative_path:"手机上传"}]);
|
||
expect(updates[0]).not.toHaveProperty("password");
|
||
await panel.getByRole("button",{name:"创建专用 WebDAV Token"}).click();
|
||
await expect(panel).toContainText("dav-secret-once");
|
||
await expect(panel).toContainText("仅显示一次");
|
||
});
|
||
|
||
test("WebDAV address stays on the native port when the page uses the gateway",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await page.addInitScript(()=>{window.__IMAGEFIND_BASE__="/app/imagefind/"});
|
||
await mockApi(page,"gateway");
|
||
await page.route("**/api/v1/webdav/config",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({enabled:true,source_id:source.id,relative_path:"",url:"http://127.0.0.1:8765/webdav/",username:"imagefind",direct_access:true,direct_port:8765,gateway_supported:false})}));
|
||
await page.goto("/app/imagefind/");
|
||
await openSettings(page,1024);
|
||
await page.getByRole("button",{name:"账户与 API"}).click();
|
||
const panel=page.locator(".webdav-server-panel");
|
||
await expect(panel).toContainText("http://127.0.0.1:8765/webdav/");
|
||
await expect(panel).toContainText("5666 只用于网页统一网关");
|
||
await expect(panel).not.toContainText("/app/imagefind/webdav/");
|
||
});
|
||
|
||
test("mobile home pull gesture refreshes all visible dashboard resources",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
const refreshPaths:string[]=[];
|
||
page.on("request",request=>{if(request.method()==="GET"){const path=new URL(request.url()).pathname;for(const suffix of ["/videos","/collections","/profile","/uploads"]){if(path.endsWith(`/api/v1${suffix}`))refreshPaths.push(suffix)}}});
|
||
await page.goto("/");
|
||
await expect(page.getByRole("heading",{name:"最近新增"})).toBeVisible();
|
||
refreshPaths.length=0;
|
||
const content=page.locator(".content");
|
||
await content.dispatchEvent("touchstart",{touches:[{identifier:1,clientX:180,clientY:80}]});
|
||
await content.dispatchEvent("touchmove",{touches:[{identifier:1,clientX:180,clientY:240}]});
|
||
await expect(page.locator(".pull-refresh")).toHaveClass(/ready/);
|
||
await expect(page.locator(".pull-refresh")).toContainText("松开刷新");
|
||
await content.dispatchEvent("touchend",{changedTouches:[{identifier:1,clientX:180,clientY:240}]});
|
||
await expect(page.locator(".toast-host")).toContainText("首页已刷新");
|
||
await expect.poll(()=>[...new Set(refreshPaths)].sort()).toEqual(["/collections","/profile","/uploads","/videos"]);
|
||
expect(await page.evaluate(()=>document.documentElement.scrollWidth-innerWidth)).toBeLessThanOrEqual(1);
|
||
});
|
||
|
||
test("backup download and restore stay usable on desktop and mobile", async ({ page }) => {
|
||
await page.setViewportSize({ width: 1024, height: 900 });
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await openSettings(page, 1024);
|
||
await page.getByRole("button", { name: "备份恢复" }).click();
|
||
await expect(page.getByRole("heading", { name: "系统备份与恢复" })).toBeVisible();
|
||
await page.getByLabel("独立备份密码").fill("portable backup password");
|
||
await page.getByLabel("确认备份密码").fill("portable backup password");
|
||
await page.getByRole("button", { name: "后台生成备份" }).click();
|
||
await expect(page.getByText("等待后台任务开始")).toBeVisible();
|
||
await expect(page.getByText("imagefind-backup-20260728-full.ifbackup")).toBeVisible();
|
||
const downloadPromise = page.waitForEvent("download");
|
||
await page.locator(".backup-history").getByRole("button",{name:"下载"}).click();
|
||
const download = await downloadPromise;
|
||
expect(download.suggestedFilename()).toBe("imagefind-backup-20260728-full.ifbackup");
|
||
await expect(page.getByLabel("独立备份密码")).toHaveValue("");
|
||
|
||
await page.setViewportSize({ width: 390, height: 844 });
|
||
await page.locator('.backup-file-picker input[type="file"]').setInputFiles({
|
||
name: "portable.ifbackup", mimeType: "application/vnd.imagefind.backup", buffer: Buffer.from("encrypted-backup"),
|
||
});
|
||
await page.getByLabel("备份密码", { exact: true }).fill("portable backup password");
|
||
await page.getByLabel("我确认恢复到空系统").check();
|
||
await page.getByRole("button", { name: "确认恢复" }).click();
|
||
await expect(page.getByText("恢复完成 · 完整备份")).toBeVisible();
|
||
await expect(page.getByText("已创建 2 个来源扫描任务")).toBeVisible();
|
||
await expect(page.getByText(/路径暂不可用/)).toBeVisible();
|
||
await expect(page.getByLabel("备份密码", { exact: true })).toHaveValue("");
|
||
const overflow = await page.evaluate(() => document.documentElement.scrollWidth - innerWidth);
|
||
expect(overflow).toBeLessThanOrEqual(1);
|
||
});
|
||
|
||
test("backup restore shows a short authentication error without retaining the password", async ({ page }) => {
|
||
await page.setViewportSize({ width: 320, height: 780 });
|
||
await mockApi(page);
|
||
await page.route("**/api/v1/backups/restore", route => route.fulfill({
|
||
status: 400,
|
||
contentType: "application/json",
|
||
body: JSON.stringify({ detail: "备份文件无效、已被篡改或密码错误" }),
|
||
}));
|
||
await page.goto("/");
|
||
await openSettings(page, 320);
|
||
await page.getByRole("button", { name: "备份恢复" }).click();
|
||
await page.locator('.backup-file-picker input[type="file"]').setInputFiles({
|
||
name: "broken.ifbackup", mimeType: "application/vnd.imagefind.backup", buffer: Buffer.from("broken"),
|
||
});
|
||
await page.getByLabel("备份密码", { exact: true }).fill("incorrect backup password");
|
||
await page.getByLabel("我确认恢复到空系统").check();
|
||
await page.getByRole("button", { name: "确认恢复" }).click();
|
||
await expect(page.getByText("备份文件无效、已被篡改或密码错误")).toBeVisible();
|
||
await expect(page.getByLabel("备份密码", { exact: true })).toHaveValue("");
|
||
const overflow = await page.evaluate(() => document.documentElement.scrollWidth - innerWidth);
|
||
expect(overflow).toBeLessThanOrEqual(1);
|
||
});
|
||
|
||
test("mobile bottom bar has five destinations and more supports every close method", async ({ page }) => {
|
||
await page.setViewportSize({ width: 390, height: 844 });
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
const visibleBottom = page.locator(".sidebar nav > button:visible");
|
||
await expect(visibleBottom).toHaveCount(5);
|
||
await expect(visibleBottom.nth(0)).toContainText("首页");
|
||
await expect(visibleBottom.nth(1)).toContainText("搜索");
|
||
await expect(visibleBottom.nth(2)).toContainText("上传中心");
|
||
await expect(visibleBottom.nth(3)).toContainText("个人中心");
|
||
await expect(visibleBottom.nth(4)).toContainText("更多");
|
||
const uploadCenter=await visibleBottom.nth(2).locator("svg").boundingBox();
|
||
expect(uploadCenter).not.toBeNull();
|
||
expect(Math.abs(uploadCenter!.x+uploadCenter!.width/2-195)).toBeLessThanOrEqual(1);
|
||
await visibleBottom.nth(3).click();
|
||
await expect(page.getByRole("heading", { name: "管理员" })).toBeVisible();
|
||
await expect(visibleBottom.nth(3)).toHaveAttribute("aria-current","page");
|
||
await visibleBottom.nth(0).click();
|
||
|
||
await page.locator(".content").evaluate(element=>element.scrollTo(0,260));
|
||
const scrollBefore=await page.locator(".content").evaluate(element=>element.scrollTop);
|
||
const pageBefore=await page.locator(".page").evaluate(element=>{const box=element.getBoundingClientRect();return{x:box.x,width:box.width}});
|
||
await visibleBottom.nth(4).click();
|
||
await expect(page.locator("body")).toHaveClass(/sheet-open/);
|
||
await expect(page.locator(".content")).toHaveClass(/sheet-locked/);
|
||
const overlay=await page.evaluate(()=>{
|
||
const backdrop=document.querySelector<HTMLElement>(".mobile-more-backdrop")!.getBoundingClientRect();
|
||
const sheet=document.querySelector<HTMLElement>(".mobile-more-menu")!;
|
||
const bottom=document.querySelector<HTMLElement>(".sidebar")!;
|
||
const grid=document.querySelector<HTMLElement>(".mobile-more-grid")!;
|
||
return {x:backdrop.x,y:backdrop.y,width:backdrop.width,height:backdrop.height,sheetZ:Number(getComputedStyle(sheet).zIndex),bottomZ:Number(getComputedStyle(bottom).zIndex),bodyPosition:getComputedStyle(document.body).position,gridColumns:getComputedStyle(grid).gridTemplateColumns.split(" ").length,sheetAnimation:getComputedStyle(sheet).animationName};
|
||
});
|
||
expect(overlay).toMatchObject({x:0,y:0,width:390,height:844,bodyPosition:"static",gridColumns:3,sheetAnimation:"imagefind-sheet-in"});
|
||
expect(overlay.sheetZ).toBeGreaterThan(overlay.bottomZ);
|
||
const itemLayout=await page.locator(".mobile-more-grid>.mobile-more-item").evaluateAll(items=>items.map(item=>{
|
||
const outer=item.getBoundingClientRect();const style=getComputedStyle(item);
|
||
const icon=item.querySelector<HTMLElement>(".mobile-more-icon")!;
|
||
const label=[...item.children].find(child=>child!==icon&&child.tagName==="SPAN") as HTMLElement;
|
||
const boxes=[icon,label].map(child=>child.getBoundingClientRect());
|
||
return {
|
||
background:style.backgroundColor,display:style.display,align:style.alignItems,justify:style.justifyContent,iconBackground:getComputedStyle(icon).backgroundColor,
|
||
horizontal:Math.max(...boxes.map(box=>Math.abs(outer.left+outer.width/2-(box.left+box.width/2)))),
|
||
vertical:Math.abs(outer.top+outer.height/2-(Math.min(...boxes.map(box=>box.top))+Math.max(...boxes.map(box=>box.bottom)))/2),
|
||
};
|
||
}));
|
||
expect(itemLayout.length).toBeGreaterThan(0);
|
||
expect(itemLayout.every(item=>item.background==="rgba(0, 0, 0, 0)"&&item.iconBackground==="rgba(0, 0, 0, 0)"&&item.display==="grid"&&item.align==="center"&&item.justify==="center"&&item.horizontal<=1&&item.vertical<=1),JSON.stringify(itemLayout)).toBe(true);
|
||
await expect(page.locator("body > .mobile-more-backdrop")).toHaveCount(1);
|
||
for (const name of ["资料库", "合集", "上传中心", "分类与标签", "演员与人物", "设置"]) {
|
||
await expect(page.locator(".mobile-more-menu").getByRole("button", { name: new RegExp(name) }).first()).toBeVisible();
|
||
}
|
||
await expect(page.locator(".mobile-more-menu").getByRole("button", { name: "个人中心" })).toHaveCount(0);
|
||
await page.locator(".sheet-close").click();
|
||
await expect(page.locator(".mobile-more-menu")).toBeHidden();
|
||
await expect(page.locator(".content")).not.toHaveClass(/sheet-locked/);
|
||
await expect.poll(()=>page.locator(".content").evaluate(element=>element.scrollTop)).toBe(scrollBefore);
|
||
await expect.poll(()=>page.locator(".page").evaluate(element=>{const box=element.getBoundingClientRect();return{x:box.x,width:box.width}})).toEqual(pageBefore);
|
||
await expect(visibleBottom.nth(4)).toBeFocused();
|
||
await visibleBottom.nth(4).click();
|
||
await page.keyboard.press("Escape");
|
||
await expect(page.locator(".mobile-more-menu")).toBeHidden();
|
||
await visibleBottom.nth(4).click();
|
||
const backdrop=page.getByLabel("关闭更多菜单");const backdropBox=await backdrop.boundingBox();
|
||
expect(backdropBox).not.toBeNull();
|
||
await page.mouse.move(8,8);await page.mouse.down();
|
||
const pressedBackdrop=await backdrop.evaluate(element=>({transform:getComputedStyle(element).transform,background:getComputedStyle(element).backgroundColor,box:(()=>{const value=element.getBoundingClientRect();return{x:value.x,y:value.y,width:value.width,height:value.height}})()}));
|
||
expect(pressedBackdrop).toEqual({transform:"none",background:"rgba(7, 16, 28, 0.44)",box:{x:0,y:0,width:390,height:844}});
|
||
await page.mouse.up();
|
||
await expect(page.locator(".mobile-more-menu")).toBeHidden();
|
||
await visibleBottom.nth(4).click();
|
||
await page.locator(".mobile-more-menu").dispatchEvent("touchstart", { touches: [{ identifier: 1, clientX: 20, clientY: 300 }] });
|
||
await page.locator(".mobile-more-menu").dispatchEvent("touchend", { changedTouches: [{ identifier: 1, clientX: 20, clientY: 390 }] });
|
||
await expect(page.locator(".mobile-more-menu")).toBeHidden();
|
||
});
|
||
|
||
test("gateway SSO recovers without a cookie and persists its scoped session header",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await page.addInitScript(()=>{window.__IMAGEFIND_BASE__="/app/imagefind/"});
|
||
const probe=await mockApi(page,"gateway",true);
|
||
const nativeMediaRequests:string[]=[];
|
||
page.on("request",request=>{if(request.url().includes("/videos/video-0/stream"))nativeMediaRequests.push(request.url())});
|
||
const gatewayVideos=videos.map((video,index)=>({...video,thumbnail_url:`/api/v1/frames/frame-${index}/thumbnail`}));
|
||
await page.route("**/api/v1/videos?*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(gatewayVideos)}));
|
||
await page.route("**/api/v1/home?*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({video_count:gatewayVideos.length,updated_at:"2026-07-27T10:00:00Z",recent:{id:"recent",title:"最近新增",total:gatewayVideos.length,items:gatewayVideos},collections:{total:0,items:[]},categories:[],people:[],unorganized:null})}));
|
||
await page.goto("/app/imagefind/");
|
||
await expect(page.getByRole("heading",{name:"最近新增"})).toBeVisible();
|
||
await expect.poll(()=>page.evaluate(()=>sessionStorage.getItem("imagefind:gateway-session"))).toBe("gateway-session-token");
|
||
await expect.poll(()=>page.evaluate(()=>sessionStorage.getItem("imagefind:gateway-media-token"))).toBe("gateway-media-token");
|
||
const thumbnailUrl=await page.locator(".video-card .thumb-image").first().getAttribute("src");
|
||
expect(thumbnailUrl).toContain("/app/imagefind/api/v1/frames/frame-0/thumbnail?media_token=gateway-media-token");
|
||
expect(thumbnailUrl).not.toContain("gateway-session-token");
|
||
expect(probe.gatewayLoginRequests).toBeGreaterThanOrEqual(1);
|
||
expect(probe.gatewaySessionHeaders.some(header=>header==="")).toBe(true);
|
||
expect(probe.gatewaySessionHeaders.some(header=>header==="gateway-session-token")).toBe(true);
|
||
const loginRequestsAfterBoot=probe.gatewayLoginRequests;
|
||
await page.reload();
|
||
await expect(page.getByRole("heading",{name:"最近新增"})).toBeVisible();
|
||
expect(probe.gatewayLoginRequests).toBe(loginRequestsAfterBoot);
|
||
expect(probe.gatewayMediaTokenRequests).toBeGreaterThanOrEqual(1);
|
||
expect(probe.gatewaySessionHeaders.at(-1)).toBe("gateway-session-token");
|
||
await page.getByRole("button",{name:"更多"}).click();
|
||
const gatewayMenuStyles=await page.locator(".mobile-more-grid>.mobile-more-item").evaluateAll(items=>items.map(item=>({button:getComputedStyle(item).backgroundColor,icon:getComputedStyle(item.querySelector<HTMLElement>(".mobile-more-icon")!).backgroundColor})));
|
||
expect(gatewayMenuStyles.every(style=>style.button==="rgba(0, 0, 0, 0)"&&style.icon==="rgba(0, 0, 0, 0)")).toBe(true);
|
||
await page.locator(".sheet-close").click();
|
||
await page.locator(".video-card").first().click();
|
||
await expect.poll(()=>nativeMediaRequests.some(url=>url.includes("media_token=gateway-media-token"))).toBe(true);
|
||
const nativeMedia=await page.locator("video").evaluate(video=>({poster:video.getAttribute("poster")}));
|
||
const downloadHref=await page.locator("a.action").filter({hasText:"下载"}).getAttribute("href");
|
||
expect(nativeMedia.poster).toContain("media_token=gateway-media-token");
|
||
expect(downloadHref).toContain("media_token=gateway-media-token");
|
||
expect(`${nativeMediaRequests.join("")}${nativeMedia.poster}${downloadHref}`).not.toContain("gateway-session-token");
|
||
await expect(page.getByText("飞牛管理员会话需要重新建立")).toHaveCount(0);
|
||
});
|
||
|
||
test("concurrent gateway 401 responses share one session renewal",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await page.addInitScript(()=>{
|
||
window.__IMAGEFIND_BASE__="/app/imagefind/";
|
||
sessionStorage.setItem("imagefind:gateway-session","expired-session");
|
||
sessionStorage.setItem("imagefind:gateway-media-token","expired-media");
|
||
});
|
||
const probe=await mockApi(page,"gateway");
|
||
const protectedHeaders:string[]=[];
|
||
await page.route(/\/api\/v1\/(?:profile|preferences|collections)(?:\?|$)/,route=>{
|
||
const request=route.request();const header=request.headers()["x-imagefind-gateway-session"]||"";
|
||
protectedHeaders.push(header);
|
||
if(header!=="gateway-session-token")return route.fulfill({status:401,contentType:"application/json",body:JSON.stringify({detail:"飞牛管理员会话需要重新建立"})});
|
||
const path=new URL(request.url()).pathname;
|
||
const body=path.endsWith("/profile")
|
||
? {nickname:"管理员",avatar:{text:"管",color:"#3974dc",accent:"#6f9df1"},role:"administrator",created_at:"2026-01-01T00:00:00Z",counts:{favorites:1,likes:1,history:2,continue_watching:2}}
|
||
: path.endsWith("/preferences")
|
||
? {autoplay:true,mask_covers:false,theme:"system",home_video_columns:2,upload_paths:{}}
|
||
: collections;
|
||
return route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(body)});
|
||
});
|
||
await page.goto("/app/imagefind/");
|
||
await expect(page.getByRole("heading",{name:"最近新增"})).toBeVisible();
|
||
await expect.poll(()=>probe.gatewayLoginRequests).toBe(1);
|
||
expect(protectedHeaders.filter(header=>header==="expired-session").length).toBeGreaterThanOrEqual(2);
|
||
await expect.poll(()=>protectedHeaders.filter(header=>header==="gateway-session-token").length).toBeGreaterThanOrEqual(2);
|
||
await expect.poll(()=>page.evaluate(()=>sessionStorage.getItem("imagefind:gateway-media-token"))).toBe("gateway-media-token");
|
||
});
|
||
|
||
test("mobile controls meet touch sizing and video cards support keyboard activation",async({page})=>{
|
||
await page.setViewportSize({width:320,height:780});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await expect(page.locator(".home-rail-track").first().getByRole("button",{name:/播放 示例影片/})).toHaveCount(1);
|
||
const undersized=await page.locator("button:visible,[role=button]:visible,a.action:visible,a.icon-button:visible").evaluateAll(elements=>elements.map(element=>{
|
||
const box=element.getBoundingClientRect();return {label:element.getAttribute("aria-label")||element.textContent?.trim()||element.tagName,width:box.width,height:box.height};
|
||
}).filter(item=>item.width<43.5||item.height<43.5));
|
||
expect(undersized).toEqual([]);
|
||
const first=page.locator(".video-card").first();
|
||
await first.focus();
|
||
await page.keyboard.press("Enter");
|
||
await expect(page.locator(".player-stage")).toBeVisible();
|
||
});
|
||
|
||
test("source, search and recommendation cards support keyboard activation",async({page})=>{
|
||
await page.setViewportSize({width:1440,height:900});
|
||
await mockApi(page);
|
||
await page.route("**/api/v1/search",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({items:[{
|
||
frame_id:"keyboard-result",video_id:"video-0",display_name:videos[0].display_name,source_name:source.name,source_kind:"local",timestamp_ms:65000,segment_start_ms:65000,segment_end_ms:68000,thumbnail_url:"",playback_url:videos[0].playback_url,score:.91,match_sources:["metadata"],
|
||
}]})}));
|
||
await page.goto("/");
|
||
await page.locator(".nav-item-3").click();
|
||
const sourceCard=page.getByRole("button",{name:`打开媒体来源 ${source.name}`});
|
||
await sourceCard.focus();
|
||
await page.keyboard.press("Enter");
|
||
await expect(sourceCard).toHaveClass(/active/);
|
||
|
||
await page.locator(".nav-item-2").click();
|
||
await page.locator(".global-search input:not([type=file])").fill("示例");
|
||
await page.locator(".global-search input:not([type=file])").press("Enter");
|
||
const result=page.getByRole("button",{name:/播放 示例影片：已整理的私人收藏/});
|
||
await expect(result).toHaveAttribute("tabindex","0");
|
||
await result.focus();
|
||
await page.keyboard.press("Space");
|
||
await expect(page.locator(".player-title h1")).toHaveText("示例影片：已整理的私人收藏");
|
||
|
||
const recommendation=page.locator(".player-recommendations-list").getByRole("button").first();
|
||
await expect(recommendation).toHaveAttribute("tabindex","0");
|
||
const nextTitle=(await recommendation.getAttribute("aria-label"))!.replace(/^播放 /,"");
|
||
await recommendation.focus();
|
||
await page.keyboard.press("Enter");
|
||
await expect(page.locator(".player-title h1")).toHaveText(nextTitle);
|
||
});
|
||
|
||
test("gateway subpath prefixes API and media URLs without adding fnOS close actions", async ({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await page.addInitScript(()=>{window.__IMAGEFIND_BASE__="/app/imagefind/"});
|
||
await mockApi(page,"gateway");
|
||
const apiPaths:string[]=[];
|
||
page.on("request",request=>{const path=new URL(request.url()).pathname;if(path.includes("/api/v1/"))apiPaths.push(path)});
|
||
await page.goto("/app/imagefind/");
|
||
await expect(page.getByRole("heading",{name:"最近新增"})).toBeVisible();
|
||
await expect(page.locator(".app-shell")).toHaveClass(/access-gateway/);
|
||
const gatewayLayout=await page.evaluate(()=>{
|
||
const shell=document.querySelector<HTMLElement>(".app-shell")!;const content=document.querySelector<HTMLElement>(".content")!;const topbar=document.querySelector<HTMLElement>(".topbar")!;
|
||
return {access:document.documentElement.dataset.imagefindAccess,safeTop:getComputedStyle(shell).getPropertyValue("--imagefind-safe-top").trim(),shellOverflow:getComputedStyle(shell).overflow,contentOverflow:getComputedStyle(content).overflowY,contentScrollTop:content.scrollTop,topbarTop:Math.round(topbar.getBoundingClientRect().top),viewportHeight:innerHeight,documentHeight:document.documentElement.scrollHeight,visualHeight:getComputedStyle(document.documentElement).getPropertyValue("--imagefind-visual-height").trim()};
|
||
});
|
||
expect(gatewayLayout.access).toBe("gateway");
|
||
expect(gatewayLayout.safeTop).toBe("0px");
|
||
expect(gatewayLayout.shellOverflow).toBe("hidden");
|
||
expect(gatewayLayout.contentOverflow).toBe("auto");
|
||
expect(gatewayLayout.contentScrollTop).toBe(0);
|
||
expect(gatewayLayout.topbarTop).toBe(0);
|
||
expect(gatewayLayout.documentHeight).toBeLessThanOrEqual(gatewayLayout.viewportHeight+1);
|
||
expect(Number.parseFloat(gatewayLayout.visualHeight)).toBeGreaterThan(800);
|
||
await page.locator(".content").evaluate(element=>element.scrollTo({top:280,behavior:"instant"}));
|
||
await expect.poll(()=>page.locator(".content").evaluate(element=>element.scrollTop)).toBeGreaterThan(150);
|
||
await expect.poll(()=>page.evaluate(()=>window.scrollY)).toBe(0);
|
||
const gatewayScroll=await page.locator(".content").evaluate(element=>element.scrollTop);
|
||
await page.getByRole("button",{name:"更多"}).click();
|
||
await expect(page.locator(".content")).toHaveClass(/sheet-locked/);
|
||
await page.locator(".sheet-close").click();
|
||
await expect(page.locator(".mobile-more-menu")).toHaveCount(0);
|
||
await expect.poll(()=>page.locator(".content").evaluate(element=>element.scrollTop)).toBe(gatewayScroll);
|
||
await page.setViewportSize({width:390,height:700});
|
||
await expect.poll(()=>page.evaluate(()=>Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--imagefind-visual-height")))).toBeGreaterThan(690);
|
||
await page.setViewportSize({width:390,height:844});
|
||
expect(apiPaths.length).toBeGreaterThan(3);
|
||
expect(apiPaths.every(path=>path.startsWith("/app/imagefind/api/v1/"))).toBe(true);
|
||
await page.locator(".video-card").first().click();
|
||
await expect(page.locator(".player-actions a.action")).toHaveAttribute("href","/app/imagefind/api/v1/videos/video-0/download?media_token=gateway-media-token");
|
||
await expect(page.locator(".player-actions a.action")).not.toHaveAttribute("href",/gateway-session-token/);
|
||
await expect(page.locator(".player-back")).toBeVisible();
|
||
await page.goBack();
|
||
await page.getByRole("button",{name:"更多"}).click();
|
||
await expect(page.locator(".mobile-more-menu").getByText("退出登录",{exact:true})).toHaveCount(0);
|
||
await page.locator(".sheet-close").click();
|
||
await page.setViewportSize({width:1024,height:768});
|
||
await page.locator(".avatar").click();
|
||
await expect(page.locator(".account-popover").getByText("退出登录",{exact:true})).toHaveCount(0);
|
||
});
|
||
|
||
test("appearance follows the system and allows an explicit override",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await page.emulateMedia({colorScheme:"dark"});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await expect(page.locator("html")).toHaveAttribute("data-theme","dark");
|
||
await openSettings(page,1024);
|
||
await page.getByRole("button",{name:"任务与偏好"}).click();
|
||
const theme=page.getByRole("radiogroup",{name:"外观主题"});
|
||
await expect(theme.getByRole("radio",{name:"跟随系统"})).toHaveAttribute("aria-checked","true");
|
||
const lightRequest=page.waitForRequest(request=>request.url().endsWith("/api/v1/preferences")&&request.method()==="PATCH"&&(request.postDataJSON() as {theme?:string}).theme==="light");
|
||
await theme.getByRole("radio",{name:"浅色"}).click();
|
||
await lightRequest;
|
||
await expect(page.locator("html")).toHaveAttribute("data-theme","light");
|
||
await theme.getByRole("radio",{name:"跟随系统"}).click();
|
||
await expect(page.locator("html")).toHaveAttribute("data-theme","dark");
|
||
await page.emulateMedia({colorScheme:"light"});
|
||
await expect(page.locator("html")).toHaveAttribute("data-theme","light");
|
||
await page.emulateMedia({colorScheme:"dark"});
|
||
await expect(page.locator("html")).toHaveAttribute("data-theme","dark");
|
||
const palette=await page.evaluate(()=>({background:getComputedStyle(document.body).backgroundColor,surface:getComputedStyle(document.querySelector<HTMLElement>(".panel:not(.hidden)")!).backgroundColor,color:getComputedStyle(document.body).color}));
|
||
expect(palette).toEqual({background:"rgb(11, 15, 22)",surface:"rgb(19, 25, 35)",color:"rgb(237, 242, 248)"});
|
||
await page.evaluate(()=>window.scrollTo({top:0,behavior:"instant"}));
|
||
await visualSnapshot(page,"settings-dark-1024.png");
|
||
});
|
||
|
||
test("appearance shortcut controls theme and cover privacy on desktop and mobile",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
const trigger=page.getByRole("button",{name:/外观与隐私：/});
|
||
await expect(trigger).toBeVisible();
|
||
await expect(page.locator(".top-actions>.appearance-toolbar")).toHaveCount(1);
|
||
const desktopOrder=await page.locator(".top-actions").evaluate(actions=>[...actions.children].map(element=>element.className));
|
||
expect(desktopOrder).toEqual(["top-upload","top-menu-wrap appearance-toolbar","top-menu-wrap","top-menu-wrap"]);
|
||
await trigger.click();
|
||
const panel=page.getByRole("dialog",{name:"外观与隐私快捷设置"});
|
||
await expect(panel).toBeVisible();
|
||
await page.locator(".home-collection-card>span").evaluate(element=>{const image=document.createElement("img");image.className="thumb-image";image.alt="";element.append(image)});
|
||
const maskRequest=page.waitForRequest(request=>request.url().endsWith("/api/v1/preferences")&&request.method()==="PATCH"&&(request.postDataJSON() as {mask_covers?:boolean}).mask_covers===true);
|
||
await panel.getByRole("switch",{name:"遮罩媒体封面"}).click();
|
||
await maskRequest;
|
||
await expect(page.locator(".app-shell")).toHaveClass(/covers-masked/);
|
||
await expect(page.locator(".home-collection-card .thumb-image")).toHaveCSS("filter",/blur\(22px\)/);
|
||
await panel.getByRole("radio",{name:"深色"}).click();
|
||
await expect(page.locator("html")).toHaveAttribute("data-theme","dark");
|
||
await page.keyboard.press("Escape");
|
||
await expect(panel).toHaveCount(0);
|
||
|
||
await page.setViewportSize({width:390,height:844});
|
||
await expect(trigger).toBeVisible();
|
||
const mobileCenters=await page.locator(".top-actions").evaluate(actions=>[...actions.querySelectorAll<HTMLElement>(".appearance-trigger,.notification-button,.avatar")].map(button=>button.getBoundingClientRect()).filter(box=>box.width>0&&box.height>0).map(box=>box.left+box.width/2));
|
||
expect(mobileCenters).toHaveLength(3);
|
||
expect(mobileCenters).toEqual([...mobileCenters].sort((a,b)=>a-b));
|
||
await trigger.click();
|
||
await expect(panel).toBeVisible();
|
||
const box=await panel.boundingBox();
|
||
expect(box?.x).toBeGreaterThanOrEqual(11);
|
||
expect((box?.x||0)+(box?.width||0)).toBeLessThanOrEqual(379);
|
||
expect(await page.evaluate(()=>document.documentElement.scrollWidth<=document.documentElement.clientWidth)).toBe(true);
|
||
await page.mouse.click(6,120);
|
||
await expect(panel).toHaveCount(0);
|
||
});
|
||
|
||
test("mobile more uses the dark app palette when following the system",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await page.emulateMedia({colorScheme:"dark"});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await page.getByRole("button",{name:"更多"}).click();
|
||
const colors=await page.evaluate(()=>({sheet:getComputedStyle(document.querySelector<HTMLElement>(".mobile-more-menu")!).backgroundColor,tile:getComputedStyle(document.querySelector<HTMLElement>(".mobile-more-item")!).backgroundColor}));
|
||
expect(colors).toEqual({sheet:"rgb(19, 25, 35)",tile:"rgba(0, 0, 0, 0)"});
|
||
await visualSnapshot(page,"mobile-more-dark.png",false);
|
||
});
|
||
|
||
test("profile, collections, upload state and settings sections work on mobile", async ({ page }) => {
|
||
await page.setViewportSize({ width: 390, height: 844 });
|
||
await mockApi(page);
|
||
await page.route("**/api/v1/uploads?*", route => route.fulfill({
|
||
status: 200,
|
||
contentType: "application/json",
|
||
body: JSON.stringify([{ id: "upload-1", filename: "large.mp4", source_id: source.id, status: "transferring", progress: .45, bytes_received: 45, size_bytes: 100, message: "传输到目标库 45%", relative_path: "", chunk_size: 10, total_chunks: 10, received_chunks: [0, 1, 2, 3] }]),
|
||
}));
|
||
await page.goto("/");
|
||
await expect(page.locator(".sidebar nav > .upload-status b")).toHaveText("1");
|
||
await page.locator(".sidebar nav > .upload-status").click();
|
||
await expect(page.getByRole("heading", { name: "传输中心" })).toBeVisible();
|
||
await expect(page.getByRole("button", { name: "继续上传" })).toBeVisible();
|
||
await expect(page.locator(".sidebar")).toBeHidden();
|
||
|
||
await page.goBack();
|
||
await page.locator(".mobile-profile-button").click();
|
||
await expect(page.getByRole("heading", { name: "管理员" })).toBeVisible();
|
||
await expect(page.locator(".topbar")).toBeHidden();
|
||
await expect(page.locator(".profile-stats article")).toHaveCount(4);
|
||
await expect(page.locator(".profile-continue-grid .continue-card")).toHaveCount(8);
|
||
await visualSnapshot(page,"mobile-profile.png");
|
||
await page.getByRole("button", { name: "个人资料" }).click();
|
||
await expect(page.getByLabel("昵称")).toHaveValue("管理员");
|
||
const autoplay=page.getByRole("switch",{name:"自动播放下一部"});
|
||
const coverMask=page.getByRole("switch",{name:"默认遮罩封面"});
|
||
await expect(autoplay).toHaveAttribute("aria-checked","true");
|
||
await expect(coverMask).toHaveAttribute("aria-checked","false");
|
||
await autoplay.click();
|
||
await expect(autoplay).toHaveAttribute("aria-checked","false");
|
||
|
||
await page.getByRole("button", { name: "更多" }).click();
|
||
await page.locator(".mobile-more-menu").getByText("合集", { exact: true }).click();
|
||
await expect(page.getByRole("heading", { name: "合集",exact:true })).toBeVisible();
|
||
await expect(page.locator(".topbar")).toBeHidden();
|
||
await page.getByRole("button", { name: /示例合集/ }).click();
|
||
await expect(page.locator(".collection-preview-video")).toHaveCount(8);
|
||
await expect(page.locator(".collection-row-actions")).toHaveCount(0);
|
||
await page.getByRole("button",{name:"管理合集"}).click();
|
||
await expect(page.locator(".collection-video-list > article")).toHaveCount(8);
|
||
const removeCollection=page.locator(".collection-row-actions").first().getByRole("button",{name:"移出"});
|
||
const removeLayout=await removeCollection.evaluate(button=>({height:button.getBoundingClientRect().height,display:getComputedStyle(button).display,placeItems:getComputedStyle(button).placeItems}));
|
||
expect(removeLayout.height).toBeGreaterThanOrEqual(44);
|
||
expect(removeLayout.display).toBe("grid");
|
||
expect(removeLayout.placeItems).toBe("center");
|
||
|
||
await page.goBack();
|
||
await expect(page.locator(".collection-preview-directory")).toBeVisible();
|
||
await page.goBack();
|
||
await expect(page.locator(".collection-browser-grid")).toBeVisible();
|
||
await page.goBack();
|
||
await expect(page.getByRole("heading", { name: "管理员" })).toBeVisible();
|
||
await page.getByRole("button", { name: "更多" }).click();
|
||
await page.locator(".mobile-more-menu").getByText("设置", { exact: true }).click();
|
||
await expect(page.locator(".topbar")).toBeHidden();
|
||
await page.getByRole("button", { name: "存储", exact: true }).click();
|
||
await expect(page.locator(".storage-panel-v2").getByText("NAS 本地暂存 / 缓存")).toBeVisible();
|
||
await expect(page.locator(".storage-panel-v2").getByText("AI 索引", { exact: true })).toBeVisible();
|
||
await page.getByRole("button", { name: "AI 与网络" }).click();
|
||
await expect(page.getByText("HTTP/HTTPS 下载代理")).toBeVisible();
|
||
await expect(page.getByLabel("PyPI 主镜像")).toHaveValue("https://pypi.tuna.tsinghua.edu.cn/simple");
|
||
const proxySwitch=page.getByRole("switch",{name:"使用下载代理"});
|
||
await expect(proxySwitch).toHaveAttribute("aria-checked","false");
|
||
await proxySwitch.click();
|
||
await expect(proxySwitch).toHaveAttribute("aria-checked","true");
|
||
await expect(page.getByText("已启用：用于 OpenVINO 等非国内镜像来源")).toBeVisible();
|
||
const overflow = await page.evaluate(() => document.documentElement.scrollWidth - innerWidth);
|
||
expect(overflow).toBeLessThanOrEqual(1);
|
||
});
|
||
|
||
test("settings installs each AI model independently and keeps progress on its row",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
const modelStatus:Record<string,any>={
|
||
visual_ready:false,ocr_ready:false,faces_ready:false,audio_ready:false,pending_videos:0,
|
||
hf_endpoint:"https://huggingface.co",pip:{index_url:"https://pypi.tuna.tsinghua.edu.cn/simple",pytorch_index_url:"https://download.pytorch.org/whl/cpu"},proxy:{enabled:false,url:"",username:"",has_password:false},
|
||
component_versions:{},component_sizes:{visual:0,ocr:0,faces:0,audio:0},manifest:{},
|
||
accelerator:{selected:"AUTO",components:{},devices:[],cpu_threads:2},sources:{
|
||
visual_image:"https://huggingface.co/sentence-transformers/clip-ViT-B-32",
|
||
visual_text:"https://huggingface.co/sentence-transformers/clip-ViT-B-32-multilingual-v1",
|
||
ocr:"https://github.com/RapidAI/RapidOCR",audio:"https://huggingface.co/openai/whisper-small",faces:{},
|
||
},
|
||
installations:{
|
||
visual:{job_id:"visual-job",status:"queued",progress:0,message:"",error:null},
|
||
ocr:{job_id:"ocr-job",status:"running",progress:.42,message:"下载 OCR 权重",error:null},
|
||
faces:{job_id:"faces-job",status:"failed",progress:.2,message:"",error:"OpenVINO 下载失败"},
|
||
},
|
||
};
|
||
const submitted:string[]=[];
|
||
await page.route("**/api/v1/models?*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(modelStatus)}));
|
||
await page.route("**/api/v1/models/install",async route=>{
|
||
const component=(route.request().postDataJSON() as {component:string}).component;
|
||
submitted.push(component);
|
||
modelStatus.installations[component]={job_id:`${component}-job`,status:"queued",progress:0,message:"",error:null};
|
||
await route.fulfill({status:202,contentType:"application/json",body:JSON.stringify({job_id:`${component}-job`,job_ids:{[component]:`${component}-job`}})});
|
||
});
|
||
await page.goto("/");
|
||
await openSettings(page,1024);
|
||
await expect(page.locator(".model-component")).toHaveCount(4);
|
||
const visual=page.locator(".model-component").filter({hasText:"画面语义"});
|
||
const ocr=page.locator(".model-component").filter({hasText:"OCR 文字"});
|
||
const faces=page.locator(".model-component").filter({hasText:"人物识别"});
|
||
const audio=page.locator(".model-component").filter({hasText:"音频识别"});
|
||
await expect(visual.locator(".model-install-progress")).toContainText("等待");
|
||
await expect(ocr.locator(".model-install-progress")).toContainText("42%");
|
||
await expect(ocr).toContainText("下载 OCR 权重");
|
||
await expect(faces).toContainText("OpenVINO 下载失败");
|
||
await expect(faces.getByRole("button",{name:"重试"})).toBeVisible();
|
||
await expect(audio.getByRole("button",{name:"下载"})).toBeVisible();
|
||
await audio.getByRole("button",{name:"下载"}).click();
|
||
await expect.poll(()=>submitted).toEqual(["audio"]);
|
||
await expect(audio.locator(".model-install-progress")).toContainText("等待");
|
||
const installMissing=page.getByRole("button",{name:"安装或修复缺失组件"});
|
||
await expect(installMissing).toHaveClass(/secondary/);
|
||
await expect(installMissing).toBeDisabled();
|
||
});
|
||
|
||
test("settings repairs an installed model whose runtime is unavailable",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
const modelStatus:Record<string,any>={
|
||
visual_ready:true,ocr_ready:true,faces_ready:true,audio_ready:true,pending_videos:17,
|
||
operational_components:{visual:false,ocr:true,faces:true,audio:true},
|
||
hf_endpoint:"https://huggingface.co",pip:{index_url:"https://pypi.tuna.tsinghua.edu.cn/simple",pytorch_index_url:"https://download.pytorch.org/whl/cpu"},proxy:{enabled:false,url:"",username:"",has_password:false},
|
||
component_versions:{visual:"clip",ocr:"rapidocr",faces:"open-model-zoo",audio:"whisper"},component_sizes:{visual:100,ocr:100,faces:100,audio:100},manifest:{},
|
||
runtime_dependencies:{visual:{state:"missing"},ocr:{state:"ready"},faces:{state:"ready"},audio:{state:"ready"}},
|
||
runtime_environment:{state:"ready",size_bytes:1_500_000_000,components:["ocr","faces","audio"]},component_health:{},installations:{},
|
||
accelerator:{selected:"AUTO",components:{},devices:[],cpu_threads:2},sources:{
|
||
visual_image:"https://huggingface.co/sentence-transformers/clip-ViT-B-32",
|
||
visual_text:"https://huggingface.co/sentence-transformers/clip-ViT-B-32-multilingual-v1",
|
||
ocr:"https://github.com/RapidAI/RapidOCR",audio:"https://huggingface.co/openai/whisper-small",faces:{},
|
||
},
|
||
};
|
||
const submitted:string[]=[];
|
||
await page.route("**/api/v1/models?*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(modelStatus)}));
|
||
await page.route("**/api/v1/models/install",async route=>{
|
||
const component=(route.request().postDataJSON() as {component:string}).component;
|
||
submitted.push(component);
|
||
modelStatus.installations[component]={job_id:`${component}-repair`,status:"queued",progress:0,message:"",error:null};
|
||
await route.fulfill({status:202,contentType:"application/json",body:JSON.stringify({job_id:`${component}-repair`,job_ids:{[component]:`${component}-repair`}})});
|
||
});
|
||
await page.goto("/");
|
||
await openSettings(page,1024);
|
||
const visual=page.locator(".model-component").filter({hasText:"画面语义"});
|
||
await expect(visual).toContainText("首次下载会安装运行环境");
|
||
await visual.getByRole("button",{name:"修复"}).click();
|
||
await expect.poll(()=>submitted).toEqual(["visual"]);
|
||
await expect(visual.locator(".model-install-progress")).toContainText("等待");
|
||
});
|
||
|
||
test("settings exposes domestic pip source and an independent proxy switch",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await openSettings(page,390);
|
||
await expect(page.getByLabel("PyPI 主镜像")).toHaveValue("https://pypi.tuna.tsinghua.edu.cn/simple");
|
||
await expect(page.getByLabel("PyTorch CPU 轮子源（可留空）")).toHaveValue("https://download.pytorch.org/whl/cpu");
|
||
const proxySwitch=page.getByRole("switch",{name:"使用下载代理"});
|
||
await expect(proxySwitch).toHaveAttribute("aria-checked","false");
|
||
await expect(page.getByText("已关闭：AI 下载直接连接目标站点")).toBeVisible();
|
||
await proxySwitch.click();
|
||
await expect(proxySwitch).toHaveAttribute("aria-checked","true");
|
||
await expect(page.getByText("已启用：用于 OpenVINO 等非国内镜像来源")).toBeVisible();
|
||
await page.getByRole("button",{name:/智能检测/}).click();
|
||
await page.getByRole("button",{name:/均衡/}).click();
|
||
const saveSpeech=page.waitForRequest(request=>request.url().endsWith("/api/v1/speech/config")&&request.method()==="PATCH");
|
||
await page.getByRole("button",{name:"保存识别策略"}).click();
|
||
expect((await saveSpeech).postDataJSON()).toMatchObject({language_policy:"auto",quality_profile:"balanced"});
|
||
const repairSpeech=page.waitForRequest(request=>request.url().endsWith("/api/v1/speech/reconcile")&&request.method()==="POST");
|
||
await page.getByRole("button",{name:"重建旧版音频索引"}).click();
|
||
await repairSpeech;
|
||
await expect(page.getByText(/发现 2 部低质量转写并排队重做/)).toBeVisible();
|
||
expect(await page.evaluate(()=>document.documentElement.scrollWidth-innerWidth)).toBeLessThanOrEqual(1);
|
||
});
|
||
|
||
test("resource panel explains and manually verifies legacy rclone processes",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await openSettings(page,1024);
|
||
await page.locator(".settings-segments").getByRole("button",{name:"任务与偏好"}).click();
|
||
await expect(page.locator(".io-overview")).toContainText("应用数据卷利用率 21.4%");
|
||
await expect(page.locator(".io-overview")).toContainText("全局等待 32.2%（仅供参考）");
|
||
await expect(page.locator(".gpu-mode-panel")).toContainText("2 streams · batch 2");
|
||
const gpuModeRequest=page.waitForRequest(value=>value.url().endsWith("/system/resources")&&value.method()==="PATCH");
|
||
await page.locator(".gpu-mode-panel").getByRole("button",{name:/吞吐/}).click();
|
||
expect((await gpuModeRequest).postDataJSON()).toEqual({ai_gpu_mode:"throughput"});
|
||
await expect(page.locator(".rclone-reconcile")).toContainText("1 个旧实例正在安全核验");
|
||
await expect(page.locator(".rclone-reconcile")).toContainText("连续 3 次");
|
||
const request=page.waitForRequest(value=>value.url().endsWith("/system/resources/rclone/reconcile")&&value.method()==="POST");
|
||
await page.getByRole("button",{name:"立即安全核验"}).click();
|
||
await request;
|
||
await expect(page.getByText(/仍在安全观察期/)).toBeVisible();
|
||
});
|
||
|
||
test("storage page separates AI, rclone and OpenList temporary usage",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
await page.route("**/api/v1/storage/usage*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({schema_version:2,collected_at:"2026-08-08T02:00:00Z",cached_seconds:30,disk:{total_bytes:4*1024**4,used_bytes:2*1024**4,available_bytes:2*1024**4},app_bytes:20*1024**3,categories:{database:{bytes:1024**3,available:true},ai_index:{bytes:2*1024**3,available:true,mode:"pgvector"},models:{bytes:4*1024**3,available:true},thumbnails:{bytes:1024**3,available:true},preview_cache:{bytes:1024**3,available:true,children:{preview_cache:{bytes:900*1024**2,available:true},query_images:{bytes:124*1024**2,available:true}}},remote_cache:{bytes:3*1024**3,available:true,active_bytes:1024**3,reclaimable_bytes:2*1024**3,children:{remote_media_cache:{bytes:1024**3,available:true,active_bytes:512*1024**2,reclaimable_bytes:512*1024**2},rclone_vfs_cache:{bytes:2*1024**3,available:true,active_bytes:0,reclaimable_bytes:2*1024**3},rclone_runtime:{bytes:1024,available:true}}},upload_staging:{bytes:8*1024**3,available:true,children:{upload_receive:{bytes:0,available:true},download_staging:{bytes:0,available:true},encryption_work:{bytes:0,available:true},openlist_local_staging:{bytes:8*1024**3,available:true,locations:[{source_id:"source-1",name:"OpenList",path:"/volume/stage",bytes:8*1024**3,available:true}]}}},other:{bytes:0,available:true}}})}));
|
||
await page.goto("/");
|
||
await openSettings(page,390);
|
||
await page.locator(".settings-segments").getByRole("button",{name:"存储",exact:true}).click();
|
||
await expect(page.getByText("AI 远程媒体",{exact:true})).toBeVisible();
|
||
await expect(page.getByText("rclone VFS 缓存",{exact:true})).toBeVisible();
|
||
await expect(page.getByText("OpenList 本地中转",{exact:true})).toBeVisible();
|
||
await expect(page.getByText("1 个 OpenList 中转路径")).toBeVisible();
|
||
const cleanup=page.waitForRequest(request=>request.url().endsWith("/system/resources/cache/cleanup")&&request.method()==="POST");
|
||
await page.getByRole("button",{name:"清理旧 rclone 缓存"}).click();
|
||
await page.getByRole("button",{name:"继续"}).click();
|
||
expect((await cleanup).postDataJSON()).toEqual({targets:["rclone_vfs"]});
|
||
expect(await page.evaluate(()=>document.documentElement.scrollWidth-innerWidth)).toBeLessThanOrEqual(1);
|
||
});
|
||
|
||
test("remote source capacity supports a truthful manual override when OpenList omits quota",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
const cloud={...source,kind:"webdav",name:"yidongpan/test",config:{driver:"alist",storage_backend:"openlist_native",writable:true}};
|
||
await page.route("**/api/v1/sources",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify([cloud])}));
|
||
let capacityResponse={source_id:"source-1",scope:"remote",status:"unsupported",total_bytes:0,used_bytes:0,available_bytes:0,provider:"rclone",reason:"此媒体来源未提供容量配额",collected_at:"2026-08-09T08:00:00Z",cached_seconds:30};
|
||
await page.route("**/api/v1/sources/source-1/capacity*",route=>{if(route.request().method()==="PATCH"){const body=route.request().postDataJSON() as {total_bytes:number;available_bytes:number};capacityResponse={...capacityResponse,status:"available",total_bytes:body.total_bytes,used_bytes:body.total_bytes-body.available_bytes,available_bytes:body.available_bytes,provider:"manual",reason:"管理员手工设置；不会自动随云盘变化"}}return route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(capacityResponse)})});
|
||
await page.goto("/");
|
||
await openSettings(page,390);
|
||
await page.locator(".settings-segments").getByRole("button",{name:"存储",exact:true}).click();
|
||
const capacity=page.locator(".source-capacities article").filter({hasText:"yidongpan/test"});
|
||
await expect(capacity).toContainText("未提供配额");
|
||
await capacity.getByRole("button",{name:"设置容量"}).click();
|
||
await capacity.getByLabel("总容量（TiB）").fill("8");
|
||
await capacity.getByLabel("可用容量（TiB）").fill("6");
|
||
const request=page.waitForRequest(value=>value.url().includes("/sources/source-1/capacity")&&value.method()==="PATCH");
|
||
await capacity.getByRole("button",{name:"保存容量"}).click();
|
||
expect((await request).postDataJSON()).toEqual({total_bytes:8*1024**4,available_bytes:6*1024**4});
|
||
await expect(capacity).toContainText("手工设置 · 不会自动同步云盘");
|
||
await expect(capacity).toContainText("可用 6.00 TB");
|
||
await expect(capacity).not.toContainText("NAS");
|
||
});
|
||
|
||
test("upload completion stays on the current page and exposes WebDAV transfer stages",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
const webdav={...source,kind:"webdav",name:"家庭 WebDAV",config:{base_url:"https://dav.example",writable:true}};
|
||
await page.route("**/api/v1/sources",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify([webdav])}));
|
||
await page.route("**/api/v1/uploads",async route=>{
|
||
const body=route.request().method()==="POST"
|
||
? {id:"upload-new",filename:"voice.mp4",source_id:source.id,status:"receiving",progress:0,bytes_received:0,size_bytes:5,relative_path:"",chunk_size:5,total_chunks:1,received_chunks:[]}
|
||
: [];
|
||
await route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(body)});
|
||
});
|
||
await page.goto("/");
|
||
await page.locator(".sidebar nav > .upload-status").click();
|
||
await page.locator(".drop-zone input[type=file]").setInputFiles({name:"voice.mp4",mimeType:"video/mp4",buffer:Buffer.from("voice")});
|
||
await page.getByRole("button",{name:"开始上传"}).click();
|
||
await expect(page.locator(".toast-host")).toContainText("正在后台转存到 家庭 WebDAV");
|
||
await expect(page.getByRole("heading",{name:"最近新增"})).toBeVisible();
|
||
await expect(page.getByRole("heading",{name:"上传中心"})).toHaveCount(0);
|
||
await expect(page.getByRole("heading",{name:"上传到私有媒体库"})).toBeHidden();
|
||
|
||
await page.route("**/api/v1/uploads?*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify([{id:"upload-new",filename:"voice.mp4",source_id:source.id,status:"transferring",stage:"external_copying",stage_label:"正在复制到云盘",progress:.45,bytes_received:5,size_bytes:5,message:"传输到目标库 45%",relative_path:"",chunk_size:5,total_chunks:1,received_chunks:[0],stages:[
|
||
{key:"receiving",state:"completed",progress:1,label:"上传至 ImageFind"},
|
||
{key:"local_processing",state:"completed",progress:1,label:"本地校验与处理"},
|
||
{key:"remote",state:"active",progress:.45,label:"云盘复制与校验"},
|
||
{key:"cataloging",state:"pending",progress:0,label:"加入媒体库并排队 AI"},
|
||
]}])}));
|
||
const globalUpload=page.locator(".sidebar nav > .upload-status");
|
||
await expect(globalUpload).toHaveAttribute("aria-label",/传输到目标库 45%/);
|
||
await globalUpload.click();
|
||
await expect(page.getByRole("heading",{name:"传输中心"})).toBeVisible();
|
||
await expect(page.locator(".transfer-stages>span")).toHaveCount(4);
|
||
await expect(page.locator(".transfer-stages")).toContainText("上传至 ImageFind");
|
||
await expect(page.locator(".transfer-stages")).toContainText("本地校验与处理");
|
||
await expect(page.locator(".transfer-stages")).toContainText("云盘复制与校验");
|
||
await expect(page.locator(".transfer-stages")).toContainText("加入媒体库并排队 AI");
|
||
await expect(page.locator(".transfer-stages")).toContainText("45%");
|
||
});
|
||
|
||
test("upload center paginates history while global state keeps resumable tasks",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
const history=Array.from({length:23},(_,index)=>({
|
||
id:`history-${String(index).padStart(2,"0")}`,filename:index===22?"resume.mp4":`history-${index}.mp4`,title:index===22?"断点任务":`历史任务 ${index}`,
|
||
source_id:source.id,status:index===22?"receiving":"completed",progress:index===22?.4:1,bytes_received:index===22?2:10,size_bytes:index===22?6:10,
|
||
message:index===22?"浏览器上传 40%":"已完成",relative_path:"",chunk_size:10,total_chunks:1,received_chunks:index===22?[]:[0],
|
||
}));
|
||
const requestedPages:number[]=[];
|
||
await page.route("**/api/v1/uploads?*",route=>{
|
||
const url=new URL(route.request().url());const current=Number(url.searchParams.get("page")||1);requestedPages.push(current);
|
||
const start=(current-1)*10;const body={items:history.slice(start,start+10),status_items:[history[22]],active_count:1,failed_count:0,page:current,page_size:10,total:23,pages:3};
|
||
return route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(body)});
|
||
});
|
||
await page.goto("/");
|
||
await expect(page.locator(".sidebar nav > .upload-status b")).toHaveText("1");
|
||
await page.locator(".sidebar nav > .upload-status").click();
|
||
await expect(page.locator(".transfer-list>article")).toHaveCount(10);
|
||
await expect(page.locator(".transfer-tabs")).toContainText("上传记录 1");
|
||
await expect(page.locator(".transfer-summary")).toContainText("进行中 1");
|
||
await expect(page.locator(".transfer-summary")).toContainText("历史 22");
|
||
await expect(page.locator(".transfer-pagination")).toContainText("第 1 / 3 页");
|
||
await expect.poll(()=>page.evaluate(()=>document.documentElement.scrollHeight)).toBeLessThan(5000);
|
||
await page.locator(".transfer-pagination").getByRole("button",{name:"下一页"}).click();
|
||
await expect(page.locator(".transfer-pagination")).toContainText("第 2 / 3 页");
|
||
await expect(page.locator(".transfer-list>article")).toHaveCount(10);
|
||
await expect(page.locator(".transfer-list")).toContainText("历史任务 10");
|
||
await expect(page.locator(".transfer-list")).not.toContainText("历史任务 0");
|
||
await page.getByRole("button",{name:"刷新",exact:true}).click();
|
||
await expect.poll(()=>requestedPages.at(-1)).toBe(2);
|
||
|
||
await page.getByRole("button",{name:"继续上传"}).click();
|
||
await page.locator(".drop-zone input[type=file]").setInputFiles({name:"resume.mp4",mimeType:"video/mp4",buffer:Buffer.from("resume")});
|
||
await expect(page.getByLabel("视频标题（可选）")).toHaveValue("断点任务");
|
||
await page.getByRole("button",{name:"关闭"}).click();
|
||
|
||
for(const width of [320,390]){
|
||
await page.setViewportSize({width,height:780});
|
||
await expect.poll(()=>page.evaluate(()=>document.documentElement.scrollWidth-innerWidth)).toBeLessThanOrEqual(1);
|
||
for(const button of await page.locator(".transfer-pagination button").all()){
|
||
const box=await button.boundingBox();expect(box).not.toBeNull();expect(box!.height).toBeGreaterThanOrEqual(44);
|
||
}
|
||
}
|
||
});
|
||
|
||
test("mobile upload records clean noisy names, expose status hierarchy and stay contained",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
const noisy="dc5d56e813283316e7b37705e400bf4a_logo.mp4.8951e586f4d7aebf41f43fac535449c8.mp4";
|
||
const tasks=[
|
||
{id:"upload-active",filename:noisy,source_id:source.id,status:"transferring",progress:.45,bytes_received:45,size_bytes:100,message:"传输到目标库 45%",relative_path:"",chunk_size:10,total_chunks:10,received_chunks:[0,1,2,3]},
|
||
{id:"upload-failed",filename:"failed.mp4",source_id:source.id,status:"failed",progress:.2,bytes_received:20,size_bytes:100,error:"目标目录不可写",relative_path:"",chunk_size:10,total_chunks:10,received_chunks:[0,1],failure_stage:"transfer",can_retry:true},
|
||
{id:"upload-history",filename:"ssnn3.mp4.17026b156c943689dbb4596e735e8598.mp4",source_id:source.id,status:"completed",progress:1,bytes_received:100,size_bytes:100,message:"已完成",relative_path:"",chunk_size:10,total_chunks:10,received_chunks:[0,1,2,3,4,5,6,7,8,9]},
|
||
];
|
||
await page.route("**/api/v1/uploads?*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({items:tasks,status_items:tasks.slice(0,2),active_count:1,failed_count:1,page:1,page_size:10,total:3,pages:1})}));
|
||
await page.goto("/");
|
||
await page.locator(".sidebar nav > .upload-status").click();
|
||
await expect(page.locator(".transfer-main strong").first()).toHaveText("logo");
|
||
await expect(page.locator(".completed-history .transfer-main strong")).toHaveText("ssnn3");
|
||
await expect(page.locator(".transfer-list")).toContainText(noisy);
|
||
await expect(page.locator(".transfer-summary")).toContainText("进行中 1");
|
||
await expect(page.locator(".transfer-summary")).toContainText("失败 1");
|
||
await expect(page.locator(".transfer-summary")).toContainText("历史 1");
|
||
await expect(page.locator(".completed-history .transfer-completed")).toHaveText(/AI 识别已排队/);
|
||
const transferGeometry=await page.evaluate(()=>{const content=document.querySelector<HTMLElement>(".content")!;const list=document.querySelector<HTMLElement>(".transfer-list")!;return {content:[content.scrollWidth,content.clientWidth],list:[list.scrollWidth,list.clientWidth],document:document.documentElement.scrollWidth,viewport:innerWidth}});
|
||
expect(transferGeometry.content[0]).toBeLessThanOrEqual(transferGeometry.content[1]+1);
|
||
expect(transferGeometry.list[0]).toBeLessThanOrEqual(transferGeometry.list[1]+1);
|
||
expect(transferGeometry.document).toBeLessThanOrEqual(transferGeometry.viewport+1);
|
||
|
||
await page.goBack();
|
||
await expect(page.getByRole("heading",{name:"最近新增"})).toBeVisible();
|
||
await page.getByRole("button",{name:"搜索",exact:true}).first().click();
|
||
const filterHeights=await page.locator(".recognition-filter button").evaluateAll(buttons=>buttons.map(button=>button.getBoundingClientRect().height));
|
||
expect(filterHeights.length).toBeGreaterThan(0);
|
||
expect(filterHeights.every(height=>height>=44)).toBe(true);
|
||
await page.getByRole("button",{name:"更多"}).click();
|
||
await page.locator(".mobile-more-menu").getByRole("button",{name:"设置"}).click();
|
||
const modelActionHeights=await page.locator(".model-components article>button").evaluateAll(buttons=>buttons.map(button=>button.getBoundingClientRect().height));
|
||
expect(modelActionHeights.length).toBeGreaterThan(0);
|
||
expect(modelActionHeights.every(height=>height>=44)).toBe(true);
|
||
});
|
||
|
||
test("multi-file upload keeps an independent optional title for every video",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
const submitted:Array<Record<string,unknown>>=[];
|
||
await page.route("**/api/v1/uploads",async route=>{
|
||
if(route.request().method()!=="POST"){await route.fallback();return}
|
||
const request=route.request().postDataJSON() as Record<string,unknown>;submitted.push(request);
|
||
await route.fulfill({status:201,contentType:"application/json",body:JSON.stringify({id:`upload-${submitted.length}`,...request,status:"receiving",progress:0,bytes_received:0,chunk_size:Number(request.size_bytes),total_chunks:1,received_chunks:[]})});
|
||
});
|
||
await page.goto("/");
|
||
await page.locator(".top-upload .upload-status").click();
|
||
await page.locator(".drop-zone input[type=file]").setInputFiles([
|
||
{name:"first.mp4",mimeType:"video/mp4",buffer:Buffer.from("one")},
|
||
{name:"second.mp4",mimeType:"video/mp4",buffer:Buffer.from("two")},
|
||
]);
|
||
const titles=page.getByLabel("视频标题（可选）");
|
||
await expect(titles).toHaveCount(2);
|
||
await titles.nth(0).fill("第一部自定义标题");
|
||
await titles.nth(1).fill("第二部自定义标题");
|
||
await page.getByRole("button",{name:"开始上传"}).click();
|
||
await expect.poll(()=>submitted.length).toBe(2);
|
||
expect(submitted.map(item=>item.title)).toEqual(["第一部自定义标题","第二部自定义标题"]);
|
||
});
|
||
|
||
test("recycle bin has loading, empty, restore and permanent-delete states",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
let items:Array<Record<string,unknown>>=[];
|
||
let releaseInitialTrash!:()=>void;
|
||
const initialTrashGate=new Promise<void>(resolve=>{releaseInitialTrash=resolve});
|
||
let initialTrashRequest=true;
|
||
await page.route("**/api/v1/trash**",async route=>{
|
||
const url=new URL(route.request().url());
|
||
if(route.request().method()==="GET"){
|
||
if(initialTrashRequest){initialTrashRequest=false;await initialTrashGate}
|
||
await route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(items)});return;
|
||
}
|
||
if(url.pathname.endsWith("/restore")){
|
||
items=[];await route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({key:"restored/movie.mp4"})});return;
|
||
}
|
||
if(route.request().method()==="DELETE"){
|
||
items=[];await route.fulfill({status:204,body:""});return;
|
||
}
|
||
await route.fallback();
|
||
});
|
||
await page.goto("/");
|
||
await page.getByRole("button",{name:"更多"}).click();
|
||
await page.locator(".mobile-more-menu").getByRole("button",{name:"资料库"}).click();
|
||
await page.getByRole("button",{name:"回收站",exact:true}).click();
|
||
const dialog=page.getByRole("dialog",{name:"回收站"});
|
||
await expect(dialog).toBeVisible();
|
||
await expect(dialog.getByText("正在读取回收站…")).toBeVisible();
|
||
releaseInitialTrash();
|
||
await expect(dialog.getByRole("heading",{name:"回收站是空的"})).toBeVisible();
|
||
expect(await page.evaluate(()=>document.body.style.overflow)).toBe("hidden");
|
||
|
||
const deleted={id:"trash-1",source_id:source.id,display_name:"movie.mp4",original_key:"private/movie.mp4",size_bytes:1024,deleted_at:"2026-07-31T10:00:00Z",expires_at:"2026-08-30T10:00:00Z"};
|
||
items=[deleted];await dialog.getByRole("button",{name:"刷新"}).click();
|
||
await expect(dialog.getByText("private/movie.mp4")).toBeVisible();
|
||
await dialog.getByRole("button",{name:"恢复",exact:true}).click();
|
||
await expect(dialog.getByRole("heading",{name:"回收站是空的"})).toBeVisible();
|
||
|
||
items=[deleted];await dialog.getByRole("button",{name:"刷新"}).click();
|
||
await dialog.getByRole("button",{name:"永久删除",exact:true}).click();
|
||
await page.getByRole("alertdialog").getByRole("button",{name:"继续"}).click();
|
||
await expect(dialog.getByRole("heading",{name:"回收站是空的"})).toBeVisible();
|
||
await dialog.getByRole("button",{name:"关闭回收站"}).click();
|
||
await expect(dialog).toBeHidden();
|
||
expect(await page.evaluate(()=>document.body.style.overflow)).toBe("");
|
||
});
|
||
|
||
test("AI status never renders placeholder conclusions before the response arrives",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
let release!:()=>void;const gate=new Promise<void>(resolve=>{release=resolve});
|
||
const installed={visual_ready:true,ocr_ready:true,faces_ready:true,audio_ready:true,pending_videos:3,operational_components:{visual:true,ocr:true,faces:true,audio:true},component_versions:{visual:"clip",ocr:"rapidocr",faces:"omz",audio:"whisper"},component_sizes:{visual:100,ocr:100,faces:100,audio:100},manifest:{version:"test"},runtime_dependencies:{visual:{state:"ready"},ocr:{state:"ready"},faces:{state:"ready"},audio:{state:"ready"}},runtime_environment:{state:"ready",size_bytes:1024,components:["visual","ocr","faces","audio"]},component_health:{},installations:{},accelerator:{selected:"GPU.0",devices:["GPU.0"],device_names:{"GPU.0":"Intel UHD"},cpu_threads:2,components:{visual:{state:"ready",actual_device:"GPU.0"},ocr:{state:"ready",actual_device:"GPU.0"},faces:{state:"ready",actual_device:"GPU.0"},audio:{state:"ready",actual_device:"GPU.0"}}},sources:{},proxy:{enabled:false,url:"",username:"",has_password:false},pip:{index_url:"https://pypi.tuna.tsinghua.edu.cn/simple",pytorch_index_url:""}};
|
||
await page.route("**/api/v1/models?*",async route=>{await gate;await route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(installed)})});
|
||
await page.goto("/");
|
||
await openSettings(page,1024);
|
||
await expect(page.getByText("正在读取模型、运行环境与推理设备…")).toBeVisible();
|
||
await expect(page.locator(".model-panel").getByText("未安装",{exact:true})).toHaveCount(0);
|
||
await expect(page.locator(".model-panel").getByText("CPU 回退",{exact:true})).toHaveCount(0);
|
||
release();
|
||
await expect(page.locator(".model-component")).toHaveCount(4);
|
||
await expect(page.locator(".accelerator-card")).toContainText("Intel GPU");
|
||
await expect(page.getByText("3 部",{exact:true})).toBeVisible();
|
||
});
|
||
|
||
test("AI status retains the last verified device after a model is unloaded",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
const installed={visual_ready:true,ocr_ready:true,faces_ready:true,audio_ready:true,pending_videos:0,operational_components:{visual:true,ocr:true,faces:true,audio:true},component_versions:{visual:"clip",ocr:"rapidocr",faces:"omz",audio:"whisper"},component_sizes:{visual:100,ocr:100,faces:100,audio:100},manifest:{version:"test"},runtime_dependencies:{visual:{state:"ready"},ocr:{state:"ready"},faces:{state:"ready"},audio:{state:"ready"}},runtime_environment:{state:"ready",size_bytes:1024,components:["visual","ocr","faces","audio"]},component_health:{},installations:{},accelerator:{selected:"Intel GPU 优先（首次推理时加载）",devices:["GPU.0"],device_names:{"GPU.0":"Intel UHD"},cpu_threads:2,components:{visual:{state:"not_loaded",device:null,requested_device:"GPU.0",actual_device:"GPU.0",execution_devices:["GPU.0"],last_verified_at:"2026-08-03T01:00:00Z"},ocr:{state:"not_loaded",device:null,requested_device:"GPU.0",actual_device:"CPU",execution_devices:["CPU"],last_verified_at:"2026-08-03T01:01:00Z"},faces:{state:"not_loaded",device:null,requested_device:null,actual_device:null,execution_devices:[],last_verified_at:null},audio:{state:"ready",actual_device:"GPU.0",execution_devices:["GPU.0"]}}},sources:{},proxy:{enabled:false,url:"",username:"",has_password:false},pip:{index_url:"https://pypi.tuna.tsinghua.edu.cn/simple",pytorch_index_url:""}};
|
||
await page.route("**/api/v1/models?*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(installed)}));
|
||
await page.goto("/");
|
||
await openSettings(page,1024);
|
||
const accelerator=page.locator(".accelerator-card");
|
||
await expect(accelerator).toContainText("上次：Intel GPU");
|
||
await expect(accelerator).toContainText("上次：CPU");
|
||
await expect(accelerator).toContainText("首次任务时加载");
|
||
});
|
||
|
||
test("search supports six recognition types, timed audio excerpts and image filter correction",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
const searchBodies:unknown[]=[];
|
||
await page.route("**/api/v1/query-images",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({id:"query-image"})}));
|
||
await page.route("**/api/v1/search",async route=>{
|
||
searchBodies.push(route.request().postDataJSON());
|
||
await route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({items:[{
|
||
frame_id:"audio-video-0-65000",video_id:"video-0",display_name:videos[0].title,source_name:source.name,source_kind:"local",
|
||
timestamp_ms:65000,segment_start_ms:65000,segment_end_ms:68000,thumbnail_url:"",playback_url:videos[0].playback_url,
|
||
score:.91,match_sources:["audio"],match_details:[{type:"audio",text:"远处传来海浪声音",start_ms:65000,end_ms:68000}],catalog_code:"PRIVATE-001",
|
||
}]})});
|
||
});
|
||
await page.goto("/");
|
||
await page.getByRole("button",{name:"搜索"}).click();
|
||
const coverage=page.locator(".search-coverage");
|
||
await expect(coverage).toContainText("音频可搜索覆盖率 50%");
|
||
await expect(coverage).toContainText("4 / 8 部当前可搜索 · 其中 5 部已用当前模型处理");
|
||
const recognition=page.getByRole("group",{name:"识别类型"});
|
||
for(const name of ["画面语义","OCR 文字","人物识别","音频识别","字幕","影片资料"]){
|
||
await expect(recognition.getByRole("button",{name})).toBeVisible();
|
||
}
|
||
await recognition.getByRole("button",{name:"音频识别"}).click();
|
||
await page.getByLabel("搜索内容").fill("海浪声音");
|
||
await page.getByRole("form",{name:"移动端搜索"}).getByRole("button",{name:"搜索",exact:true}).click();
|
||
await expect(page.locator(".match-excerpt")).toHaveText("远处传来海浪声音");
|
||
await expect(page.locator(".search-result")).toContainText("1:05–1:08");
|
||
expect(searchBodies.at(-1)).toMatchObject({text:"海浪声音",recognition_types:["audio"]});
|
||
|
||
await page.locator('input[type="file"][accept="image/*"]').setInputFiles({name:"scene.png",mimeType:"image/png",buffer:Buffer.from("image")});
|
||
await expect(recognition.getByRole("button",{name:"画面语义"})).toHaveAttribute("aria-pressed","true");
|
||
await expect(recognition.getByRole("button",{name:"音频识别"})).toHaveAttribute("aria-pressed","false");
|
||
await expect.poll(()=>searchBodies.filter(body=>body.image_id==="query-image").at(-1)).toMatchObject({image_id:"query-image",recognition_types:["visual"]});
|
||
});
|
||
|
||
test("desktop primary text does not regress to undersized labels",async({page})=>{
|
||
await page.setViewportSize({width:1440,height:900});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
const undersized=await page.locator(".video-card .video-info h3,.video-card .video-info p,.video-card .duration,.chip-row button,.sidebar nav button").evaluateAll(elements=>elements.map(element=>({text:element.textContent?.trim(),size:Number.parseFloat(getComputedStyle(element).fontSize)})).filter(item=>item.size<11));
|
||
expect(undersized).toEqual([]);
|
||
});
|
||
|
||
test("thumbnails expose loading, missing and error placeholders without broken images",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
const thumbnailVideos=videos.slice(0,3).map((video,index)=>({...video,thumbnail_url:index===2?undefined:`/api/v1/frames/${index===0?"slow":"broken"}/thumbnail`}));
|
||
await page.route("**/api/v1/videos?*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(thumbnailVideos)}));
|
||
await page.route("**/api/v1/home?*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({video_count:thumbnailVideos.length,updated_at:"2026-07-27T10:00:00Z",recent:{id:"recent",title:"最近新增",total:thumbnailVideos.length,items:thumbnailVideos},collections:{total:0,items:[]},categories:[],people:[],unorganized:null})}));
|
||
const pixel=Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=","base64");
|
||
await page.route("**/api/v1/frames/**",async route=>{
|
||
if(route.request().url().includes("/slow/")){
|
||
await new Promise(resolve=>setTimeout(resolve,350));
|
||
await route.fulfill({status:200,contentType:"image/png",body:pixel});
|
||
}else await route.fulfill({status:404,contentType:"application/json",body:JSON.stringify({detail:"missing"})});
|
||
});
|
||
await page.goto("/",{waitUntil:"domcontentloaded"});
|
||
await expect(page.locator(".video-card").nth(0).getByText("封面加载中")).toBeVisible();
|
||
await expect(page.locator(".video-card").nth(1).getByText("封面加载失败")).toBeVisible();
|
||
await expect(page.locator(".video-card").nth(2).getByText("暂无封面")).toBeVisible();
|
||
await expect(page.locator(".video-card").nth(0).locator(".thumb-placeholder")).toHaveCount(0);
|
||
await expect(page.locator(".video-card img[src]")).toHaveCount(2);
|
||
});
|
||
|
||
test("player deletion chooses source handling and requires a second confirmation",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await page.locator(".video-card").first().click();
|
||
await expect(page.getByRole("button",{name:"删除视频"})).toBeVisible();
|
||
await page.getByRole("button",{name:"删除视频"}).click();
|
||
const choice=page.getByRole("alertdialog");
|
||
await expect(choice).toContainText("只从媒体库移除");
|
||
await choice.getByRole("button",{name:"仅移出媒体库"}).click();
|
||
const dialog=page.getByRole("alertdialog");
|
||
await expect(dialog).toContainText("源文件保持不变");
|
||
const deletion=page.waitForRequest(request=>request.method()==="DELETE"&&request.url().includes("/api/v1/videos/video-0"));
|
||
await dialog.getByRole("button",{name:"继续"}).click();
|
||
expect((await deletion).url()).toContain("delete_source=false");
|
||
await expect(page.locator(".toast-host")).toContainText("视频已从媒体库移除，索引与缓存已清理");
|
||
});
|
||
|
||
test("transfer center exposes upload and system aria2 download flows",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
const activeDownload={id:"download-1",kind:"url",display_name:"movie.mp4",source_id:source.id,relative_path:"downloads",status:"downloading",progress:.36,total_bytes:1000,completed_bytes:360,download_speed:20,error:null,files:[],created_at:"2026-07-31T10:00:00Z"};
|
||
await page.route("**/api/v1/downloads",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify([activeDownload])}));
|
||
await page.goto("/");
|
||
await expect(page.locator(".sidebar nav > .upload-status")).toHaveAttribute("aria-label",/movie\.mp4 · 后台下载 36%/);
|
||
await expect(page.locator(".sidebar nav > .upload-status b")).toHaveText("1");
|
||
await page.locator(".sidebar nav > .upload-status").click();
|
||
await expect(page.getByRole("heading",{name:"传输中心"})).toBeVisible();
|
||
await page.locator(".transfer-tabs").getByRole("button",{name:/后台下载/}).click();
|
||
await expect(page.locator(".download-list")).toContainText("movie.mp4");
|
||
await page.getByRole("button",{name:"新建下载"}).click();
|
||
await expect(page.getByRole("heading",{name:"新建后台下载"})).toBeVisible();
|
||
await expect(page.getByPlaceholder("https://…、ftp://… 或 magnet:?…")).toBeVisible();
|
||
await expect(page.getByRole("button",{name:"选择 .torrent 文件"})).toBeVisible();
|
||
});
|
||
|
||
test("continue watching covers use gateway media auth and loading indicators stay centered",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await page.addInitScript(()=>{window.__IMAGEFIND_BASE__="/app/imagefind/"});
|
||
await mockApi(page,"gateway");
|
||
const continued={...videos[0],thumbnail_url:"/api/v1/frames/continue-frame/thumbnail"};
|
||
await page.route("**/api/v1/videos?*",route=>{
|
||
const url=new URL(route.request().url());
|
||
const body=url.searchParams.get("continue_only")==="true"?[continued]:[];
|
||
return route.fulfill({status:200,contentType:"application/json",body:JSON.stringify(body)});
|
||
});
|
||
let releaseThumbnail!:()=>void;
|
||
const thumbnailGate=new Promise<void>(resolve=>{releaseThumbnail=resolve});
|
||
const pixel=Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=","base64");
|
||
await page.route("**/api/v1/frames/continue-frame/thumbnail?*",async route=>{
|
||
await thumbnailGate;
|
||
await route.fulfill({status:200,contentType:"image/png",headers:{"Cache-Control":"public, max-age=3600"},body:pixel});
|
||
});
|
||
let releaseStream!:()=>void;
|
||
const streamGate=new Promise<void>(resolve=>{releaseStream=resolve});
|
||
await page.route("**/api/v1/videos/video-0/stream?*",async route=>{
|
||
await streamGate;
|
||
await route.fulfill({status:200,contentType:"video/mp4",body:Buffer.alloc(0)});
|
||
});
|
||
|
||
await page.goto("/app/imagefind/");
|
||
const coverRequest=page.waitForRequest(request=>request.url().includes("/frames/continue-frame/thumbnail"));
|
||
await page.locator(".mobile-profile-button").click();
|
||
await coverRequest;
|
||
const card=page.locator(".profile-continue-grid .continue-card");
|
||
await expect(card).toHaveCount(1);
|
||
const image=card.locator(".thumb-image");
|
||
await expect(image).toHaveAttribute("loading","eager");
|
||
await expect(image).toHaveAttribute("src",/\/app\/imagefind\/api\/v1\/frames\/continue-frame\/thumbnail\?media_token=gateway-media-token/);
|
||
const coverAlignment=await card.locator(".thumb-placeholder").evaluate(element=>{
|
||
const box=element.getBoundingClientRect();
|
||
const icon=element.querySelector("svg")!.getBoundingClientRect();
|
||
return {
|
||
horizontal:Math.abs(icon.left+icon.width/2-(box.left+box.width/2)),
|
||
vertical:Math.abs((icon.top+element.querySelector("small")!.getBoundingClientRect().bottom)/2-(box.top+box.height/2)),
|
||
};
|
||
});
|
||
expect(coverAlignment.horizontal).toBeLessThan(1);
|
||
expect(coverAlignment.vertical).toBeLessThan(3);
|
||
releaseThumbnail();
|
||
await expect(card.locator(".thumb-media")).toHaveClass(/loaded/);
|
||
await expect(card.locator(".thumb-placeholder")).toHaveCount(0);
|
||
await page.locator(".nav-item-1").click();
|
||
await page.locator(".mobile-profile-button").click();
|
||
await expect(card.locator(".thumb-media")).toHaveClass(/loaded/);
|
||
await expect(card.locator(".thumb-placeholder")).toHaveCount(0);
|
||
|
||
const streamRequest=page.waitForRequest(request=>request.url().includes("/videos/video-0/stream"));
|
||
await card.click();
|
||
await streamRequest;
|
||
const playerLoading=page.locator(".player-center-status");
|
||
await expect(playerLoading).toBeVisible();
|
||
const playerAlignment=await playerLoading.evaluate(element=>{
|
||
const stage=element.closest(".player-stage")!.getBoundingClientRect();
|
||
const content=element.getBoundingClientRect();
|
||
const icon=element.querySelector("svg")!.getBoundingClientRect();
|
||
return {
|
||
contentX:Math.abs(content.left+content.width/2-(stage.left+stage.width/2)),
|
||
contentY:Math.abs(content.top+content.height/2-(stage.top+stage.height/2)),
|
||
iconX:Math.abs(icon.left+icon.width/2-(stage.left+stage.width/2)),
|
||
};
|
||
});
|
||
expect(Math.max(...Object.values(playerAlignment))).toBeLessThan(1);
|
||
releaseStream();
|
||
});
|
||
|
||
test("player attempts compatible HLS only once after native playback fails",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
let previewRequests=0;
|
||
await page.route("**/api/v1/videos/video-0/preview",async route=>{
|
||
previewRequests+=1;
|
||
await route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({playlist_url:"/api/v1/previews/player123/index.m3u8"})});
|
||
});
|
||
await page.goto("/");
|
||
await page.locator(".video-card").first().click();
|
||
await expect.poll(()=>previewRequests).toBe(1);
|
||
await page.locator("video").dispatchEvent("error");
|
||
await page.locator("video").dispatchEvent("error");
|
||
await page.waitForTimeout(100);
|
||
expect(previewRequests).toBe(1);
|
||
await expect(page.locator(".custom-player")).toHaveAttribute("data-playback-source","compatible");
|
||
});
|
||
|
||
test("desktop upload center opens the task list while the top action opens the picker",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await page.locator(".sidebar nav > .upload-status").click();
|
||
await expect(page.getByRole("heading",{name:"传输中心"})).toBeVisible();
|
||
await expect(page.getByRole("heading",{name:"上传到私有媒体库"})).toHaveCount(0);
|
||
await page.locator(".top-upload .upload-status").click();
|
||
await expect(page.getByRole("heading",{name:"上传到私有媒体库"})).toBeVisible();
|
||
});
|
||
|
||
test("background jobs paginate with readable rows and stable page requests",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
const jobs=Array.from({length:23},(_,index)=>({id:`job-${index}`,kind:index%2?"index_video":"transcribe_audio",status:index===0?"failed":index%5?"completed":"running",progress:index===0?.35:index%5?1:.46,message:index%5?"任务已完成":"正在提取音轨并识别",error:index===0?"模型服务暂时不可用":undefined,attempts:index%3+1,created_at:`2026-07-28T10:${String(index).padStart(2,"0")}:00Z`}));
|
||
const requestedPages:number[]=[];
|
||
const requestedLanes:string[]=[];
|
||
const retried:string[]=[];
|
||
const bulkRetried:string[]=[];
|
||
const cancelled:string[]=[];
|
||
await page.route("**/api/v1/jobs?*",route=>{
|
||
const url=new URL(route.request().url());const current=Number(url.searchParams.get("page")||1);requestedPages.push(current);requestedLanes.push(url.searchParams.get("lane")||"all");
|
||
const pageSize=10;const items=jobs.slice((current-1)*pageSize,current*pageSize);
|
||
return route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({items,page:current,page_size:pageSize,total:jobs.length,pages:3,retryable_failed_count:url.searchParams.get("lane")==="transfer"?0:1})});
|
||
});
|
||
await page.route("**/api/v1/jobs/retry-failed*",route=>{bulkRetried.push(new URL(route.request().url()).searchParams.get("lane")||"all");return route.fulfill({status:202,contentType:"application/json",body:JSON.stringify({lane:"all",retried:1,skipped:0,job_ids:["job-bulk-retried"]})})});
|
||
await page.route("**/api/v1/jobs/job-0/retry",route=>{retried.push("job-0");return route.fulfill({status:202,contentType:"application/json",body:JSON.stringify({job_id:"job-retried",retried_from:"job-0"})})});
|
||
await page.route("**/api/v1/jobs/job-5/cancel",route=>{cancelled.push("job-5");return route.fulfill({status:202,contentType:"application/json",body:JSON.stringify({job_id:"job-5",cancel_requested:true})})});
|
||
await page.goto("/");
|
||
await openSettings(page,1024);
|
||
await page.getByRole("button",{name:"任务与偏好"}).click();
|
||
await expect(page.locator(".mini-job")).toHaveCount(10);
|
||
await expect(page.locator(".job-lane-filters>button")).toHaveCount(5);
|
||
await expect(page.locator(".job-lane-badge").first()).toHaveText("AI 识别");
|
||
await expect(page.getByText("第 1 / 3 页")).toBeVisible();
|
||
const firstRow=await page.locator(".mini-job").first().boundingBox();
|
||
expect(firstRow?.height).toBeGreaterThanOrEqual(75);
|
||
await page.getByRole("button",{name:"重试全部失败 (1)"}).click();
|
||
const bulkConfirm=page.getByRole("alertdialog");
|
||
await expect(bulkConfirm).toContainText("只会重新排队尚未被后续任务取代的失败记录");
|
||
await bulkConfirm.getByRole("button",{name:"继续"}).click();
|
||
await expect.poll(()=>bulkRetried).toEqual(["all"]);
|
||
await expect(page.locator(".status-line")).toContainText("已重新排队 1 个失败任务");
|
||
await page.getByRole("button",{name:"重试识别视频音频"}).click();
|
||
await expect.poll(()=>retried).toEqual(["job-0"]);
|
||
await expect(page.locator(".status-line")).toContainText("识别视频音频已重新排队");
|
||
await page.getByRole("button",{name:"取消解析视频资料"}).click();
|
||
await expect.poll(()=>cancelled).toEqual(["job-5"]);
|
||
await expect(page.locator(".status-line")).toContainText("解析视频资料正在安全停止");
|
||
await page.getByRole("navigation",{name:"后台任务分页"}).getByRole("button",{name:"下一页"}).click();
|
||
await expect(page.getByText("第 2 / 3 页")).toBeVisible();
|
||
await expect(page.locator(".mini-job")).toHaveCount(10);
|
||
expect(requestedPages).toContain(2);
|
||
await page.getByRole("navigation",{name:"后台任务通道"}).getByRole("button",{name:"上传转存"}).click();
|
||
await expect.poll(()=>requestedLanes.at(-1)).toBe("transfer");
|
||
await expect(page.getByRole("button",{name:/重试全部失败/})).toHaveCount(0);
|
||
await expect(page.getByText("第 1 / 3 页")).toBeVisible();
|
||
await page.setViewportSize({width:390,height:844});
|
||
const filterRows=await page.locator(".job-lane-filters>button").evaluateAll(buttons=>{
|
||
const tops=buttons.map(button=>Math.round(button.getBoundingClientRect().top));
|
||
return [...new Set(tops)].map(top=>tops.filter(value=>value===top).length);
|
||
});
|
||
expect(filterRows).toEqual([3,2]);
|
||
await expect(page.locator(".job-lane-filters")).not.toHaveCSS("overflow-x","auto");
|
||
});
|
||
|
||
test("profile collections support multi-select cleanup without deleting videos",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
const cleanups:Array<{video_ids:string[];action:string}>=[];
|
||
await page.route("**/api/v1/videos/state/bulk",async route=>{
|
||
cleanups.push(route.request().postDataJSON() as {video_ids:string[];action:string});
|
||
await route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({updated:1})});
|
||
});
|
||
await page.goto("/");
|
||
await page.locator(".mobile-profile-button").click();
|
||
const cases=[
|
||
{tab:"收藏",button:"取消收藏",action:"unfavorite"},
|
||
{tab:"喜欢",button:"取消喜欢",action:"unlike"},
|
||
{tab:"观看记录",button:"清除记录",action:"clear_history"},
|
||
];
|
||
for(const item of cases){
|
||
await page.locator(".segment-nav").getByRole("button",{name:item.tab,exact:true}).click();
|
||
await expect(page.locator(".profile-videos .video-card")).toHaveCount(8);
|
||
await page.locator(".profile-videos").getByRole("button",{name:"管理",exact:true}).click();
|
||
await page.locator(".profile-videos .video-card").first().click();
|
||
await expect(page.getByText("已选择 1 部")).toBeVisible();
|
||
await page.locator(".profile-selection-bar").getByRole("button",{name:item.button}).click();
|
||
await expect(page.getByRole("alertdialog")).toBeVisible();
|
||
await page.getByRole("alertdialog").getByRole("button",{name:"继续"}).click();
|
||
await expect.poll(()=>cleanups.length).toBe(cases.indexOf(item)+1);
|
||
expect(cleanups.at(-1)).toEqual({video_ids:["video-0"],action:item.action});
|
||
}
|
||
});
|
||
|
||
test("custom player exposes Quark-style controls, keyboard seeking and touch fast play",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await page.addInitScript(()=>{
|
||
const mediaSources=new WeakMap<HTMLMediaElement,string>();
|
||
Object.defineProperty(HTMLMediaElement.prototype,"src",{configurable:true,get(){return mediaSources.get(this)||""},set(value:string){mediaSources.set(this,value)}});
|
||
Object.defineProperty(HTMLMediaElement.prototype,"load",{configurable:true,value:function(){}});
|
||
Object.defineProperty(HTMLMediaElement.prototype,"play",{configurable:true,value:function(this:HTMLMediaElement){Object.defineProperty(this,"paused",{configurable:true,writable:true,value:false});this.dispatchEvent(new Event("play"));this.dispatchEvent(new Event("playing"));return Promise.resolve()}});
|
||
Object.defineProperty(HTMLMediaElement.prototype,"pause",{configurable:true,value:function(this:HTMLMediaElement){Object.defineProperty(this,"paused",{configurable:true,writable:true,value:true});this.dispatchEvent(new Event("pause"))}});
|
||
});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await page.locator(".video-card").first().click();
|
||
const video=page.locator("video");
|
||
await video.evaluate(element=>{Object.defineProperties(element,{duration:{configurable:true,value:5400},currentTime:{configurable:true,writable:true,value:100},paused:{configurable:true,writable:true,value:true},buffered:{configurable:true,value:{length:2,start:(index:number)=>index?600:0,end:(index:number)=>index?900:300}}});element.dispatchEvent(new Event("loadedmetadata"));element.dispatchEvent(new Event("progress"));element.dispatchEvent(new Event("timeupdate"));element.dispatchEvent(new Event("canplay"))});
|
||
await expect(page.locator(".player-progress-buffer>i")).toHaveCount(2);
|
||
await video.dispatchEvent("waiting");
|
||
await expect(page.getByRole("status").filter({hasText:/正在缓冲 \d+%/})).toBeVisible();
|
||
await video.dispatchEvent("canplay");
|
||
await expect(page.getByRole("slider",{name:"播放进度"})).toBeVisible();
|
||
await expect(page.getByRole("button",{name:"快退 10 秒"})).toBeVisible();
|
||
await expect(page.getByRole("button",{name:"快进 10 秒"})).toBeVisible();
|
||
await page.locator(".player-play").click();
|
||
await expect(page.locator(".player-play")).toHaveAttribute("aria-label","暂停");
|
||
const beforeKeyboardSeek=await video.evaluate(element=>element.currentTime);
|
||
await page.keyboard.press("ArrowRight");
|
||
await expect(page.getByRole("status").filter({hasText:"快进 5 秒"})).toBeVisible();
|
||
expect(await video.evaluate(element=>element.currentTime)).toBe(beforeKeyboardSeek+5);
|
||
await page.locator(".player-rate>button").click();
|
||
await page.getByRole("menuitem",{name:"1.5×"}).click();
|
||
expect(await video.evaluate(element=>element.playbackRate)).toBe(1.5);
|
||
const gestureSurface=page.locator(".player-gesture-surface");
|
||
await gestureSurface.dispatchEvent("pointerdown",{pointerType:"touch",pointerId:1,clientX:500,clientY:250,isPrimary:true});
|
||
await expect(page.getByRole("status").filter({hasText:"2× 快速播放"})).toBeVisible();
|
||
expect(await video.evaluate(element=>element.playbackRate)).toBe(2);
|
||
await gestureSurface.dispatchEvent("pointerup",{pointerType:"touch",pointerId:1,clientX:500,clientY:250,isPrimary:true});
|
||
expect(await video.evaluate(element=>element.playbackRate)).toBe(1.5);
|
||
await expect(page.getByRole("button",{name:"全屏"})).toBeVisible();
|
||
});
|
||
|
||
test("mobile player contains long curated titles and control intrinsic widths",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await mockApi(page);
|
||
const longTitle="这是一条经过人工整理但长度非常长的视频标题，用来验证播放器标题、顶部控制栏和底部操作控件不会把移动端页面撑出视口";
|
||
const longVideo={...videos[0],title:longTitle,display_name:"raw-video-file.mp4"};
|
||
await page.route("**/api/v1/home**",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({
|
||
video_count:videos.length,updated_at:"2026-07-27T10:00:00Z",recent:{id:"recent",title:"最近新增",total:videos.length,items:[longVideo,...videos.slice(1)]},collections:{total:collections.length,items:collections},categories:[],people:[],unorganized:null,
|
||
})}));
|
||
await page.goto("/");
|
||
await page.locator(".video-card").first().click();
|
||
await expect(page.locator(".player-title h1")).toHaveText(longTitle);
|
||
const geometry=await page.evaluate(()=>Object.fromEntries([".content",".player-page",".player-stage",".player-controls",".player-control-row",".player-title"].map(selector=>{const node=document.querySelector<HTMLElement>(selector)!;const box=node.getBoundingClientRect();return [selector,{left:box.left,right:box.right,width:box.width,scrollWidth:node.scrollWidth,clientWidth:node.clientWidth}]})));
|
||
for(const [selector,box] of Object.entries(geometry) as Array<[string,{left:number;right:number;width:number;scrollWidth:number;clientWidth:number}]>){
|
||
expect(box.left,`${selector} starts inside viewport`).toBeGreaterThanOrEqual(-1);
|
||
expect(box.right,`${selector} ends inside viewport`).toBeLessThanOrEqual(391);
|
||
expect(box.scrollWidth,`${selector} has no horizontal overflow`).toBeLessThanOrEqual(box.clientWidth+1);
|
||
}
|
||
expect(await page.evaluate(()=>document.documentElement.scrollWidth)).toBeLessThanOrEqual(391);
|
||
});
|
||
|
||
test("player can create a collection and add the current video",async({page})=>{
|
||
await page.setViewportSize({width:390,height:844});
|
||
await page.addInitScript(()=>{
|
||
Object.defineProperty(HTMLMediaElement.prototype,"load",{configurable:true,value:function(){}});
|
||
Object.defineProperty(HTMLMediaElement.prototype,"play",{configurable:true,value:function(this:HTMLMediaElement){Object.defineProperty(this,"paused",{configurable:true,writable:true,value:false});this.dispatchEvent(new Event("playing"));return Promise.resolve()}});
|
||
});
|
||
await mockApi(page);
|
||
let created:{name:string;video_ids:string[]}|null=null;
|
||
await page.route("**/api/v1/collections",async route=>{
|
||
if(route.request().method()!=="POST")return route.fallback();
|
||
created=route.request().postDataJSON() as typeof created;
|
||
await route.fulfill({status:201,contentType:"application/json",body:JSON.stringify({...collections[0],id:"new-collection",name:created!.name,video_count:1})});
|
||
});
|
||
await page.goto("/");
|
||
await page.locator(".video-card").first().click();
|
||
await page.locator("video").dispatchEvent("canplay");
|
||
await page.locator(".player-actions").getByRole("button",{name:/示例合集/}).click();
|
||
await expect(page.getByRole("dialog",{name:"加入合集"})).toBeVisible();
|
||
await page.getByRole("dialog",{name:"加入合集"}).getByLabel("新建合集").fill("稍后观看");
|
||
await page.getByRole("dialog",{name:"加入合集"}).getByRole("button",{name:"创建并加入"}).click();
|
||
await expect.poll(()=>created).toEqual({name:"稍后观看",video_ids:["video-0"]});
|
||
await expect(page.getByRole("dialog",{name:"加入合集"})).toHaveCount(0);
|
||
});
|
||
|
||
test("mobile touch taps reach player controls instead of the gesture surface",async({browser})=>{
|
||
const context=await browser.newContext({viewport:{width:390,height:844},isMobile:true,hasTouch:true,locale:"zh-CN"});
|
||
const page=await context.newPage();
|
||
await page.addInitScript(()=>{
|
||
// Keep this interaction test independent of Chromium's media decoder and
|
||
// the mocked API response. Assigning a real src would otherwise emit a
|
||
// late error event and replace the center controls while Playwright taps.
|
||
const mediaSources=new WeakMap<HTMLMediaElement,string>();
|
||
Object.defineProperty(HTMLMediaElement.prototype,"src",{configurable:true,get(){return mediaSources.get(this)||""},set(value:string){mediaSources.set(this,value)}});
|
||
Object.defineProperty(HTMLMediaElement.prototype,"load",{configurable:true,value:function(){}});
|
||
Object.defineProperty(HTMLMediaElement.prototype,"play",{configurable:true,value:function(this:HTMLMediaElement){Object.defineProperty(this,"paused",{configurable:true,writable:true,value:false});this.dispatchEvent(new Event("playing"));return Promise.resolve()}});
|
||
Object.defineProperty(HTMLMediaElement.prototype,"pause",{configurable:true,value:function(this:HTMLMediaElement){Object.defineProperty(this,"paused",{configurable:true,writable:true,value:true});this.dispatchEvent(new Event("pause"))}});
|
||
});
|
||
await mockApi(page);
|
||
await page.goto("/");
|
||
await page.locator(".video-card").first().tap();
|
||
await page.locator("video").evaluate(element=>{Object.defineProperties(element,{duration:{configurable:true,value:5400},currentTime:{configurable:true,writable:true,value:10},paused:{configurable:true,writable:true,value:true}});element.dispatchEvent(new Event("loadedmetadata"));element.dispatchEvent(new Event("canplay"))});
|
||
await page.locator(".player-play").tap();
|
||
await expect(page.locator(".player-play")).toHaveAttribute("aria-label","暂停");
|
||
await page.locator(".player-rate>button").tap();
|
||
await page.getByRole("menuitem",{name:"1.25×"}).tap();
|
||
expect(await page.locator("video").evaluate(element=>element.playbackRate)).toBe(1.25);
|
||
const surface=page.locator(".player-gesture-surface");
|
||
await surface.dispatchEvent("pointerdown",{pointerType:"touch",pointerId:11,clientX:195,clientY:100,isPrimary:true});
|
||
await surface.dispatchEvent("pointerup",{pointerType:"touch",pointerId:11,clientX:195,clientY:100,isPrimary:true});
|
||
await page.waitForTimeout(320);
|
||
await expect(page.locator(".custom-player")).toHaveClass(/controls-hidden/);
|
||
await surface.dispatchEvent("pointerdown",{pointerType:"touch",pointerId:12,clientX:195,clientY:100,isPrimary:true});
|
||
await surface.dispatchEvent("pointerup",{pointerType:"touch",pointerId:12,clientX:195,clientY:100,isPrimary:true});
|
||
await page.waitForTimeout(320);
|
||
await expect(page.locator(".custom-player")).toHaveClass(/controls-visible/);
|
||
await page.waitForTimeout(500);
|
||
await expect(page.locator(".custom-player")).toHaveClass(/controls-visible/);
|
||
await page.waitForTimeout(3700);
|
||
await expect(page.locator(".custom-player")).toHaveClass(/controls-hidden/);
|
||
const beforeDouble=await page.locator("video").evaluate(element=>element.currentTime);
|
||
for(const pointerId of [13,14]){
|
||
await surface.dispatchEvent("pointerdown",{pointerType:"touch",pointerId,clientX:320,clientY:100,isPrimary:true});
|
||
await surface.dispatchEvent("pointerup",{pointerType:"touch",pointerId,clientX:320,clientY:100,isPrimary:true});
|
||
}
|
||
await expect.poll(()=>page.locator("video").evaluate(element=>element.currentTime)).toBe(beforeDouble+10);
|
||
const beforeDrag=await page.locator("video").evaluate(element=>element.currentTime);
|
||
await surface.dispatchEvent("pointerdown",{pointerType:"touch",pointerId:15,clientX:80,clientY:100,isPrimary:true});
|
||
await surface.dispatchEvent("pointermove",{pointerType:"touch",pointerId:15,clientX:220,clientY:104,isPrimary:true});
|
||
await surface.dispatchEvent("pointerup",{pointerType:"touch",pointerId:15,clientX:220,clientY:104,isPrimary:true});
|
||
await expect.poll(()=>page.locator("video").evaluate(element=>element.currentTime)).toBeGreaterThan(beforeDrag);
|
||
const beforeVertical=await page.locator("video").evaluate(element=>element.currentTime);
|
||
await surface.dispatchEvent("pointerdown",{pointerType:"touch",pointerId:16,clientX:190,clientY:60,isPrimary:true});
|
||
await surface.dispatchEvent("pointermove",{pointerType:"touch",pointerId:16,clientX:194,clientY:150,isPrimary:true});
|
||
await surface.dispatchEvent("pointerup",{pointerType:"touch",pointerId:16,clientX:194,clientY:150,isPrimary:true});
|
||
expect(await page.locator("video").evaluate(element=>element.currentTime)).toBe(beforeVertical);
|
||
|
||
// fnOS and other embedded WebViews may synthesize a mouse pointer stream
|
||
// for a touch. The hover move reveals controls immediately; the subsequent
|
||
// click must not hide them again when the 280 ms tap timer fires.
|
||
await page.waitForTimeout(4100);
|
||
await expect(page.locator(".custom-player")).toHaveClass(/controls-hidden/);
|
||
const surfaceBox=await surface.boundingBox();
|
||
expect(surfaceBox).not.toBeNull();
|
||
const mouseX=surfaceBox!.x+surfaceBox!.width/2;
|
||
const mouseY=surfaceBox!.y+surfaceBox!.height/2;
|
||
await page.mouse.move(mouseX,mouseY);
|
||
await page.mouse.click(mouseX,mouseY);
|
||
await page.waitForTimeout(400);
|
||
await expect(page.locator(".custom-player")).toHaveClass(/controls-visible/);
|
||
await page.getByRole("button",{name:"视频时间点"}).click();
|
||
await expect(page.locator(".player-marker-drawer")).toBeVisible();
|
||
await context.close();
|
||
});
|
||
|
||
test("model health is shown on its component and shared runtime is summarized once",async({page})=>{
|
||
await page.setViewportSize({width:1024,height:800});
|
||
await mockApi(page);
|
||
await page.route("**/api/v1/models?*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({
|
||
visual_ready:true,ocr_ready:true,faces_ready:false,audio_ready:true,pending_videos:0,hf_endpoint:"https://huggingface.co",
|
||
pip:{index_url:"https://pypi.tuna.tsinghua.edu.cn/simple",pytorch_index_url:""},proxy:{enabled:false,url:"",username:"",has_password:false},
|
||
component_versions:{visual:"1",ocr:"1",audio:"1"},component_sizes:{visual:100,ocr:100,faces:0,audio:100},runtime_dependencies:{visual:{state:"ready"},ocr:{state:"ready"},faces:{state:"ready"},audio:{state:"ready"}},
|
||
runtime_environment:{state:"ready",size_bytes:1739461755,components:["visual","ocr","faces","audio"]},component_health:{faces:{state:"damaged",error:"人物模型文件损坏，请重新下载"}},
|
||
accelerator:{selected:"AUTO",components:{},devices:[],cpu_threads:2},sources:{faces:{},visual_image:"",visual_text:"",ocr:"",audio:""},
|
||
})}));
|
||
await page.goto("/");
|
||
await openSettings(page,1024);
|
||
const faces=page.locator(".model-component").filter({hasText:"人物识别"});
|
||
await expect(faces).toContainText("人物模型文件损坏，请重新下载");
|
||
await expect(page.locator(".shared-runtime")).toHaveCount(1);
|
||
await expect(page.locator(".shared-runtime")).toContainText("1.62 GB · 4 个组件已就绪");
|
||
const componentText=await page.locator(".model-component").allTextContents();
|
||
expect(componentText.some(text=>text.includes("1.62 GB"))).toBe(false);
|
||
});
|
||
|
||
test("writes a complete light and dark UI audit for desktop and mobile",async({page})=>{
|
||
// This emits more than forty full-page screenshots. Keep enough headroom for
|
||
// Chromium on the 4 GB release runner when it is reclaiming visual contexts.
|
||
test.setTimeout(600_000);
|
||
await mockApi(page);
|
||
const auditJobs=[
|
||
{id:"audit-job-1",kind:"index_video",status:"running",progress:.46,message:"正在解析视频资料",attempts:1,created_at:"2026-07-28T10:00:00Z"},
|
||
{id:"audit-job-2",kind:"transcribe_audio",status:"completed",progress:1,message:"音频识别完成",attempts:1,created_at:"2026-07-28T09:00:00Z"},
|
||
{id:"audit-job-3",kind:"scan_source",status:"failed",progress:.2,error:"媒体来源暂时不可用",attempts:3,created_at:"2026-07-28T08:00:00Z"},
|
||
];
|
||
await page.route("**/api/v1/jobs?*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({items:auditJobs,page:1,page_size:10,total:23,pages:3})}));
|
||
const output="../dist/ui-audit-0.5.45";
|
||
await mkdir(output,{recursive:true});
|
||
const destinations:AuditPage[]=["home","search","library","series","uploads","tags","actors","profile","settings","player"];
|
||
for(const viewport of [{name:"desktop",width:1440,height:900},{name:"mobile",width:390,height:844}] as const){
|
||
await page.setViewportSize({width:viewport.width,height:viewport.height});
|
||
for(const theme of ["light","dark"] as const){
|
||
await page.emulateMedia({colorScheme:theme});
|
||
for(const destination of destinations){
|
||
await openAuditPage(page,destination,viewport.width);
|
||
await page.evaluate(()=>document.fonts.ready);
|
||
await expect.poll(()=>page.evaluate(()=>document.documentElement.scrollWidth-innerWidth)).toBeLessThanOrEqual(1);
|
||
await page.screenshot({path:`${output}/${theme}-${viewport.name}-${destination}.png`,animations:"disabled"});
|
||
}
|
||
await openAuditPage(page,"profile",viewport.width);
|
||
await page.locator(".profile-page>.segment-nav").getByRole("button",{name:"个人资料"}).click();
|
||
await expect(page.getByRole("heading",{name:"播放与隐私"})).toBeVisible();
|
||
await page.screenshot({path:`${output}/${theme}-${viewport.name}-profile-account.png`,animations:"disabled"});
|
||
await openAuditPage(page,"profile",viewport.width);
|
||
await page.locator(".profile-page>.segment-nav").getByRole("button",{name:"收藏",exact:true}).click();
|
||
await page.locator(".profile-videos").getByRole("button",{name:"管理"}).click();
|
||
await page.locator(".profile-videos .video-card").first().click();
|
||
await page.screenshot({path:`${output}/${theme}-${viewport.name}-profile-manage.png`,animations:"disabled"});
|
||
await openAuditPage(page,"settings",viewport.width);
|
||
await page.locator(".settings-segments").getByRole("button",{name:"任务与偏好"}).click();
|
||
await expect(page.locator(".mini-job")).toHaveCount(3);
|
||
await page.screenshot({path:`${output}/${theme}-${viewport.name}-settings-tasks.png`,animations:"disabled"});
|
||
if(viewport.width<=720){
|
||
await openAuditPage(page,"home",viewport.width);
|
||
await page.getByRole("button",{name:"更多"}).click();
|
||
await expect(page.locator(".mobile-more-menu")).toBeVisible();
|
||
await page.screenshot({path:`${output}/${theme}-${viewport.name}-more.png`,animations:"disabled"});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
test("failed upload status is accessible, capped at 99+ and respects reduced motion", async ({ page }) => {
|
||
await page.setViewportSize({ width: 320, height: 780 });
|
||
await page.emulateMedia({ reducedMotion: "reduce" });
|
||
await mockApi(page);
|
||
const failed = Array.from({ length: 105 }, (_, index) => ({ id: `failed-${index}`, filename: `failed-${index}.mp4`, source_id: source.id, status: "failed", progress: .2, bytes_received: 20, size_bytes: 100, error: "网络中断", relative_path: "", chunk_size: 10, total_chunks: 10, received_chunks: [0, 1] }));
|
||
await page.route("**/api/v1/uploads?*", route => route.fulfill({ status: 200, contentType: "application/json", body: JSON.stringify(failed) }));
|
||
await page.goto("/");
|
||
const status = page.locator(".sidebar nav > .upload-status");
|
||
await expect(status).toHaveClass(/failed/);
|
||
await expect(status.locator("b")).toHaveText("99+");
|
||
await expect(status).toHaveAttribute("aria-label", /105 个任务/);
|
||
const animation = await status.locator("svg").evaluate(element => getComputedStyle(element).animationName);
|
||
expect(animation).toBe("none");
|
||
await page.getByRole("button",{name:"更多"}).click();
|
||
expect(await page.locator(".mobile-more-menu").evaluate(element=>getComputedStyle(element).animationName)).toBe("none");
|
||
await page.locator(".sheet-close").click();
|
||
await expect(page.locator(".mobile-more-menu")).toBeHidden();
|
||
await status.click();
|
||
await expect(page.getByRole("heading", { name: "传输中心" })).toBeVisible();
|
||
});
|
||
|
||
test("critical pages stay horizontally contained across supported viewports",async({page})=>{
|
||
await mockApi(page);
|
||
const noisy="dc5d56e813283316e7b37705e400bf4a_logo.mp4.8951e586f4d7aebf41f43fac535449c8.mp4";
|
||
await page.route("**/api/v1/uploads?*",route=>route.fulfill({status:200,contentType:"application/json",body:JSON.stringify({items:[{id:"viewport-upload",filename:noisy,source_id:source.id,status:"transferring",progress:.45,bytes_received:45,size_bytes:100,message:"传输到目标库 45%",relative_path:"",chunk_size:10,total_chunks:10,received_chunks:[0,1,2,3]}],status_items:[],active_count:1,failed_count:0,page:1,page_size:10,total:1,pages:1})}));
|
||
for(const width of [320,390,412,768,1024,1440]){
|
||
await page.setViewportSize({width,height:Math.min(900,Math.max(780,width))});
|
||
for(const destination of ["home","uploads","player"] as const){
|
||
await openAuditPage(page,destination,width);
|
||
const geometry=await page.evaluate(()=>({document:document.documentElement.scrollWidth,viewport:innerWidth,content:document.querySelector<HTMLElement>(".content")?.scrollWidth||0,contentClient:document.querySelector<HTMLElement>(".content")?.clientWidth||0}));
|
||
expect(geometry.document,`${destination} document at ${width}px`).toBeLessThanOrEqual(geometry.viewport+1);
|
||
if(width<=720)expect(geometry.content,`${destination} content at ${width}px`).toBeLessThanOrEqual(geometry.contentClient+1);
|
||
}
|
||
}
|
||
});
|