frontend/e2e/design-manage.test.ts
Rama master · réplica de lectura del repositorio original.
/* 设计决定：数据管理、索引页与资料页头。读 `getComputedStyle` 断言用户定过的外观；共用的桩与浏览器生命周期在 `design-fixture.ts`。 */
import assert from 'node:assert/strict';
import { describe, it } from 'node:test';
import type { Browser, Page } from 'playwright-core';
import { layout, settle, visit } from './harness.ts';
import {
DESKTOP, MOBILE, tokenColor, openDuplicates, openIndexPage, openPlaylistsPage, openFollowManage, holdApi,
openPerformer, PROFILED, openProfiledPerformer, popmenuShadow, heroGeometry, disabledTokens,
waitingActionFaces, assertDisabledFace, followTab, followSource, installDesignBrowser,
} from './design-fixture.ts';
describe('设计决定：数据管理、索引页与资料页头', () => {
let browser: Browser;
installDesignBrowser((next) => { browser = next; });
it('关注列表操作区按整组换行，并在窄屏内继续排布控件', { timeout: 60_000 }, async () => {
const opened = await openFollowManage(browser, DESKTOP, {
counts: { new: 17_097 }, extra: [
followSource(4, 'kou', 'Fanbox', 'kou · Fanbox'),
followSource(5, 'kou', 'Patreon', 'kou · Patreon'),
followSource(6, 'kou', 'Rule34Video', 'kou · Rule34Video'),
],
});
try {
const { page } = opened;
for (const width of [1698, 1000, 820, 760, 650, 390]) {
await page.setViewportSize({ width, height: 900 });
await settle(page);
const geometry = await page.locator('[data-follow-toolbar]').evaluate((root) => {
const box = (element: Element) => {
const r = element.getBoundingClientRect();
return { left: r.left, right: r.right, top: r.top, bottom: r.bottom };
};
const actions = root.querySelector('[data-follow-toolbar-actions]')!;
return {
toolbar: box(root), heading: box(root.querySelector('[data-follow-toolbar-heading]')!),
actions: box(actions), buttons: [...actions.querySelectorAll('button')].map(box),
};
});
const { toolbar, heading, actions, buttons } = geometry;
assert.ok(actions.left >= toolbar.left - 1 && actions.right <= toolbar.right + 1,
`${width}px 操作区越出工具栏`);
for (const button of buttons) {
assert.ok(button.left >= actions.left - 1 && button.right <= actions.right + 1,
`${width}px 控件越出操作区`);
}
const below = actions.top >= heading.bottom - 1;
if (below) {
assert.ok(Math.abs(actions.left - toolbar.left) < 1, `${width}px 换行操作区未左对齐`);
} else {
assert.ok(actions.left >= heading.right, `${width}px 操作区与标题重叠`);
assert.ok(Math.max(...buttons.map((b) => b.top)) - Math.min(...buttons.map((b) => b.top)) < 2,
`${width}px 与标题同行时只有部分控件换行`);
}
if (width === 1698) assert.equal(below, false);
if (width <= 650) assert.equal(below, true);
const authorButtons = await page.locator('[data-follow-author-controls]').evaluateAll(groups => groups.map(group =>
[...group.querySelectorAll(':scope > span:last-child > button')].map(button => button.getBoundingClientRect().top)));
assert.ok(authorButtons.every(tops => tops.length === 2 && Math.abs(tops[0]! - tops[1]!) < 1),
`${width}px 创作者卡的全选与收起按钮被拆行`);
}
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
const cleanupCards = [
{ path: '/data-cleanup', label: '扫描与采集', skeleton: 'cleanup', names: ['同步新增文件', '更多同步方式'] },
{ path: '/data-cleanup/media-repair', label: '媒体修复', skeleton: 'cleanup/media-repair', names: ['开始修复'] },
];
for (const viewport of [DESKTOP, MOBILE]) for (const item of cleanupCards) {
it(`${item.label}骨架与内容卡共用外框、内边距和操作区布局（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await visit(browser, item.path, viewport);
try {
const page = opened.page;
await page.route('**/api/library-processing', route => route.fulfill({ json: { status: 'idle' } }));
const release = await holdApi(page);
await page.reload({ waitUntil: 'load' });
const card = `section[aria-label="${item.label}"]`;
await page.locator(`[data-skeleton="${item.skeleton}"] ${card} footer`).waitFor({ timeout: 15_000 });
const geometry = () => page.locator(card).evaluateAll(cards => cards.map(card => {
const style = (part: Element) => {
const css = getComputedStyle(part);
return [css.display, css.padding, css.gap, css.borderTopWidth, css.borderRadius, css.backgroundColor];
};
return { width: Math.round(card.getBoundingClientRect().width), height: Math.round(card.getBoundingClientRect().height), face: style(card),
body: style(card.firstElementChild!), footer: style(card.querySelector('footer')!) };
}));
const waiting = await geometry();
assert.equal(waiting.length, 1);
assert.equal(waiting[0]!.face[3], '0px', '骨架卡还带着外框，页面上的卡只靠填充底');
const expected = await disabledTokens(page);
const faces = await waitingActionFaces(page, `[data-skeleton="${item.skeleton}"] [data-skeleton-action]`);
assert.deepEqual(faces.map(face => face.name).filter(Boolean), item.names);
for (const face of faces) assertDisabledFace(face, expected);
const buttons = page.locator(`${card} footer button`).filter({ hasText: /同步新增文件|开始修复/ }).or(
page.locator(`${card} footer button[aria-label="更多同步方式"]`));
const sizes = await buttons.evaluateAll(nodes => nodes.map(node => {
const box = node.getBoundingClientRect();
return [box.width, box.height];
}));
if (item.skeleton === 'cleanup') {
const ring = await page.locator(`${card} [data-split-button]`).evaluate(node => getComputedStyle(node).boxShadow);
assert.ok(ring.includes(expected.ring), `骨架分体键外圈不是禁用描边：${ring}`);
}
release();
await page.locator(`${card} footer button:not([data-skeleton-action])`).first().waitFor({ timeout: 15_000 });
await settle(page);
assert.deepEqual(await geometry(), waiting, '骨架与内容卡的容器布局不一致');
assert.deepEqual(await buttons.evaluateAll(nodes => nodes.map(node => {
const box = node.getBoundingClientRect();
return [box.width, box.height];
})), sizes, '操作按钮接管时尺寸跳变');
assert.deepEqual(await buttons.evaluateAll(nodes => nodes.map(node => (node as HTMLButtonElement).disabled)), item.names.map(() => false));
for (const face of await buttons.evaluateAll(nodes => nodes.map(node => getComputedStyle(node).backgroundImage))) {
assert.match(face, /gradient/, '数据到了操作按钮仍未恢复主操作样式');
}
assert.deepEqual(opened.problems, []);
} finally { await opened.close() }
});
}
const cleanupTools = [
['/data-cleanup/organize', 'organize'], ['/data-cleanup/resource-sync', 'resource-sync'],
['/data-cleanup/orphan-records', 'orphan-records'], ['/data-cleanup/links', 'links'],
['/data-cleanup/batch-delete', 'batch-delete'],
] as const;
for (const viewport of [DESKTOP, MOBILE]) {
it(`维护工具二级页的骨架画在正文那一列里，首张卡与接管后同位同宽（${viewport.name}）`, { timeout: 90_000 }, async () => {
const opened = await visit(browser, cleanupTools[0][0], viewport);
try {
const page = opened.page;
const release = await holdApi(page);
const frame = (column: string) => page.locator(column).evaluate((node) => {
const box = (part: Element) => {
const { left, width } = part.getBoundingClientRect();
return [Math.round(left), Math.round(width)];
};
return { column: box(node), card: box(node.firstElementChild!) };
});
const waiting: Record<string, unknown> = {};
for (const [path, key] of cleanupTools) {
await page.goto(new URL(path, page.url()).href, { waitUntil: 'load' });
await page.locator(`[data-skeleton="cleanup/${key}"] [inert] > *`).first().waitFor({ timeout: 15_000 });
waiting[path] = await frame(`[data-skeleton="cleanup/${key}"] [inert]`);
}
release();
// 接管那一拍旧骨架挪进淡出层 `.skelfade`，不再挂在 `[data-skeleton]` 下，两层都要排除。
const content = '#stats .max-w-board:not([data-skeleton] *, .skelfade *)';
for (const [path] of cleanupTools) {
await page.goto(new URL(path, page.url()).href, { waitUntil: 'load' });
await page.locator(`${content} > *`).first().waitFor({ timeout: 15_000 });
await page.locator('#stats .skelfade').waitFor({ state: 'detached', timeout: 15_000 });
await settle(page);
assert.deepEqual(await frame(content), waiting[path], `${path} 骨架与内容的正文列或首张卡位置不一致`);
}
assert.deepEqual(opened.problems, []);
} finally { await opened.close() }
});
}
it('工具页标题采用 medium，链接读数使用既定字号与行高', { timeout: 60_000 }, async () => {
const opened = await visit(browser, '/data-cleanup/links', DESKTOP);
try {
const page = opened.page;
for (const [path, id, name] of [
['/data-cleanup/links', 'link-manager', '链接管理'],
['/data-cleanup/resource-sync', 'resource-sync', '资源同步'],
]) {
await page.goto(new URL(path!, page.url()).href);
await page.locator(`#${id}-title`).waitFor({ timeout: 15_000 });
await settle(page);
const heading = await page.locator(`#${id}-title`).evaluate(node => {
const css = getComputedStyle(node);
return [css.fontSize, css.fontWeight, css.lineHeight, css.marginBottom];
});
assert.deepEqual(heading, ['20px', '500', '26px', '8px'], `${name}标题样式`);
assert.equal(await page.locator(`#${id} > h2, #${id} > h3`).count(), 0, '出现了框外标题');
if (id === 'link-manager') {
const styles = await page.locator('#link-manager .link-stat-grid').evaluate(node => {
const label = getComputedStyle(node.querySelector('span')!);
const figure = getComputedStyle(node.querySelector('b')!);
return [label.fontSize, label.lineHeight, figure.fontSize, figure.fontWeight, figure.lineHeight];
});
assert.deepEqual(styles, ['12px', '20px', '20px', '700', '20px']);
}
}
assert.deepEqual(opened.problems, []);
} finally { await opened.close() }
});
it('可点的卡悬停时铺卡面掺 5% 主文字色的那一档面，不是透明', { timeout: 60_000 }, async () => {
const opened = await visit(browser, '/data-cleanup', DESKTOP);
try {
const page = opened.page;
const selector = '.peach-react [data-cleanup-go]';
const card = page.locator(selector).first();
await card.waitFor({ timeout: 15_000 });
await settle(page);
const rest = await card.evaluate((element) => getComputedStyle(element).backgroundColor);
await card.hover();
// 过渡跑完才读：等到底色变了，或三秒后照实读出没变的那个值。
await page.waitForFunction(([target, before]) =>
getComputedStyle(document.querySelector(target)!).backgroundColor !== before,
[selector, rest] as const, { timeout: 3_000 }).catch(() => undefined);
const hovered = await card.evaluate((element) => getComputedStyle(element).backgroundColor);
assert.notEqual(hovered, 'rgba(0, 0, 0, 0)', '悬停底色落成了透明：token 在根上就折掉了');
assert.notEqual(hovered, rest, '悬停没有换面');
assert.equal(hovered, await tokenColor(page, '.peach-react', '--card-hover'), '悬停底色不是卡面掺 5% 主文字色');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('索引页名册格用遗留卡面那一套：格底 --ground、头像框 --sunk、首字与读数 --muted 配 Bahnschrift，悬停掺 6% 主文字色；页头过滤框与版式切换同为 36px 高，切换两枚共 66px 宽', { timeout: 60_000 }, async () => {
const opened = await openIndexPage(browser, '/performers');
try {
const page = opened.page;
const selector = '#index [data-index-cell]';
const cell = page.locator(selector).first();
const rest = await cell.evaluate((element) => getComputedStyle(element).backgroundColor);
const face = await page.evaluate(() => {
const ring = document.querySelector('#index [data-person-ring]')!;
const initial = document.querySelector('#index [data-person-ring] .ini')!;
const readout = document.querySelector('#index [data-index-readout]')!;
return { ring: getComputedStyle(ring).backgroundColor, initial: getComputedStyle(initial).color,
font: getComputedStyle(initial).fontFamily, readout: getComputedStyle(readout).color };
});
assert.equal(rest, await tokenColor(page, 'html', '--ground'), '名册格底不是 --ground');
assert.equal(face.ring, await tokenColor(page, 'html', '--sunk'), '头像框底不是 --sunk');
const muted = await page.evaluate(() => {
const probe = document.createElement('div');
probe.style.color = 'var(--muted)';
document.documentElement.append(probe);
const value = getComputedStyle(probe).color;
probe.remove();
return value;
});
assert.deepEqual([face.initial, face.readout], [muted, muted], '首字与读数不是 --muted');
assert.match(face.font, /^Bahnschrift/, '首字不是 Bahnschrift');
await cell.hover();
await page.waitForFunction(([target, before]) =>
getComputedStyle(document.querySelector(target)!).backgroundColor !== before,
[selector, rest] as const, { timeout: 3_000 }).catch(() => undefined);
const hovered = await cell.evaluate((element) => getComputedStyle(element).backgroundColor);
const lifted = await page.evaluate(() => {
const probe = document.createElement('div');
probe.style.backgroundColor = 'color-mix(in srgb, var(--ink) 6%, var(--ground))';
document.documentElement.append(probe);
const value = getComputedStyle(probe).backgroundColor;
probe.remove();
return value;
});
assert.equal(hovered, lifted, '名册格悬停不是格底掺 6% 主文字色');
const head = await page.evaluate(() => {
const input = document.querySelector('#index [data-index-search] input')!;
const shell = input.closest('[role="presentation"]')!;
const toggle = document.querySelector('#index [data-index-layout]')!;
return { search: getComputedStyle(shell).height, toggle: getComputedStyle(toggle).height,
width: getComputedStyle(toggle).width };
});
assert.deepEqual(head, { search: '36px', toggle: '36px', width: '66px' });
// 人脸放大把 img 撑得比框还宽再负偏移；Preflight 的 `max-width:100%` 会把它压回框宽。
const photo = page.locator('#index [data-person-ring] img').first();
await photo.waitFor({ state: 'attached', timeout: 5_000 });
await page.waitForFunction(() => document.querySelector('#index [data-person-ring]')?.hasAttribute('data-native-small'),
undefined, { timeout: 5_000 });
assert.equal(await photo.evaluate((element) => getComputedStyle(element).maxWidth), 'none');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('索引页分区使用中性填充选中态，方向键能切换', { timeout: 60_000 }, async () => {
const opened = await openIndexPage(browser, '/studios');
try {
const page = opened.page;
const selected = page.locator('#index [role="tab"][aria-selected="true"]');
const look = await selected.evaluate((element) => {
const style = getComputedStyle(element);
const thumb = element.closest('[data-pill-nav]')!.querySelector('[data-pill-thumb]')!;
return { background: style.backgroundColor, selectedSurface: getComputedStyle(thumb).backgroundColor,
border: style.borderBottomWidth, weight: style.fontWeight };
});
assert.equal(look.background, 'rgba(0, 0, 0, 0)');
assert.notEqual(look.selectedSurface, 'rgba(0, 0, 0, 0)');
assert.equal(look.border, '0px');
assert.equal(look.weight, '400');
await selected.focus();
await page.keyboard.press('ArrowRight');
await page.locator('#index [role="tab"][aria-selected="true"][data-tab="series"]').waitFor({ timeout: 5_000 });
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('播放列表卡：封面后压两层纸边、黑底封面、玻璃徽标、38px 头像有图叠 22px、只有首字母叠 8px；标题 32/44，菜单键静止透明', { timeout: 60_000 }, async () => {
const opened = await openPlaylistsPage(browser);
try {
const page = opened.page;
const look = await page.evaluate(() => {
const card = document.querySelector('#stats [data-playlist-card="1"]')!;
const css = (selector: string) => getComputedStyle(card.querySelector(selector)!);
const stack = card.querySelector('[data-mix-stack]')!;
const back = getComputedStyle(stack, '::before');
const mid = getComputedStyle(stack, '::after');
const title = getComputedStyle(document.querySelector('#stats header h2')!);
const cover = css('[data-mix-cover]');
const badge = css('[data-mix-badge]');
const menu = css('[data-playlist-menu]');
const blank = getComputedStyle(document.querySelector('#stats [data-playlist-card="3"] [data-mix-cover] > span')!);
return {
title: [title.fontSize, title.lineHeight, title.fontWeight],
gap: getComputedStyle(document.querySelector('#stats [data-playlist-grid]')!).gap,
back: [back.borderTopWidth, back.inset, back.transform, back.opacity],
mid: [mid.borderTopWidth, mid.inset, mid.transform, mid.opacity],
cover: [cover.backgroundColor, cover.clipPath],
badge: [badge.backgroundColor, badge.backdropFilter, badge.minHeight, badge.borderRadius, badge.right, badge.bottom],
avatars: [...card.querySelectorAll('[data-mix-avatars] button')].map((button) => {
const style = getComputedStyle(button);
return [style.width, style.marginLeft, style.zIndex];
}),
menu: [menu.width, menu.height, menu.borderRadius, menu.backgroundColor],
blank: [blank.letterSpacing, blank.textTransform],
};
});
assert.deepEqual(look, {
title: ['32px', '44px', '500'],
gap: '18px',
back: ['1px', '0px 12px 8px', 'matrix(1, 0, 0, 1, 0, -7)', '0.54'],
mid: ['1px', '0px 6px 4px', 'matrix(1, 0, 0, 1, 0, -4)', '0.78'],
cover: ['rgb(0, 0, 0)', 'inset(0px round 14px)'],
badge: ['rgba(12, 8, 8, 0.72)', 'blur(10px)', '28px', '10px', '9px', '9px'],
avatars: [['38px', '0px', '5'], ['38px', '-8px', '4'], ['38px', '-8px', '3']],
menu: ['30px', '30px', '10px', 'rgba(0, 0, 0, 0)'],
blank: ['1.44px', 'uppercase'],
});
// 指到的头像抬起 4px、放大到 1.05，右边那位朝标题让开 10px。
await page.locator('#stats [data-playlist-card="1"] [data-mix-avatars] button').first().hover();
const lifted = await page.evaluate(() => {
document.getAnimations().forEach((animation) => animation.finish());
return [...document.querySelectorAll('#stats [data-playlist-card="1"] [data-mix-avatars] button')]
.slice(0, 2).map((button) => getComputedStyle(button).transform);
});
assert.deepEqual(lifted, ['matrix(1.05, 0, 0, 1.05, 0, -4)', 'matrix(1, 0, 0, 1, 10, -1.8)']);
// 点点点菜单外宽 172px，同旧卡片菜单。
await page.locator('#stats [data-playlist-card="1"] [data-playlist-menu]').click();
const panel = page.locator(':has(> [role="dialog"][aria-label="播放列表操作：列表1"])');
await panel.waitFor({ timeout: 5_000 });
assert.equal(await panel.evaluate((element) => getComputedStyle(element).width), '172px');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('播放列表页窄屏：页头改竖排，新建框字号 16px 免得 iOS 聚焦时放大', { timeout: 60_000 }, async () => {
const opened = await openPlaylistsPage(browser, MOBILE);
try {
const narrow = await opened.page.evaluate(() => ({
header: getComputedStyle(document.querySelector('#stats header')!).flexDirection,
input: getComputedStyle(document.querySelector('#stats [data-playlist-create] input')!).fontSize,
title: getComputedStyle(document.querySelector('#stats header h2')!).fontSize,
}));
assert.deepEqual(narrow, { header: 'column', input: '16px', title: '32px' });
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('分段底板支持鼠标反向、键盘即时切换与减少动态效果', { timeout: 60_000 }, async () => {
const opened = await openIndexPage(browser, '/performers');
const { page } = opened;
try {
await page.emulateMedia({ reducedMotion: 'no-preference' });
const track = page.locator('[data-index-layout]');
const choices = track.locator('label');
const pane = track.locator('[data-moving-surface]');
await pane.waitFor();
const aligned = async () => {
await page.waitForFunction(() => {
const host = document.querySelector('[data-index-layout]')!;
const pane = host.querySelector('[data-moving-surface]')!.getBoundingClientRect();
const selected = host.querySelector('label[data-selected]')!.getBoundingClientRect();
return Math.abs(pane.x - selected.x) < 1 && Math.abs(pane.width - selected.width) < 1;
});
};
const assertInstant = async () => {
const offset = await pane.evaluate((node) => {
const selected = node.parentElement!.querySelector('label[data-selected]')!.getBoundingClientRect();
const box = node.getBoundingClientRect();
return { x: box.x - selected.x, width: box.width - selected.width };
});
assert.ok(Math.abs(offset.x) < 1 && Math.abs(offset.width) < 1,
`即时切换的底板位置：${JSON.stringify(offset)}`);
};
await choices.nth(0).click();
await aligned();
const endpoints = await choices.evaluateAll((nodes) => nodes.slice(0, 2).map((node) => node.getBoundingClientRect().x));
await pane.evaluate((node) => {
const target = node.parentElement!.querySelectorAll('label')[1];
target.addEventListener('pointerdown', () => {
const samples: number[] = [];
const sample = () => {
samples.push(node.getBoundingClientRect().x);
if (samples.length < 24) requestAnimationFrame(sample);
else (node as HTMLElement).dataset.motionSamples = JSON.stringify(samples);
};
requestAnimationFrame(sample);
}, { once: true });
});
await choices.nth(1).click();
await page.waitForFunction(() => document.querySelector('[data-index-layout] [data-motion-samples]'));
const samples = JSON.parse((await pane.getAttribute('data-motion-samples'))!) as number[];
assert.ok(samples.some((x) => x > Math.min(...endpoints) + 1 && x < Math.max(...endpoints) - 1),
`鼠标切换应经过两项之间的位置：${JSON.stringify(samples)}`);
await choices.nth(0).click();
await choices.nth(1).click();
await choices.nth(0).click();
await aligned();
assert.equal(await pane.count(), 1);
assert.equal(await pane.getAttribute('aria-hidden'), 'true');
await track.getByRole('radio').nth(0).focus();
await page.keyboard.press('ArrowRight');
await assertInstant();
assert.equal(await track.getByRole('radio').nth(1).isChecked(), true);
assert.equal(await pane.evaluate((node) => node.getAnimations().length), 0);
assert.match(await choices.nth(1).evaluate((node) => getComputedStyle(node).getPropertyValue('--tw-ring-shadow')), /2px/,
'选中底板不能抹掉键盘焦点环');
await page.emulateMedia({ reducedMotion: 'reduce' });
await choices.nth(0).click();
await assertInstant();
assert.equal(await pane.evaluate((node) => node.getAnimations().length), 0);
await page.setViewportSize({ width: 390, height: 844 });
await aligned();
assert.deepEqual(opened.problems, []);
} finally { await opened.close(); }
});
it('输入框失败态只把框线换成 danger 色：填充照静止态，原因用说明文字的灰', { timeout: 60_000 }, async () => {
const opened = await openPlaylistsPage(browser);
const { page } = opened;
try {
const form = page.locator('[data-playlist-create]');
const resting = await form.locator('[data-input-size] > div[data-rac]').evaluate((node) => getComputedStyle(node).backgroundColor);
await form.getByRole('button', { name: '新建' }).click();
await form.locator('[data-input-size] > div[data-rac][data-invalid]').waitFor();
const looks = await form.locator('[data-input-size]').evaluate((root) => {
const probe = (token: string) => {
const swatch = document.createElement('i');
swatch.style.color = `var(${token})`;
root.append(swatch);
const color = getComputedStyle(swatch).color;
swatch.remove();
return color;
};
const group = getComputedStyle(root.querySelector(':scope > div[data-rac]')!);
return {
fill: group.backgroundColor, outline: group.outlineColor, width: group.outlineWidth,
reason: getComputedStyle(root.querySelector(':scope > [slot="errorMessage"]')!).color,
danger: probe('--color-border-error-default'), secondary: probe('--color-text-secondary'),
};
});
assert.deepEqual([looks.fill, looks.outline, looks.width, looks.reason],
[resting, looks.danger, '1px', looks.secondary]);
} finally { await opened.close(); }
});
it('短菜单共享悬停面，弹窗关闭释放焦点与遮罩', { timeout: 60_000 }, async () => {
const opened = await openPlaylistsPage(browser);
const { page } = opened;
try {
await page.emulateMedia({ reducedMotion: 'no-preference' });
const trigger = page.locator('[data-playlist-card="1"] [data-playlist-menu]');
await trigger.click();
const menu = page.getByRole('dialog', { name: '播放列表操作：列表1' });
await menu.getByRole('button', { name: '编辑名称' }).hover();
const pane = menu.locator('[data-moving-surface]');
await pane.waitFor();
await menu.getByRole('button', { name: '删除播放列表' }).hover();
await page.waitForFunction(() => {
const host = document.querySelector('[data-surface-host="hover"]')!;
const pane = host.querySelector('[data-moving-surface]')!.getBoundingClientRect();
const button = [...host.querySelectorAll('button')].at(-1)!.getBoundingClientRect();
return Math.abs(pane.y - button.y) < 1;
});
await page.keyboard.press('Tab');
assert.equal(await pane.isVisible(), false);
await menu.getByRole('button', { name: '编辑名称' }).click();
const modal = page.locator('[data-modal-motion]');
await modal.waitFor();
await modal.getByRole('textbox', { name: '名称' }).waitFor();
assert.equal(await modal.locator('[data-modal-surface]').evaluate((node) =>
getComputedStyle(node).transitionProperty.includes('transform')), true);
await modal.locator('form').getByRole('button', { name: '取消', exact: true }).click();
await modal.waitFor({ state: 'detached' });
await trigger.click();
await menu.getByRole('button', { name: '编辑名称' }).focus();
await page.keyboard.press('Enter');
await modal.waitFor();
assert.equal(await modal.getAttribute('data-motion-instant'), 'true');
await page.waitForFunction(() => Boolean(document.activeElement?.closest('[data-modal-motion]')),
null, { timeout: 5_000 });
await page.keyboard.press('Escape');
await modal.waitFor({ state: 'detached' });
assert.equal(await page.evaluate(() => document.activeElement?.closest('[data-modal-motion]') !== null), false);
assert.deepEqual(opened.problems, []);
} finally { await opened.close(); }
});
it('批量选择条更新计数保持节点，清空后退出且不保留可操作控件', { timeout: 60_000 }, async () => {
const opened = await openIndexPage(browser, '/tags');
const { page } = opened;
try {
await page.emulateMedia({ reducedMotion: 'no-preference' });
await page.locator('#selectMode').click();
const tags = page.locator('#index [data-alpha-tag]');
await tags.nth(0).click();
const dock = page.locator('[data-selection-dock]');
await dock.waitFor();
await dock.evaluate((node) => node.setAttribute('data-test-identity', 'retained'));
await tags.nth(1).click();
assert.equal(await dock.getAttribute('data-test-identity'), 'retained');
assert.match(await dock.textContent() ?? '', /已选 2 个标签/);
await dock.getByRole('button', { name: '清空', exact: true }).click();
await page.waitForFunction(() => {
const dock = document.querySelector<HTMLElement>('[data-selection-dock]');
return !dock || (dock.inert && dock.getAttribute('aria-hidden') === 'true');
});
await dock.waitFor({ state: 'detached' });
await tags.nth(0).click();
await dock.waitFor();
await page.emulateMedia({ reducedMotion: 'reduce' });
await dock.getByRole('button', { name: '清空', exact: true }).click();
await dock.waitFor({ state: 'detached' });
assert.deepEqual(opened.problems, []);
} finally { await opened.close(); }
});
it('标签多选坞出现时页底按实际高度留白；在线词表的类型色走上游 tag_type 那一套', { timeout: 60_000 }, async () => {
const opened = await openIndexPage(browser, '/tags');
try {
const page = opened.page;
await page.locator('#selectMode').click({ timeout: 5_000 });
await page.locator('#index [data-alpha-tag]').nth(0).click({ timeout: 5_000 });
await page.locator('#index [data-alpha-tag]').nth(1).click({ timeout: 5_000 });
const dock = page.locator('[data-selection-dock]');
await dock.waitFor({ timeout: 5_000 });
const clearance = await dock.evaluate((element) => ({
padding: parseFloat(getComputedStyle(document.querySelector('#index .peach-react')!).paddingBottom),
required: (element as HTMLElement).offsetHeight + parseFloat(getComputedStyle(element).bottom) + 16,
}));
assert.ok(clearance.padding >= clearance.required, `选择坞下方留白不足：${JSON.stringify(clearance)}`);
await page.locator('#index [role="tab"][data-tab="online"]').click({ timeout: 5_000 });
const dot = page.locator('#index [data-alpha-tag][data-tag-cat="r34-artist"] [data-tag-dot]');
await dot.waitFor({ timeout: 5_000 });
assert.equal(await dot.evaluate((element) => getComputedStyle(element).backgroundColor), 'rgb(227, 108, 108)');
assert.equal(await dock.count(), 0, '在线词表不给多选坞');
assert.equal(await page.evaluate(() => document.documentElement.style.getPropertyValue('--selection-dock-space')), '');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('标签云一枚里名字与计数只隔一个空格宽；筛选浮层的 Aa 字形摆进 16×16 的框', { timeout: 60_000 }, async () => {
const opened = await openIndexPage(browser, '/tags?view=cloud');
try {
const page = opened.page;
const spacing = await page.locator('#index [data-tag-chip]').first().evaluate((chip) => {
// 名字那段文字按字符切开量：字的右缘到计数左缘，与末尾那个空格自己画出来的宽度相比。
const name = chip.firstElementChild!.firstChild!;
const end = name.textContent!.trimEnd().length;
const box = (from: number, to: number) => {
const part = document.createRange();
part.setStart(name, from);
part.setEnd(name, to);
return part.getBoundingClientRect();
};
const count = chip.querySelector('[data-tag-n]')!.getBoundingClientRect();
return { gap: count.left - box(0, end).right, space: box(end, name.textContent!.length).width,
columnGap: getComputedStyle(chip).columnGap };
});
assert.equal(spacing.columnGap, 'normal', '名字与计数之间不另加 flex 间距');
assert.ok(spacing.space > 2 && Math.abs(spacing.gap - spacing.space) < 0.5,
`名字与计数隔了 ${spacing.gap}px，一个空格是 ${spacing.space}px`);
const glyph = page.locator('#index svg:has(use[href="#i-text-aa"])');
const letterGlyph = await glyph.evaluate((element) => {
const style = getComputedStyle(element);
const ink = (element as SVGSVGElement).getBBox();
return { width: parseFloat(style.width), height: parseFloat(style.height), inkHeight: ink.height };
});
assert.equal(letterGlyph.height, 16);
assert.ok(letterGlyph.width / letterGlyph.height > 1.4, '字母表字形按高度保留横向比例');
assert.ok(letterGlyph.inkHeight / 24 > 0.8, '字母表字形的实际墨迹占满同级图标活区');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('重复文件的汇总条是玻璃面，组卡 14px 圆角、组头 20px 内边距，每行上方一条 1px 分隔线', { timeout: 60_000 }, async () => {
const opened = await openDuplicates(browser);
try {
const faces = await opened.page.evaluate(() => {
const glass = getComputedStyle(document.querySelector('[data-filter-glass]')!);
const group = document.querySelector('#stats section[aria-label="DUPE-002"]')!;
const head = group.firstElementChild!;
const card = getComputedStyle(group);
const header = getComputedStyle(head);
const code = getComputedStyle(head.querySelector('b')!);
return {
glass: { filter: glass.backdropFilter, padding: glass.padding, height: glass.height,
compact: parseFloat(glass.getPropertyValue('--control-h-compact')) },
card: { radius: card.borderRadius, overflow: card.overflow, face: card.backgroundColor },
head: { padding: header.padding, face: header.backgroundColor, size: code.fontSize, weight: code.fontWeight },
rows: [...group.querySelectorAll('.duplicate-row')].map((row) => {
const computed = getComputedStyle(row);
return [computed.borderTopWidth, computed.padding];
}),
};
});
assert.match(faces.glass.filter, /blur\(/, '汇总条没有背景模糊，不是玻璃面');
// 汇总条里的控件取紧凑档，条高是上下各 10px 内边距加一档紧凑控件。
assert.deepEqual([faces.glass.padding, faces.glass.height], ['10px 16px', `${20 + faces.glass.compact}px`]);
assert.deepEqual([faces.card.radius, faces.card.overflow], ['14px', 'hidden'], '组卡圆角或裁切不对');
assert.notEqual(faces.head.face, faces.card.face, '组头和组卡同色，番号那一行分不出来');
assert.deepEqual([faces.head.padding, faces.head.size, faces.head.weight], ['20px', '20px', '500']);
assert.deepEqual(faces.rows, [['1px', '16px 20px'], ['1px', '16px 20px']],
'组内每一行上方不是 1px 分隔线，或内边距不是 16/20');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('统计、高清版和配置空清单有背景与边框，窄屏不越界', { timeout: 60_000 }, async () => {
const cases = [
{ path: '/stats', title: '还没有视频', height: 320 },
{ path: '/quality-goals', title: '没有标记中的高清版目标', height: 320 },
{ path: '/settings/diagnostics', title: '清单为空', height: 240 },
{ path: '/settings/subscriptions', title: '没有可配置的来源', height: 240 },
];
for (const viewport of [DESKTOP, MOBILE]) {
for (const example of cases) {
const opened = await visit(browser, example.path, viewport, async page => {
await page.route('**/api/stats', async route => {
const report = await (await route.fetch()).json();
await route.fulfill({ json: { ...report, by_loc: [] } });
});
await page.route('**/api/quality-goals?**', route => route.fulfill({ json: { total: 0, items: [] } }));
await page.route('**/api/follow/credentials', route => route.fulfill({ json: { providers: [] } }));
await page.route('**/api/diagnostics', async route => {
const report = await (await route.fetch()).json();
report.library.groups = { empty: { label: '空清单样例', status: 'ok', count: 0, items: [], truncated: false } };
await route.fulfill({ json: report });
});
});
try {
const { page } = opened;
if (example.path === '/settings/diagnostics') {
await page.locator('summary').filter({ hasText: '空清单样例 · 0 项' }).click();
}
const empty = page.locator('[data-empty-state]').filter({
has: page.getByRole('heading', { name: example.title, exact: true }),
});
await empty.waitFor();
await settle(page);
const face = await empty.evaluate(node => {
const style = getComputedStyle(node);
const glyph = node.querySelector('svg')!;
const frame = glyph.parentElement!;
return { background: style.backgroundColor, border: style.borderTopWidth, color: style.borderTopColor,
height: node.getBoundingClientRect().height, glyph: getComputedStyle(glyph).width,
frame: getComputedStyle(frame).width, title: getComputedStyle(node.querySelector('h3')!).fontSize };
});
assert.equal(face.background, await tokenColor(page, '.peach-react', '--color-background-secondary-default'));
assert.equal(face.border, '1px', `${example.path}空态缺少边框`);
assert.equal(face.color, await tokenColor(page, '.peach-react', '--color-separator-border'));
assert.ok(face.height >= example.height);
assert.deepEqual([face.glyph, face.frame, face.title], ['32px', '54px', '14px']);
assert.deepEqual((await layout(page)).offenders, []);
assert.deepEqual(opened.problems, []);
} finally { await opened.close(); }
}
}
});
it('标准空态共用底色、圆角、320px 高度与 54px 图标框', { timeout: 60_000 }, async () => {
// 演示库在一轮里凑得出重复组，桩成空的才一定落到整页空态上。
const opened = await visit(browser, '/duplicates', DESKTOP);
try {
const page = opened.page;
await page.route('**/api/duplicates?**', (route) => route.fulfill({
status: 200, contentType: 'application/json',
body: JSON.stringify({ total: 0, files: 0, reclaimable: 0, groups: [] }),
}));
await page.reload({ waitUntil: 'load' });
await page.locator('#stats [data-empty-state]').waitFor({ timeout: 15_000 });
await settle(page);
const face = await page.evaluate(() => {
const root = document.querySelector('#stats [data-empty-state]')!;
const glyph = root.querySelector('svg')!;
const box = glyph.parentElement!;
const shell = getComputedStyle(root);
const frame = getComputedStyle(box);
const title = getComputedStyle(root.querySelector('h3')!);
const copy = getComputedStyle(root.querySelector('p')!);
return {
shell: { face: shell.backgroundColor, line: shell.borderTopColor, width: shell.borderTopWidth,
radius: shell.borderTopLeftRadius, minHeight: shell.minHeight },
boxed: box !== root,
frame: { width: frame.width, height: frame.height, radius: frame.borderTopLeftRadius,
line: frame.borderTopWidth, glyph: getComputedStyle(glyph).width },
title: [title.fontSize, title.fontWeight], copy: [copy.maxWidth, copy.lineHeight],
};
});
assert.equal(face.shell.face, await tokenColor(page, '.peach-react', '--color-background-secondary-default'),
'整页空态没有沉一档底色');
assert.equal(face.shell.line, await tokenColor(page, '.peach-react', '--color-separator-border'), '外框不是分隔线色');
assert.deepEqual([face.shell.width, face.shell.radius, face.shell.minHeight], ['1px', '20px', '320px']);
assert.ok(face.boxed, '整页空态的图标没有装进方框');
assert.deepEqual(face.frame, { width: '54px', height: '54px', radius: '20px', line: '1px', glyph: '32px' });
assert.deepEqual(face.title, ['14px', '600']);
assert.deepEqual(face.copy, ['340px', '20.15px']);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
// 任务记录使用同一档标准空态。
const activity = await visit(browser, '/tasks', DESKTOP);
try {
await activity.page.route('**/api/tasks', (route) => route.fulfill({
status: 200, contentType: 'application/json',
body: JSON.stringify({ available: true, running: [], skipped: [], finished: [] }),
}));
await activity.page.reload({ waitUntil: 'load' });
const empty = activity.page.locator('[data-empty-state]');
await empty.waitFor({ timeout: 15_000 });
await settle(activity.page);
assert.equal(await empty.evaluate((root) => root.querySelector('svg')!.parentElement === root), false,
'任务空态缺少图标框');
assert.deepEqual(activity.problems, []);
} finally {
await activity.close();
}
});
it('骨架里的占位和按键悬停不给任何反馈，也点不中', { timeout: 120_000 }, async () => {
const name = '七沢みあ';
const pages: { path: string; ready: string; targets: string[]; prepare?: (page: Page) => Promise<void> }[] = [
{ path: `/performers/${encodeURIComponent(name)}`, ready: '[data-skeleton="entity/performer"] [data-entity-foot] [data-hero-ring]',
targets: ['[data-skeleton] [data-entity-foot] [data-hero-ring]'],
prepare: (page) => page.route(/\/api\/entity\/shapes/, (route) => route.fulfill({ json: {
ok: true, entities: [{ id: 90_001, kind: 'performer', names: [name], parts: ['costars'] }] } })) },
{ path: '/data-cleanup', ready: '[data-skeleton="cleanup"] [data-skeleton-action]',
targets: ['[data-skeleton] .inline-grid > div', '[data-skeleton] a[href="/sources"]',
'[data-skeleton] [data-skeleton-action]'] },
{ path: '/data-cleanup/media-repair', ready: '[data-skeleton="cleanup/media-repair"] [data-skeleton-action]',
targets: ['[data-skeleton] [data-skeleton-action]'] },
{ path: '/review', ready: '[data-skeleton="review"] .reviewtabs button',
targets: ['[data-skeleton] .reviewtabs button', '[data-skeleton] .skeletoncard'] },
{ path: '/follow', ready: '.followauthors .avskeleton',
targets: ['.followauthors .avskeleton', '.followworks .brandskeleton', '[data-skeleton^="cards/"] > div > *'] },
{ path: '/subscriptions', ready: '[data-skeleton="board/subscriptions"] .ui-follow-skeleton-toolbar',
targets: ['[data-skeleton] .ui-follow-skeleton-toolbar [data-follow-toolbar-controls] button',
'[data-skeleton] .ui-follow-skeleton-toolbar [data-follow-toolbar-actions] > button:nth-of-type(1)'] },
];
for (const { path, ready, targets, prepare } of pages) {
const opened = await visit(browser, '/', DESKTOP);
try {
const page = opened.page;
// 后登记的路由先拿到请求：桩要排在挂住 /api/ 那条之后，不然它也被挂住。
await holdApi(page);
await prepare?.(page);
await page.goto(new URL(path, page.url()).href, { waitUntil: 'load' });
await page.locator(ready).first().waitFor({ state: 'visible', timeout: 15_000 });
for (const target of targets) {
const node = page.locator(target).first();
await node.waitFor({ state: 'visible', timeout: 5_000 });
// 落在首屏以下的目标（数据管理的整理卡）先滚进视口：`elementFromPoint` 只认视口里的点。
await node.scrollIntoViewIfNeeded();
const box = (await node.boundingBox())!;
const look = () => node.evaluate((element) => [element, ...element.querySelectorAll('*')].slice(0, 6).map((part) => {
const style = getComputedStyle(part);
return [style.borderColor, style.boxShadow, style.backgroundColor, style.backgroundImage,
style.outlineStyle, style.color, style.scale, style.transform].join(' | ');
}));
await page.mouse.move(0, 0);
const rest = await look();
const [x, y] = [box.x + box.width / 2, box.y + box.height / 2];
await page.mouse.move(x, y);
assert.deepEqual(await look(), rest, `${path} ${target} 悬停时变了样子`);
// 分层骨架那一排（`data-skeleton-tier`）是最终那条轨道本身，点中它等于点在页面底上；
// 要问的是指针有没有落在某一枚占位或整块骨架里。
const hit = await page.evaluate(([px, py]) => {
const at = document.elementFromPoint(px!, py!);
return { cursor: at ? getComputedStyle(at).cursor : '',
inside: !!at?.closest('[data-skeleton],.avskeleton,.brandskeleton,.tagskeleton,.skeletoncard'),
disabled: !!at?.closest('button:disabled') };
}, [x, y]);
assert.ok(['auto', 'default', 'not-allowed'].includes(hit.cursor), `${path} ${target} 悬停换了光标：${hit.cursor}`);
assert.ok(!hit.inside || hit.disabled, `${path} ${target} 在骨架里还能点中`);
}
} finally {
await opened.close();
}
}
});
it('暂停来源的标签使用主文字色；卡片末行的反馈面与外框同心', { timeout: 60_000 }, async () => {
for (const viewport of [DESKTOP, MOBILE]) {
const opened = await openFollowManage(browser, viewport, {
extra: [{ ...followSource(4, 'paused', 'Kemono', 'paused · Kemono'), enabled: false }],
});
try {
const { page } = opened;
for (const theme of ['light', 'dark']) {
await page.evaluate((value) => {
document.documentElement.dataset.theme = value;
document.documentElement.classList.toggle('dark', value === 'dark');
}, theme);
const card = page.getByRole('region', { name: 'paused 的关注来源', exact: true });
const badge = card.getByText('已暂停', { exact: true });
assert.equal(await badge.evaluate((node) => getComputedStyle(node).color),
await tokenColor(page, '.peach-react', '--color-text-primary'));
assert.notEqual(await badge.evaluate((node) => getComputedStyle(node).backgroundColor),
await card.evaluate((node) => getComputedStyle(node).backgroundColor));
const row = card.locator('[data-follow-source-row]').last();
await row.hover();
const corners = await row.evaluate((node) => {
const parent = node.closest('section')!, outer = getComputedStyle(parent), inner = getComputedStyle(node);
return { outer: parseFloat(outer.borderBottomLeftRadius), inset: parseFloat(outer.paddingBottom),
left: parseFloat(inner.borderBottomLeftRadius), right: parseFloat(inner.borderBottomRightRadius),
top: parseFloat(inner.borderTopLeftRadius) };
});
assert.equal(corners.left + corners.inset, corners.outer);
assert.equal(corners.right, corners.left);
assert.equal(corners.top, 0);
}
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
}
});
it('勾中的来源在卡片和表格里都铺 BoardUI 数据表那一档选中底色', { timeout: 60_000 }, async () => {
const opened = await openFollowManage(browser);
try {
const page = opened.page;
const selected = await tokenColor(page, '.peach-react', '--color-background-secondary-default');
await page.getByRole('checkbox', { name: '选择 kou · Kemono' }).check({ force: true, timeout: 5_000 });
const cardRow = page.locator('[data-source-divider] > [data-selected]');
assert.equal(await cardRow.count(), 1);
assert.equal(await cardRow.evaluate((row) => getComputedStyle(row).backgroundColor), selected,
'卡片里的选中行没有铺选中底色');
await page.locator('button[aria-label="表格视图"]').click({ timeout: 5_000 });
const tableRow = page.locator('[data-follow-selected]');
await tableRow.waitFor({ timeout: 5_000 });
assert.equal(await tableRow.evaluate((row) => getComputedStyle(row).backgroundColor), selected,
'表格里的选中行和卡片里的不是同一档');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('别名的组数是次要字色的读数，不借提醒或主按钮的颜色', { timeout: 60_000 }, async () => {
const opened = await openFollowManage(browser);
try {
await followTab(opened, '添加关注');
const count = opened.page.getByText('1 组', { exact: true });
const look = await count.evaluate((node) => ({
ink: getComputedStyle(node).color, face: getComputedStyle(node).backgroundColor,
}));
assert.equal(look.ink, await tokenColor(opened.page, '.peach-react', '--color-text-secondary'));
assert.equal(look.face, 'rgba(0, 0, 0, 0)', '组数画成了带底色的徽章');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
/* 建议由这里给，两组共 30 条，两个视口下字段下方都装不下。桌面取 1280×1000，
字段下缘在视口中段偏下，正是只能往下开、又放不全的那种处境。 */
for (const viewport of [{ ...DESKTOP, height: 1000 }, MOBILE]) {
it(`添加关注的建议下拉压在字段下方剩下的空间里，装不下在菜单内滚，选中行滚进可见区（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openFollowManage(browser, viewport);
try {
const { page } = opened;
await page.route(/\/api\/follow\/suggest\?/, (route) => route.fulfill({ json: {
q: 'bulging',
groups: [['归档站', 18], ['站方分类', 12]].map(([label, count]) => ({
kind: String(label), label,
items: Array.from({ length: Number(count) }, (_, at) => ({
value: `bulging ${label} ${at + 1}`, matched: 'Kemono', n: 120 - at,
})),
})),
} }));
await followTab(opened, '添加关注');
const before = await page.evaluate(() => document.documentElement.scrollHeight);
const input = page.getByRole('textbox', { name: '来源链接、名字或 id' });
await input.click({ timeout: 5_000 });
await input.fill('bulging');
const menu = page.locator('[aria-label="来源建议"]');
await menu.locator('button').nth(29).waitFor({ state: 'attached', timeout: 10_000 });
const measure = () => menu.evaluate((element) => {
for (const animation of element.getAnimations({ subtree: true })) animation.finish();
const box = element.getBoundingClientRect();
const field = element.ownerDocument.querySelector('input[aria-label="来源链接、名字或 id"]')!
.getBoundingClientRect();
const row = element.querySelector('[aria-current="true"]')?.getBoundingClientRect();
return {
top: box.top, bottom: box.bottom, fieldBottom: field.bottom, viewport: innerHeight,
overflowing: element.scrollHeight > element.clientHeight,
overscroll: getComputedStyle(element).overscrollBehaviorY,
page: document.documentElement.scrollHeight, pageWidth: document.documentElement.scrollWidth,
width: innerWidth, y: scrollY,
row: row ? { top: row.top, bottom: row.bottom } : null,
};
});
const open = await measure();
assert.ok(open.bottom <= open.viewport + .5, `下拉底边 ${open.bottom} 越出视口 ${open.viewport}`);
assert.ok(open.top >= open.fieldBottom, `下拉上沿 ${open.top} 盖住了字段（下缘 ${open.fieldBottom}）`);
assert.ok(open.overflowing, '30 条建议没有让下拉溢出，这条用例没练到内滚');
assert.equal(open.overscroll, 'contain', '下拉滚到头会带着页面一起滚');
assert.ok(open.page <= before, `下拉把页面从 ${before} 撑到 ${open.page}`);
assert.ok(open.pageWidth <= open.width, `页面被撑出横向滚动：${open.pageWidth} > ${open.width}`);
// 走到最后一条：它在初始可见区外面，得被滚进来，页面本身不动。
for (let step = 0; step < 30; step++) await input.press('ArrowDown');
const last = await measure();
assert.ok(last.row, '上下键没有选中任何一行');
assert.ok(last.row.top >= last.top - .5 && last.row.bottom <= last.bottom + .5,
`选中行 ${last.row.top}–${last.row.bottom} 不在下拉可见区 ${last.top}–${last.bottom} 内`);
assert.equal(last.y, open.y, '选中行滚进可见区时把页面也滚了');
await input.press('ArrowDown');
const first = await measure();
assert.ok(first.row && first.row.top >= first.top - .5, '绕回第一条后它没有滚回可见区');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
}
for (const viewport of [DESKTOP, { ...MOBILE, name: 'narrow', width: 320 }]) {
it(`七位数的读数和单位留在卡里同一行；长名字与长报错的来源行不越出行，桌面上操作键和名字同一行（${viewport.name}）`, { timeout: 60_000 }, async () => {
const long = 'ThisIsAVeryLongUsernameThatPatreonAllowsWithoutAnySpaces2024';
const opened = await openFollowManage(browser, viewport, {
counts: { new: 1284000, seen: 22000, saved: 0, ignored: 0 },
extra: [
followSource(4, long, 'Patreon', `${long} · Patreon`),
{ ...followSource(5, 'broken', 'Kemono', 'broken · Kemono', 'error'),
last_error: `peach.follow_providers.ProviderError: HTTP 403: <!DOCTYPE html>${'<div class="cf">'.repeat(40)}` },
],
});
try {
await opened.page.waitForFunction(() => {
const card = document.querySelector('[data-measured-reading="updates"]');
const value = card?.querySelector('[skullet-pane]:not([skullet-exiting]) [data-follow-reading]');
return !!card && !card.querySelector('[aria-busy="true"]') && value?.textContent?.includes('1,284,000');
});
const spill = await opened.page.evaluate(() => {
const out = (node: Element, frame: Element) => node.getBoundingClientRect().right > frame.getBoundingClientRect().right + 1;
const values = [...document.querySelectorAll('[data-measured-reading] [data-follow-reading]')]
.filter(node => !node.closest('[aria-hidden="true"], [inert], [skullet-exiting]'));
const readings = values
.filter((node) => [...node.children].some((part) => out(part, node.parentElement!)))
.map((node) => node.textContent);
const wrapped = values.filter((node) => {
const [figure, unit] = [...node.children].map((part) => part.getBoundingClientRect());
return unit!.top >= figure!.bottom - 1;
}).map((node) => node.textContent);
const rows = [...document.querySelectorAll('[data-follow-source-row]')];
const spilled = rows
.filter((row) => row.scrollWidth > row.clientWidth + 1 || [...row.querySelectorAll('button, [role="switch"], input')]
.some((control) => out(control, row)))
.map((row) => row.textContent);
// 末一枚操作键的竖直中线落在名字列的上下沿之间，就是同一行。
const split = rows.filter((row) => {
const name = row.querySelector('a')!.parentElement!.getBoundingClientRect();
const last = [...row.querySelectorAll('button')].at(-1)!.getBoundingClientRect();
const middle = (last.top + last.bottom) / 2;
return middle < name.top - 1 || middle > name.bottom + 1;
}).map((row) => row.textContent);
return { readings, wrapped, spilled, split, rows: rows.length, values: values.length,
text: document.querySelector('[data-measured-reading="updates"] [skullet-pane]:not([skullet-exiting]) [data-follow-reading]')?.textContent };
});
assert.ok(spill.text?.includes('1,284,000'), `读数没有用上七位数：${spill.text}`);
assert.equal(spill.values, 6, '应测量六个已显示的真实读数，不包含隐藏样本');
assert.equal(spill.rows, 5, '造的五条来源没有全部画出来');
assert.deepEqual(spill.readings, [], '读数越出了卡片');
assert.deepEqual(spill.wrapped, [], '七位数的读数把单位挤到了下一行');
assert.deepEqual(spill.spilled, [], '来源行的控件越出了行');
if (!viewport.mobile) assert.deepEqual(spill.split, [], '桌面上来源行的操作键掉到了名字下面');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
}
it('凭据的四种处境四副底色：待办和完成一眼分得开', { timeout: 60_000 }, async () => {
const opened = await openFollowManage(browser);
try {
await opened.page.getByRole('link', { name: /^来源与订阅设置/ }).click();
await opened.page.getByRole('tab', { name: '来源与订阅', exact: true, selected: true }).waitFor();
await opened.page.getByRole('region', { name: '可配置凭据', exact: true }).waitFor();
await settle(opened.page);
const faces: Record<string, string> = {};
for (const state of ['需要', '已配置', '暂时无法连接', '不需要']) {
faces[state] = await opened.page.getByText(state, { exact: true }).first()
.evaluate((chip) => getComputedStyle(chip).backgroundColor);
}
assert.equal(new Set(Object.values(faces)).size, 4, `有两种处境同色：${JSON.stringify(faces)}`);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('浅色下看片那两枚标识悬停时有底，资料卡上带订阅新作开关', { timeout: 60_000 }, async () => {
// 演示库里没有人物实体：资料由这里给，入口与开关字段照服务端拼好下发的形状写。
const name = '七沢みあ';
const opened = await visit(browser, '/', DESKTOP);
try {
await opened.page.route(/\/api\/entity\?/, (route) => route.fulfill({ json: {
id: 90_001, kind: 'performer', canonical_name: name, aliases: [], display_aliases: [],
user_aliases: [], asset_count: 0, tags: [], related_performers: [], links: [],
metadata: {}, has_image: false, has_avatar: false, avatar_focus: null,
representative_asset_id: null,
entry_links: [{ site: 'javdb', label: 'JavDB', ordinal: '', slot: 'mark',
mark: 'mark-javdb', url: 'https://javdb.com/actors/NPD3' }],
feed: { following: false },
} }));
await opened.page.goto(new URL(`/performers/${encodeURIComponent(name)}`,
opened.page.url()).href, { waitUntil: 'load' });
const mark = opened.page.locator('[data-entry-marks] a[data-entry-mark]').first();
await mark.waitFor({ timeout: 15_000 });
await settle(opened.page);
// 浅色下 `--hover` 与资料卡的 `--ground` 同是 #f7f7f7，垫上去等于没垫。
await opened.page.evaluate(() => {
document.documentElement.dataset.theme = 'light';
document.documentElement.classList.remove('dark');
});
await mark.hover();
const faces = await mark.evaluate((element) => ({
mark: getComputedStyle(element).backgroundColor,
card: getComputedStyle(element.closest('[data-entity-card]')!).backgroundColor,
}));
assert.notEqual(faces.mark, 'rgba(0, 0, 0, 0)', '悬停没有垫底');
assert.notEqual(faces.mark, faces.card, '悬停底色和资料卡同色，看不出来');
const toggle = opened.page.getByRole('switch', { name: '订阅新作' });
assert.equal(await toggle.count(), 1, '资料卡上没有订阅新作开关');
assert.equal(await toggle.isChecked(), false);
const feed = opened.page.locator('[data-entry-feed]');
await opened.page.emulateMedia({ reducedMotion: 'no-preference' });
assert.equal(await feed.evaluate((element) => getComputedStyle(element).animationName),
'entryfeed-breathe', '没订的那枚图标不呼吸，一枚墨色小图标没人注意到');
const tip = opened.page.locator('#entityFeedTip');
assert.equal(await tip.isVisible(), false);
await feed.hover();
assert.equal(await tip.isVisible(), true, '悬停没有说明这枚图标是干嘛的');
assert.equal(await tip.innerText(), '订阅新作');
const placed = await tip.evaluate((element) => {
const box = element.getBoundingClientRect();
return box.left >= 0 && box.right <= innerWidth && box.bottom <= innerHeight;
});
assert.ok(placed, '说明浮层越出了视口');
await toggle.focus();
await opened.page.keyboard.press('Escape');
assert.equal(await tip.isVisible(), false, 'Escape 收不起说明浮层');
} finally {
await opened.close();
}
});
for (const viewport of [DESKTOP, MOBILE]) {
it(`订阅新作的说明浮层整块露在外面：不被资料卡裁掉，也不被同台艺人那条盖住（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openPerformer(browser, viewport);
try {
const page = opened.page;
const feed = page.locator('[data-entry-feed]');
await feed.hover();
const tip = page.locator('#entityFeedTip');
await tip.waitFor({ state: 'visible', timeout: 5_000 });
const placement = await tip.evaluate((element) => {
const box = element.getBoundingClientRect();
const clippedBy: string[] = [];
// 顶层里的元素不受祖先 overflow 裁切，只有写在文档流里的浮层才要逐层量。
const topLayer = element.matches(':popover-open');
for (let node = topLayer ? null : element.parentElement; node; node = node.parentElement) {
const style = getComputedStyle(node);
if (style.overflowX === 'visible' && style.overflowY === 'visible') continue;
const clip = node.getBoundingClientRect();
if (box.left < clip.left - 0.5 || box.right > clip.right + 0.5
|| box.top < clip.top - 0.5 || box.bottom > clip.bottom + 0.5) clippedBy.push(node.className || node.tagName);
}
// 浮层本身不接指针；临时放开再问四条边和正中最上面是谁，盖在它上面的东西就现形了。
// 取样点离角 16px：圆角外那一小块本来就不属于它。
element.style.pointerEvents = 'auto';
const [midX, midY] = [box.left + box.width / 2, box.top + box.height / 2];
const covered = [[box.left + 16, box.top + 2], [box.right - 16, box.top + 2], [box.left + 16, box.bottom - 2],
[box.right - 16, box.bottom - 2], [box.left + 2, midY], [box.right - 2, midY], [midX, midY]]
.map(([x, y]) => document.elementFromPoint(x!, y!))
.filter((hit) => !hit || !element.contains(hit)).map((hit) => hit?.className || 'null');
element.style.pointerEvents = '';
return { inView: box.left >= 0 && box.right <= innerWidth && box.top >= 0 && box.bottom <= innerHeight,
clippedBy, covered, below: box.top >= document.querySelector('[data-entry-feed]')!.getBoundingClientRect().bottom };
});
assert.ok(placement.inView, '说明浮层越出了视口');
assert.deepEqual(placement.clippedBy, [], '说明浮层被外层容器裁掉了一截');
assert.deepEqual(placement.covered, [], '说明浮层被别的东西盖住了');
assert.ok(placement.below, '视口下方放得下时说明浮层应该在图标下面');
const page_ = await layout(page);
assert.ok(page_.scrollWidth <= page_.viewportWidth, '说明浮层把页面撑出了横向滚动');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
}
// 1000px 窗口侧栏展开时内容区只剩七百来像素：三栏的判据量的是内容区，这一档要排成两层，
// 身份那一栏不能被资料表挤到只剩一个字宽。
for (const [viewport, stacked] of [[DESKTOP, false], [{ name: 'wide', width: 1440, height: 900, mobile: false }, false],
[{ name: 'mid', width: 1000, height: 900, mobile: false }, true], [MOBILE, true]] as const) {
it(`女优页头：宽屏资料表在身份信息右侧隔一道竖线，窄屏排到下面隔一道横线，整张卡不横向溢出（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openProfiledPerformer(browser, viewport);
try {
const geometry = await heroGeometry(opened.page);
assert.deepEqual(geometry.labels, ['生日', '身材', '出道', '生涯', '标签'], '资料表不是那五项');
assert.ok(geometry.facts && geometry.identity && geometry.hero, '页头缺了资料表');
assert.ok(geometry.identity.right - geometry.identity.left >= 240, '身份那一栏被挤窄了');
if (stacked) {
assert.ok(geometry.facts.top >= geometry.identity.bottom - 0.5, '窄屏下资料表没有排到身份信息下面');
assert.deepEqual(geometry.rule, { left: '0px', top: '1px' }, '窄屏下资料表该用横线和身份信息隔开');
} else {
assert.ok(geometry.facts.left >= geometry.identity.right - 0.5, '宽屏下资料表没有排在身份信息右侧');
assert.deepEqual(geometry.rule, { left: '1px', top: '0px' }, '宽屏下资料表该用竖线和身份信息隔开');
}
assert.ok(geometry.facts.right <= geometry.hero.right + 0.5, '资料表越出了资料卡');
assert.equal(geometry.heroScrolls, false, '资料卡里有东西被横向裁掉');
const debut = await opened.page.locator('[data-entity-facts] dd[title]').evaluate((dd) => ({
title: dd.getAttribute('title'), wrap: getComputedStyle(dd).whiteSpace,
cut: getComputedStyle(dd).textOverflow, clipped: dd.scrollWidth > dd.clientWidth,
lines: Math.round(dd.getBoundingClientRect().height / parseFloat(getComputedStyle(dd).lineHeight)),
}));
assert.equal(debut.title, PROFILED.profile.debut_title, '出道那一格的 title 没给全名');
assert.deepEqual([debut.wrap, debut.cut, debut.lines], ['nowrap', 'ellipsis', 1], '出道片名没有单行截断');
const page_ = await layout(opened.page);
assert.ok(page_.scrollWidth <= page_.viewportWidth, `页头把页面撑出了横向滚动：${page_.offenders.join('，')}`);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
}
for (const viewport of [DESKTOP, MOBILE]) {
it(`公司资料页显示公司与品牌事实且长地址可折行（${viewport.name}）`, { timeout: 60_000 }, async () => {
const fact = (value: string) => ({ value, source_url: 'https://company.example/about' });
const opened = await openProfiledPerformer(browser, viewport, 'light', {
kind: 'studio', canonical_name: 'Company', profile: undefined, agency: undefined,
company_profile: { legal_name: fact('Example Company, LLC'), founded: fact('2002-05'),
launched: fact('2016'), operator: fact('General Media Systems, LLC'),
location: fact('LongOfficeAddressWithoutSpaces'.repeat(5)) },
});
try {
await opened.page.goto(new URL('/studios/Company', opened.page.url()).href, { waitUntil: 'load' });
await opened.page.locator('[data-entity-facts]').waitFor();
await settle(opened.page);
const geometry = await heroGeometry(opened.page);
assert.deepEqual(geometry.labels, ['公司名称', '公司成立', '品牌启动', '所在地', '运营公司']);
assert.equal(geometry.heroScrolls, false);
assert.ok(geometry.hero && geometry.facts && geometry.facts.right <= geometry.hero.right + 1);
assert.equal(await opened.page.locator('[data-entity-facts] [title]').count(), 0);
const page_ = await layout(opened.page);
assert.ok(page_.scrollWidth <= page_.viewportWidth);
assert.deepEqual(opened.problems, []);
} finally { await opened.close(); }
});
}
it('女优页头名字下面一行：视频数、事务所与读音加前三个别名，外链一律 36px 纯图标方块', { timeout: 60_000 }, async () => {
const opened = await openProfiledPerformer(browser, DESKTOP);
try {
const page = opened.page;
const line = await page.locator('[data-entity-alias]').evaluate((alias) => ({
glyphs: [...alias.querySelectorAll(':scope > [data-meta-item] > svg use')].map((use) => use.getAttribute('href')),
names: [...alias.querySelectorAll('[data-alias-names] > span')].map((span) => span.textContent!.trim()),
more: alias.querySelector('[data-hero-more="alias"]')?.textContent?.trim() ?? '',
agency: alias.querySelector('a[data-agency]')?.textContent?.trim() ?? '',
}));
assert.deepEqual(line.glyphs, ['#i-film', '#i-briefcase', '#i-id-card'], '名字那一行的三项不是视频、事务所、别名');
assert.deepEqual(line.names, ['しのだゆう', '篠崎ゆう子', '高木早希', '橋本真紀'], '读音没有排在别名最前，或别名不是前三个');
assert.equal(line.more, '+4', '「+N」数的不是剩下那几个别名');
assert.equal(line.agency, 'New Actor eXperience');
const links = await page.locator('[data-entity-links] a').evaluateAll((anchors) => anchors.map((a) => {
const box = a.getBoundingClientRect();
return { size: `${Math.round(box.width)}x${Math.round(box.height)}`, kind: a.getAttribute('data-link'), title: a.getAttribute('title'),
name: a.getAttribute('aria-label') ?? '', visibleText: a.querySelector('[data-link-label]') !== null };
}));
assert.equal(links.length, 3);
for (const link of links) {
assert.deepEqual([link.size, link.kind, link.visibleText], ['36x36', 'icon', false], `${link.title} 不是纯图标方块`);
assert.equal(link.name, link.title, `${link.title} 给读屏的名字和悬停提示不一致`);
}
assert.deepEqual(links.map((link) => link.title), ['みんなのAV', 'New Actor eXperience 官方资料', 'X @shinoda_yu']);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
for (const viewport of [DESKTOP, MOBILE]) {
it(`别名的「+N」浮层进顶层按名义分组：悬停、聚焦都出，不被资料卡裁掉，Escape 收起（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openProfiledPerformer(browser, viewport);
try {
const page = opened.page;
const more = page.locator('[data-hero-more="alias"]');
const pop = page.locator('#entityAliasPop');
assert.equal(await pop.isVisible(), false);
await more.hover();
await pop.waitFor({ state: 'visible', timeout: 5_000 });
assert.equal(await more.getAttribute('aria-expanded'), 'true');
const shown = await pop.evaluate((element) => {
const box = element.getBoundingClientRect();
return {
topLayer: element.matches(':popover-open'),
inView: box.left >= 0 && box.right <= innerWidth && box.top >= 0 && box.bottom <= innerHeight,
title: element.querySelector('[data-hero-pop-head]')?.textContent?.trim(),
groups: [...element.querySelectorAll('dt')].map((dt) => dt.textContent!.trim()),
face: getComputedStyle(element).backgroundColor,
shadow: getComputedStyle(element).boxShadow,
};
});
assert.equal(shown.shadow, await popmenuShadow(page), '别名浮层的落影和 .popmenu 不是同一副');
assert.equal(shown.topLayer, true, '别名浮层没进顶层，会被资料卡的 overflow:hidden 裁掉');
assert.ok(shown.inView, '别名浮层越出了视口');
assert.equal(shown.title, '7 个别名');
assert.deepEqual(shown.groups, ['旧名义', '舞ワイフ', 'ラグジュTV', '其它']);
assert.notEqual(shown.face, 'rgba(0, 0, 0, 0)', '别名浮层没有底色');
// 指针从按钮挪到浮层上读名字，浮层不能在半路收起。
const box = (await pop.boundingBox())!;
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, { steps: 4 });
await page.waitForTimeout(300);
assert.equal(await pop.isVisible(), true, '指针移到浮层上它就收起了');
await page.mouse.move(1, 1);
await pop.waitFor({ state: 'hidden', timeout: 5_000 });
await more.focus();
await page.keyboard.press('Tab');
await page.keyboard.press('Shift+Tab');
await pop.waitFor({ state: 'visible', timeout: 5_000 });
await page.keyboard.press('Escape');
assert.equal(await pop.isVisible(), false, 'Escape 收不起别名浮层');
const page_ = await layout(page);
assert.ok(page_.scrollWidth <= page_.viewportWidth, '别名浮层把页面撑出了横向滚动');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
}
// 名字右边那枚按钮往左开的话，260px 的菜单越过名字压在头像上（用户报过）。
for (const viewport of [DESKTOP, MOBILE]) {
it(`名字与别名菜单从按钮左缘往右开，不盖住页头头像（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openProfiledPerformer(browser, viewport);
try {
const page = opened.page;
await page.locator('[data-namepick-toggle]').click();
await page.locator('[data-namepick-menu]').waitFor({ state: 'visible', timeout: 5_000 });
const box = await page.evaluate(() => {
const rect = (selector: string) => {
const b = document.querySelector(selector)!.getBoundingClientRect();
return { left: b.left, right: b.right, top: b.top, bottom: b.bottom };
};
return { menu: rect('[data-namepick-menu]'), portrait: rect('[data-entity-portrait]'), toggle: rect('[data-namepick-toggle]') };
});
const overlaps = box.menu.left < box.portrait.right && box.menu.right > box.portrait.left
&& box.menu.top < box.portrait.bottom && box.menu.bottom > box.portrait.top;
assert.equal(overlaps, false, `名字菜单盖住了头像：${JSON.stringify(box)}`);
assert.ok(box.menu.left >= 0 && box.menu.right <= viewport.width, '名字菜单越出了视口');
if (!viewport.mobile) assert.ok(Math.abs(box.menu.left - box.toggle.left) < 1, '宽屏下菜单没有对齐按钮左缘');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
}
});