frontend/e2e/player-subtitles.test.ts
Rama master · réplica de lectura del repositorio original.
/* 字幕文件、中文结果选择与 YouTube 层级选项，使用合成字幕和演示视频。 */
import assert from 'node:assert/strict';
import { before, after, describe, it } from 'node:test';
import { join } from 'node:path';
import type { Browser, Page } from 'playwright-core';
import { launch, requiredEnv, visit as visitPage, VIEWPORTS } from './harness.ts';
import { mockSubtitleMemory } from './subtitle-fixture.ts';
const SRT = '1\n00:00:00,000 --> 00:00:02,000\n测试字幕 <b>粗体</b>\n';
// 每个浏览器用例独立持有服务端字幕夹具，页面刷新沿用同一份记忆。
async function visit(...[browser, path, viewport, prepare]: Parameters<typeof visitPage>) {
return visitPage(browser, path, viewport, async page => {
await mockSubtitleMemory(page);
await prepare?.(page);
});
}
async function caption(page: Page, text: string) {
await page.locator('.vjs-peach-caption-line').filter({ hasText: text }).waitFor({ timeout: 5_000 }).catch(async error => {
const state = await page.locator('#stage video.vjs-tech').evaluate((video: HTMLVideoElement) => ({
time: video.currentTime, ready: video.readyState,
tracks: [...video.textTracks].map(track => ({ mode: track.mode, cues: track.cues?.length, active: track.activeCues?.length })),
overlay: video.closest('.video-js')?.querySelector('.vjs-peach-captions')?.outerHTML,
}));
throw new Error(`${String(error)} ${JSON.stringify(state)}`);
});
}
async function menu(page: Page) {
await page.locator('#stage [data-player-quality]>button').click();
await page.locator('#stage [data-player-subtitles]').click();
}
async function nativeCaptionDisplay(page: Page) {
const cdp = await page.context().newCDPSession(page);
try {
await cdp.send('DOM.enable'); await cdp.send('CSS.enable');
const { root } = await cdp.send('DOM.getDocument', { depth: -1, pierce: true });
const { nodeId } = await cdp.send('DOM.querySelector', { nodeId: root.nodeId, selector: '#stage video.vjs-tech' });
type Node = { nodeId: number; attributes?: string[]; children?: Node[]; shadowRoots?: Node[] };
const find = (node: Node, match: (node: Node) => boolean): Node | undefined => {
if (match(node)) return node;
for (const child of [...(node.children || []), ...(node.shadowRoots || [])]) {
const found = find(child, match); if (found) return found;
}
};
const video = find(root, node => node.nodeId === nodeId)!;
const container = find(video, node => !!node.attributes?.includes('-webkit-media-text-track-container'))!;
const { computedStyle } = await cdp.send('CSS.getComputedStyleForNode', { nodeId: container.nodeId });
return computedStyle.find(style => style.name === 'display')?.value;
} finally { await cdp.detach() }
}
describe('播放器字幕', () => {
let browser: Browser;
before(async () => { browser = await launch() });
after(async () => { await browser?.close() });
for (const viewport of VIEWPORTS) {
it(`${viewport.name}：面板切换中显示搜索动画，空结果提示保持可见`, { timeout: 60_000 }, async () => {
let release!: () => void;
const response = new Promise<void>(resolve => { release = resolve });
let searches = 0;
const opened = await visit(browser, `/assets/${requiredEnv('PEACH_E2E_ITEM')}`, viewport, async page => {
await page.emulateMedia({ reducedMotion: 'no-preference' });
await page.route('**/api/subtitles/search?**', async route => {
searches++;
await response;
await route.fulfill({ json: { results: [], more: false } });
});
});
const { page, problems } = opened;
try {
await page.locator('#stage .vjs-peach-bezel').waitFor({ state: 'attached' });
await menu(page);
await page.locator('[data-subtitle-search]').click();
const panel = page.locator('.vjs-peach-panel:not(.vjs-peach-panel-leaving)');
const status = panel.locator('[data-subtitle-status]');
await status.waitFor({ state: 'visible', timeout: 5_000 });
assert.match(await status.textContent() || '', /正在搜索字幕/);
assert.equal(await panel.getAttribute('aria-busy'), 'true');
const spinner = status.locator('.ui-geist-spinner');
assert.equal(await spinner.count(), 1);
assert.equal(await spinner.locator('i').first().evaluate(node =>
node.getAnimations().some(animation => animation.playState === 'running')), true);
await page.waitForFunction(() => !document.querySelector('.vjs-peach-popup-animating'));
await page.screenshot({ path: join(process.cwd(), `../build/subtitles-search-loading-${viewport.name}.png`) });
release();
await status.filter({ hasText: '没有找到当前作品的中文字幕' }).waitFor();
assert.equal(await spinner.count(), 0);
assert.equal(await panel.getAttribute('aria-busy'), null);
await page.screenshot({ path: join(process.cwd(), `../build/subtitles-search-empty-${viewport.name}.png`) });
// 字幕面切到搜索面的动画收尾前，退场的那一面（inert，也有返回键）还在菜单里，只点当前这一面里的键。
await panel.locator('[data-subtitle-back]').click();
await panel.locator('[data-subtitle-search]').click();
await status.filter({ hasText: '没有找到当前作品的中文字幕' }).waitFor();
assert.equal(searches, 1);
assert.deepEqual(problems, []);
} finally { release(); await opened.close() }
});
it(`${viewport.name}：本地字幕、选项持久化、关闭和重新开启`, { timeout: 60_000 }, async () => {
const opened = await visit(browser, `/assets/${requiredEnv('PEACH_E2E_ITEM')}`, viewport);
const { page, problems } = opened;
try {
await page.locator('#stage .vjs-peach-bezel').waitFor({ state: 'attached' });
assert.equal(await page.locator('#stage .vjs-subtitles-control>button>svg path').count(), 1);
await page.waitForFunction(() => document.querySelector<HTMLVideoElement>('#stage video.vjs-tech')!.readyState >= 2);
await page.locator('#stage video.vjs-tech').evaluate((video: HTMLVideoElement) => { video.currentTime = .25 });
await menu(page);
const selected = page.locator('[data-subtitle-track][aria-checked="true"]');
const appearance = await selected.evaluate(button => {
const svg = button.querySelector('svg')!, label = button.querySelector('.vjs-peach-option-label')!;
return { fill: getComputedStyle(svg).fill, stroke: getComputedStyle(svg).stroke,
inset: label.getBoundingClientRect().left - button.getBoundingClientRect().left };
});
assert.equal(appearance.fill, 'none');
assert.equal(appearance.stroke, 'rgb(255, 255, 255)');
assert.ok(appearance.inset >= 48, JSON.stringify(appearance));
assert.equal(await page.locator('[data-subtitle-options] use').getAttribute('href'), '#i-settings');
assert.equal(await page.locator('[data-subtitle-options]').getAttribute('aria-label'), '字幕选项');
const cancelled = page.waitForEvent('filechooser');
await page.locator('[data-subtitle-file]').click();
await (await cancelled).setFiles([]);
await page.locator('input[type="file"][aria-label="加载字幕文件"]').dispatchEvent('cancel', { bubbles: true });
assert.equal(await page.locator('#stage').evaluate((dialog: HTMLDialogElement) => dialog.open), true);
await page.locator('[data-subtitle-file]').focus();
await page.keyboard.press('Escape');
await page.locator('.vjs-peach-settings-menu[aria-hidden="true"]').waitFor({ state: 'attached' });
assert.equal(await page.locator('#stage').evaluate((dialog: HTMLDialogElement) => dialog.open), true);
await menu(page);
const chooser = page.waitForEvent('filechooser');
await page.locator('[data-subtitle-file]').click();
const subtitleName = '[PREVIEW-096] A long subtitle filename with several wrapped lines decensored-zh-CN.chs.srt';
await (await chooser).setFiles({ name: subtitleName, mimeType: 'text/plain', buffer: Buffer.from(SRT) });
await page.waitForFunction(name => [...document.querySelector<HTMLVideoElement>('#stage video.vjs-tech')!.textTracks].some(track => track.label === name && track.mode === 'showing'), subtitleName);
await caption(page, '测试字幕');
const background = await page.locator('#stage video.vjs-tech').evaluate(() => ({
window: getComputedStyle(document.querySelector('.vjs-peach-caption-window')!).backgroundColor,
line: getComputedStyle(document.querySelector('.vjs-peach-caption-line')!).backgroundColor,
}));
assert.equal(await nativeCaptionDisplay(page), 'none');
assert.equal(background.window, 'rgba(0, 0, 0, 0)');
assert.equal(background.line, 'rgba(0, 0, 0, 0.75)');
const selectedSpacing = await page.locator('[data-subtitle-track][aria-checked="true"]').evaluate(button => {
const row = button.getBoundingClientRect(), label = button.querySelector('.vjs-peach-option-label')!.getBoundingClientRect();
return { top: label.top - row.top, bottom: row.bottom - label.bottom, textHeight: label.height };
});
assert.ok(selectedSpacing.textHeight > 30);
assert.ok(selectedSpacing.top >= 10 && selectedSpacing.bottom >= 10);
assert.ok(Math.abs(selectedSpacing.top - selectedSpacing.bottom) <= 1);
assert.equal(await page.locator('#stage .vjs-subtitles-control>button').evaluate(node => getComputedStyle(node, '::after').backgroundColor), await page.locator('#stage .vjs-play-progress').evaluate(node => getComputedStyle(node).backgroundColor));
assert.equal(await page.locator('.vjs-peach-caption-line b').textContent(), '粗体');
await page.screenshot({ path: join(process.cwd(), `../build/subtitles-tracks-${viewport.name}.png`) });
await page.locator('[data-subtitle-options]').click();
await page.locator('[data-subtitle-style="size"]').click();
await page.locator('[data-subtitle-value="150"]').click();
assert.equal(await page.locator('#stage .video-js').evaluate(node => getComputedStyle(node).getPropertyValue('--peach-caption-scale').trim()), '1.5');
await page.locator('[data-subtitle-style="color"]').click();
await page.locator('[data-subtitle-value="yellow"]').click();
assert.equal(await page.locator('.vjs-peach-captions').evaluate(node => getComputedStyle(node).color), 'rgb(255, 255, 0)');
const bounds = await page.locator('#stage .video-js').evaluate(root => {
const frame = root.getBoundingClientRect(), menu = root.querySelector('.vjs-peach-settings-menu')!.getBoundingClientRect();
return { menuTop: menu.top, frameTop: frame.top, menuRight: menu.right, frameRight: frame.right };
});
assert.ok(bounds.menuTop >= bounds.frameTop && bounds.menuRight <= bounds.frameRight + 1, JSON.stringify(bounds));
await page.screenshot({ path: join(process.cwd(), `../build/subtitles-${viewport.name}.png`) });
await page.locator('[data-subtitle-back]').click();
await page.getByRole('menuitemradio', { name: '关闭', exact: true }).click();
await page.locator('.vjs-peach-captions').waitFor({ state: 'hidden' });
await page.locator('#stage [data-player-quality]>button').click();
if (viewport.mobile) await page.locator('#stage [data-player-expand]').click();
await page.locator('#stage .vjs-subtitles-control>button').click();
await page.locator('.vjs-peach-captions').waitFor({ state: 'visible' });
await page.reload();
await page.locator('#stage .vjs-peach-bezel').waitFor({ state: 'attached' });
await page.waitForFunction(name => [...document.querySelector<HTMLVideoElement>('#stage video.vjs-tech')!.textTracks]
.some(track => track.label === name && track.mode === 'showing'), subtitleName);
assert.equal(await page.locator('#stage .video-js').evaluate(node => getComputedStyle(node).getPropertyValue('--peach-caption-scale').trim()), '1.5');
await menu(page);
await page.getByRole('menuitemradio', { name: '关闭', exact: true }).click();
await page.reload();
await page.locator('#stage .vjs-peach-bezel').waitFor({ state: 'attached' });
await page.waitForFunction(name => [...document.querySelector<HTMLVideoElement>('#stage video.vjs-tech')!.textTracks].some(track => track.label === name), subtitleName);
assert.equal(await page.locator('#stage video.vjs-tech').evaluate((video: HTMLVideoElement) => [...video.textTracks].some(track => track.mode === 'showing')), false);
await menu(page);
await page.locator('[data-subtitle-options]').click();
await page.locator('[data-subtitle-reset]').click();
assert.equal(await page.locator('#stage .video-js').evaluate(node => getComputedStyle(node).getPropertyValue('--peach-caption-scale').trim()), '1');
assert.deepEqual(problems, []);
} finally { await opened.close() }
});
}
it('同目录字幕进入选项，选择和关闭按视频恢复', { timeout: 60_000 }, async () => {
const key = 'sidecar:local:stable-file';
const opened = await visit(browser, `/assets/${requiredEnv('PEACH_E2E_ITEM')}`, VIEWPORTS[0]!, async page => {
await page.route(/\/api\/assets\/\d+\/subtitles$/, route => route.fulfill({ json: {
subtitles: [{ id: key, name: 'STARS-265.srt', label: 'SRT', language: '', playable: true, src: '/local-sidecar.vtt' }],
} }));
await page.route('**/local-sidecar.vtt', route => route.fulfill({ contentType: 'text/vtt',
body: 'WEBVTT\n\n00:00:00.000 --> 00:01:00.000\n同目录字幕\n' }));
});
const { page, problems } = opened;
try {
await page.locator('#stage .vjs-peach-bezel').waitFor({ state: 'attached' });
await page.waitForFunction(id => [...(document.querySelector<HTMLVideoElement>('#stage video.vjs-tech')?.textTracks || [])].some(track => track.id === id), key);
await page.waitForFunction(() => document.querySelector<HTMLVideoElement>('#stage video.vjs-tech')!.readyState >= 2);
await page.locator('#stage video.vjs-tech').evaluate((video: HTMLVideoElement) => { video.currentTime = .25 });
await menu(page);
await page.getByRole('menuitemradio', { name: 'SRT', exact: true }).click();
await caption(page, '同目录字幕');
await page.reload();
await page.waitForFunction(id => [...(document.querySelector<HTMLVideoElement>('#stage video.vjs-tech')?.textTracks || [])].some(track => track.id === id && track.mode === 'showing'), key);
await menu(page);
await page.getByRole('menuitemradio', { name: '关闭', exact: true }).click();
await page.reload();
await page.waitForFunction(id => [...(document.querySelector<HTMLVideoElement>('#stage video.vjs-tech')?.textTracks || [])].some(track => track.id === id), key);
assert.equal(await page.locator('#stage video.vjs-tech').evaluate((video: HTMLVideoElement) => [...video.textTracks].some(track => track.mode === 'showing')), false);
assert.deepEqual(problems, []);
} finally { await opened.close() }
});
for (const viewport of VIEWPORTS) {
it(`${viewport.name}：自动搜索、返回结果与重复加载复用会话`, { timeout: 60_000 }, async () => {
let downloads = 0, searches = 0;
const opened = await visit(browser, `/assets/${requiredEnv('PEACH_E2E_ITEM')}`, viewport, async page => {
await page.route('**/api/item?**', async route => {
const response = await route.fetch(), item = await response.json();
return route.fulfill({ response, json: { ...item, code: 'ABP-758' } });
});
await page.route('**/api/subtitles/search?**', route => {
searches++;
assert.equal(new URL(route.request().url()).searchParams.get('q'), 'ABP-758');
assert.equal(new URL(route.request().url()).searchParams.get('language'), 'zh', '中文界面应搜中文字幕');
return route.fulfill({ json: { results: [{ id: 'test42', title: 'ABP-758 中文字幕', languages: ['zh-Hans'], format: 'SRT' }], more: false } });
});
await page.route('**/api/subtitles/subtitlecat/test42?language=zh', route => route.fulfill({ json: { files: [{ index: 0, name: 'ABP-758.chs.srt', language: 'zh-Hans', playable: true }] } }));
await page.route('**/api/subtitles/subtitlecat/test42/0?language=zh', route => { downloads++; return route.fulfill({ contentType: 'text/vtt', body: 'WEBVTT\n\n00:00:00.000 --> 00:00:02.000\n在线字幕\n' }) });
});
const { page, problems } = opened;
try {
await page.locator('#stage .vjs-peach-bezel').waitFor({ state: 'attached' });
await page.waitForFunction(() => document.querySelector<HTMLVideoElement>('#stage video.vjs-tech')!.readyState >= 2);
await page.locator('#stage video.vjs-tech').evaluate((video: HTMLVideoElement) => { video.currentTime = .25 });
await menu(page);
for (let index = 0; index < 2; index++) {
await page.locator('[data-subtitle-search]').click();
assert.equal(await page.locator('.vjs-peach-settings-menu').getByRole('searchbox').count(), 0);
await page.locator('[data-subtitle-result]').waitFor();
const inset = await page.locator('[data-subtitle-result]').evaluate(button =>
button.querySelector('span')!.getBoundingClientRect().left - button.getBoundingClientRect().left);
assert.ok(inset >= 16, `字幕结果左侧内距 ${inset}px`);
await page.screenshot({ path: join(process.cwd(), `../build/subtitles-search-${viewport.name}.png`) });
await page.locator('[data-subtitle-result]').click();
if (index === 0) {
await page.locator('[data-subtitle-online]').waitFor();
await page.locator('[data-subtitle-back]').click();
await page.locator('[data-subtitle-result]').click();
}
await page.locator('[data-subtitle-online]').click();
// 加载完留在文件页：这一行标「已加载」，状态行报结果，不自己跳回字幕列表。
const files = page.locator('.vjs-peach-panel:not(.vjs-peach-panel-leaving)');
await files.locator('[data-subtitle-online][data-subtitle-loaded]').waitFor();
await files.locator('[data-subtitle-status]', { hasText: '已加载 ABP-758.chs.srt' }).waitFor();
await files.locator('[data-subtitle-back]').click();
await page.locator('.vjs-peach-panel:not(.vjs-peach-panel-leaving) [data-subtitle-back]').click();
await page.getByRole('menuitemradio', { name: 'ABP-758.chs.srt', exact: true }).waitFor();
}
await caption(page, '在线字幕');
assert.equal(downloads, 1);
assert.equal(searches, 1);
assert.equal(await page.locator('#stage video.vjs-tech > track').count(), 1);
const chooser = page.waitForEvent('filechooser');
await page.locator('[data-subtitle-file]').click();
await (await chooser).setFiles({ name: '本地字幕.srt', mimeType: 'text/plain', buffer: Buffer.from(SRT) });
await page.getByRole('menuitemradio', { name: '本地字幕.srt', exact: true }).waitFor();
await page.getByRole('menuitemradio', { name: 'ABP-758.chs.srt', exact: true }).click();
await page.reload();
await page.locator('#stage .vjs-peach-bezel').waitFor({ state: 'attached' });
await page.waitForFunction(() => [...document.querySelector<HTMLVideoElement>('#stage video.vjs-tech')!.textTracks]
.some(track => track.label === 'ABP-758.chs.srt' && track.mode === 'showing'));
assert.equal(downloads, 1);
assert.equal(searches, 1);
await menu(page);
assert.equal(await page.getByRole('menuitemradio', { name: '本地字幕.srt', exact: true }).count(), 1);
assert.equal(await page.locator('[data-subtitle-track][aria-checked="true"]').textContent(), 'ABP-758.chs.srt');
assert.deepEqual(problems, []);
} finally { await opened.close() }
});
}
it('自动搜索失败可重试，空的中文批次可继续查看更多', { timeout: 60_000 }, async () => {
const offsets: string[] = [];
const opened = await visit(browser, `/assets/${requiredEnv('PEACH_E2E_ITEM')}`, VIEWPORTS[0]!, async page => {
await page.route('**/api/subtitles/search?**', route => {
offsets.push(new URL(route.request().url()).searchParams.get('offset')!);
if (offsets.length === 1) return route.fulfill({ contentType: 'application/json', body: '{' });
return route.fulfill({ json: { results: offsets.length === 2 ? [] : [{ id: 'next', title: '中文字幕', languages: ['zh-Hans'], format: 'SRT' }], more: offsets.length === 2 } });
});
});
try {
const { page, problems } = opened;
await page.locator('#stage .vjs-peach-bezel').waitFor({ state: 'attached' });
await menu(page);
await page.locator('[data-subtitle-search]').click();
await page.locator('[data-subtitle-retry]').click();
await page.locator('[data-subtitle-more]').click();
await page.locator('[data-subtitle-result]').waitFor();
assert.deepEqual(offsets, ['0', '0', '6']);
assert.equal(await page.locator('.vjs-peach-settings-menu [aria-busy="true"]').count(), 0);
assert.deepEqual(problems, []);
} finally { await opened.close() }
});
});