frontend/e2e/design-people.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 } from 'playwright-core';
import { expectBody, layout, requiredEnv, settle, visit, VIEWPORTS } from './harness.ts';
import {
DESKTOP, MOBILE, tokenColor, PIXEL, TASTE_FACE, WIDE, openCatalog, openCatalogFixture, openFollowManage,
openPerformer, openPhotoWall, photoWallFaces, PROFILED, openProfiledPerformer, popmenuShadow, SUGGEST,
stubSuggest, installDesignBrowser,
} from './design-fixture.ts';
describe('设计决定：人物与厂牌资料页', () => {
let browser: Browser;
installDesignBrowser((next) => { browser = next; });
it('取景前的懒加载头像保留可见性，加载后显示人像', { timeout: 60_000 }, async () => {
const opened = await openProfiledPerformer(browser, DESKTOP);
try {
const page = opened.page;
let release!: () => void;
const pending = new Promise<void>(resolve => { release = resolve; });
await page.route('**/avatar-loading-probe', async route => {
await pending;
await route.fulfill({ contentType: 'image/svg+xml', body: '<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><rect width="128" height="128" fill="green"/></svg>' });
});
const state = await page.evaluate(() => {
const ring = document.createElement('span');
ring.style.cssText = 'position:fixed;top:20px;left:20px;width:80px;height:80px';
ring.innerHTML = '<img id="avatar-loading-probe" loading="lazy" width="128" height="128" data-facebox="0.5 0.5 60 128 128" src="/avatar-loading-probe">';
document.body.append(ring);
const image = ring.querySelector('img')!;
return { visibility: getComputedStyle(image).visibility, opacity: getComputedStyle(image).opacity };
});
release();
assert.deepEqual(state, { visibility: 'visible', opacity: '0' });
await page.waitForFunction(() => {
const image = document.querySelector<HTMLImageElement>('#avatar-loading-probe')!;
return image.naturalWidth > 0 && getComputedStyle(image).opacity === '1';
});
} finally {
await opened.close();
}
});
for (const [viewport, split] of [[WIDE, true], [MOBILE, false]] as const) {
it(`搜索下拉按种类分页签；宽屏分两栏、人名带头像与近作、视频排成封面格，窄屏一栏（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await visit(browser, '/', viewport);
try {
const page = opened.page;
const kinds = await stubSuggest(page);
await expectBody(page, '/', [page.locator('#grid [data-media-card][data-id]').first()]);
await settle(page);
if (viewport.mobile) await page.locator('#searchBtn').click();
await page.locator('#q').fill(SUGGEST.q);
const menu = page.locator('#searchMenu');
await menu.locator('[data-search-option="person"]').first().waitFor({ state: 'visible', timeout: 5_000 });
const shown = await page.evaluate(() => {
const menuBox = document.querySelector('#searchMenu')!.getBoundingClientRect();
const results = document.querySelector<HTMLElement>('#searchMenu [data-search-results]')!;
const columns = [...results.querySelectorAll(':scope > [data-search-col]')];
const person = document.querySelector('#searchMenu [data-search-option="person"]')!;
/* 命中的别名与作品数是这一行的注脚：字号小一档、字色退一档，作品数靠右。 */
const footnote = (selector: string) => {
const note = document.querySelector<HTMLElement>(`#searchMenu ${selector}`)!;
const row = note.closest('[data-search-option]')!;
const name = note.previousElementSibling!;
const [noteStyle, nameStyle] = [getComputedStyle(note), getComputedStyle(name)];
return {
smaller: parseFloat(noteStyle.fontSize) < parseFloat(nameStyle.fontSize),
quieter: noteStyle.color !== nameStyle.color,
trailing: Math.round(row.getBoundingClientRect().right - note.getBoundingClientRect().right),
};
};
return {
matched: footnote('[data-search-matched]'),
count: footnote('[data-search-n]'),
radius: getComputedStyle(person).borderRadius === getComputedStyle(document.documentElement).getPropertyValue('--control-radius').trim(),
tabs: [...document.querySelectorAll('#searchMenu [role="tab"]')].map((tab) => tab.textContent!.trim()),
tracks: getComputedStyle(results).gridTemplateColumns.split(' ').filter((track) => track !== 'none').length,
divider: getComputedStyle(results, '::before').content,
dividerHeight: parseFloat(getComputedStyle(results, '::before').height),
resultsHeight: results.getBoundingClientRect().height,
right: columns.at(-1)!.querySelector('[data-search-group]')?.getAttribute('data-kind'),
videoGrid: getComputedStyle(document.querySelector('#searchMenu [data-search-group][data-kind="asset"] [data-search-items]')!).display,
peeks: getComputedStyle(person.querySelector('[data-search-peeks]')!).display,
peekCount: person.querySelectorAll('[data-open-work]').length,
sub: person.querySelector('[data-search-sub]')!.textContent,
face: person.querySelector('[data-search-face] img')?.getAttribute('src'),
inView: menuBox.left >= 0 && menuBox.right <= innerWidth,
edges: [Math.round(menuBox.left), Math.round(innerWidth - menuBox.right)],
};
});
assert.deepEqual(shown.tabs, ['全部', '女优2', '厂牌1', '视频12'], '页签不是「全部」加各类命中数');
assert.equal(shown.tracks, split ? 2 : 0, split ? '宽屏下拉没有分两栏' : '窄屏下拉不该分栏');
assert.equal(shown.divider, split ? '""' : 'none', split ? '宽屏两栏之间没有分隔线' : '窄屏一栏不该有分隔线');
if (split) {
assert.ok(Math.abs(shown.dividerHeight - shown.resultsHeight) <= 1,
`分隔线高 ${shown.dividerHeight}px，两栏高 ${shown.resultsHeight}px`);
}
assert.equal(shown.right, 'asset', '视频不在最后一栏');
assert.equal(shown.videoGrid, split ? 'grid' : 'block', split ? '宽屏视频没排成封面格' : '窄屏视频该一行一部');
assert.equal(shown.peeks, split ? 'flex' : 'none', split ? '宽屏人名一行没摆近作' : '窄屏人名一行不摆近作');
assert.equal(shown.peekCount, 4);
assert.equal(shown.sub, '128 个视频 · Capsule Agency');
assert.equal(shown.face, '/entity-image?kind=performer&id=90301&thumb=1');
for (const [name, note] of [['别名', shown.matched], ['作品数', shown.count]] as const) {
assert.ok(note.smaller && note.quieter, `${name}没有退成注脚：${JSON.stringify(note)}`);
}
assert.equal(shown.count.trailing, 10, '作品数没有靠右贴着行的内边距');
assert.ok(shown.radius, '补全行的圆角不是 --control-radius');
assert.ok(shown.inView, '下拉栏越出了视口');
// 窄屏下拉栏盖过返回键那一列，和顶栏两侧一样各留 8，不缩进到搜索框底下。
if (viewport.mobile) assert.deepEqual(shown.edges, [8, 8], '窄屏下拉栏两侧留白不是 8');
const page_ = await layout(page);
assert.ok(page_.scrollWidth <= page_.viewportWidth, `下拉把页面撑出了横向滚动：${page_.offenders.join('，')}`);
await menu.getByRole('tab', { name: /^女优/ }).click();
await page.waitForFunction(() => document.querySelectorAll('#searchMenu [data-search-group][data-kind]').length === 1);
assert.equal(await menu.isVisible(), true, '点页签把下拉栏收掉了');
assert.ok(kinds.includes('performer'), '选了一类没有按这一类去拉满');
assert.equal(await menu.getByRole('tab', { name: /^女优/ }).getAttribute('aria-selected'), 'true');
// 人名那一行点开的是资料页，不是按名字再搜一遍。
await page.keyboard.press('ArrowDown');
await page.keyboard.press('Enter');
await page.waitForURL('**/performers/90301');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
}
it('只看视频时封面格按列均分铺满整栏，每格有宽度上限', { timeout: 60_000 }, async () => {
const opened = await visit(browser, '/', WIDE);
try {
const page = opened.page;
await stubSuggest(page);
await expectBody(page, '/', [page.locator('article[data-media-card][data-id]').first()]);
await settle(page);
await page.locator('#q').fill(SUGGEST.q);
const menu = page.locator('#searchMenu');
await menu.locator('[data-search-option="person"]').first().waitFor({ state: 'visible', timeout: 5_000 });
await menu.getByRole('tab', { name: /^视频/ }).click();
await page.waitForFunction(() => document.querySelectorAll('#searchMenu [data-search-group][data-kind]').length === 1);
const grid = await page.evaluate(() => {
const items = document.querySelector('#searchMenu [data-search-group][data-kind="asset"] [data-search-items]')!;
const box = items.getBoundingClientRect();
const cards = [...items.querySelectorAll('[data-search-option="work"]')].map((card) => card.getBoundingClientRect());
return {
rows: new Set(cards.map((card) => Math.round(card.top))).size,
widths: cards.map((card) => Math.round(card.width)),
slack: Math.round(box.right - cards.at(-1)!.right),
};
});
assert.equal(grid.rows, 1, '五部视频没排在同一行');
assert.ok(grid.slack <= 1, `封面格右侧空出 ${grid.slack}px`);
assert.ok(grid.widths.every((width) => width >= 96 && width <= 242), `封面宽度越出 96～242：${grid.widths.join('、')}`);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('资料页照片墙：1280 宽小图 4 列、大图 2 列，手机 2 列；固定版式是方格，瀑布流按列填；格子是一块等图的空底', { timeout: 90_000 }, async () => {
const opened = await openPhotoWall(browser);
try {
const { page } = opened;
// 默认瀑布流、小图。
assert.deepEqual(await photoWallFaces(page), { display: 'block', columns: 4, gap: '10px', square: true });
const cell = await page.evaluate(() => {
const node = document.querySelector<HTMLElement>('[data-local-wall] [data-photo-cell]')!;
const style = getComputedStyle(node);
const head = document.querySelector('[data-photo-group]')!;
return {
radius: style.borderRadius, cursor: style.cursor, sunk: style.backgroundColor,
token: getComputedStyle(document.documentElement).getPropertyValue('--surface-radius').trim(),
alt: getComputedStyle(node.querySelector('img')!).color,
headTop: getComputedStyle(head).marginTop,
rows: [head, head.querySelector('b')!].map((node) => getComputedStyle(node).lineHeight),
code: getComputedStyle(head.querySelector('b')!).fontFamily,
meta: getComputedStyle(head.querySelector('[data-photo-group-meta]')!).marginLeft !== '0px',
};
});
assert.equal(cell.radius, cell.token, '照片格的圆角是 --surface-radius');
assert.equal(cell.cursor, 'zoom-in');
assert.equal(cell.alt, 'rgba(0, 0, 0, 0)', '等图时 alt 文件名不画出来');
assert.notEqual(cell.sunk, 'rgba(0, 0, 0, 0)', '格子自带一块沉底色');
assert.equal(cell.headTop, '28px', '每段上方留出段距');
assert.deepEqual(cell.rows, ['20px', '20px'], '段头一行 20px，番号不按自己的字号撑高');
assert.match(cell.code, /Cascadia Mono/, '段头番号是等宽字');
assert.ok(cell.meta, '来源与张数靠右');
assert.equal(await page.locator('#index [data-entity-more]').evaluate((node) => {
const style = getComputedStyle(node);
return `${style.height} ${style.borderRadius} ${style.fontSize} ${style.fontWeight}`;
}), '36px 10px 14px 500', '载入更多是 36px 高、10px 圆角的 secondary 按钮');
await page.locator('[data-entity-layout][aria-label="图片布局"] label:has(input[value="fixed"])').click();
await page.waitForFunction(() => document.querySelector('[data-local-wall]')?.getAttribute('data-layout') === 'fixed');
assert.deepEqual(await photoWallFaces(page), { display: 'grid', columns: 4, gap: '10px', square: true });
// 顶栏那枚大小键在照片档里换的是照片的大小档，一次请求都不发。
await page.locator('#density').click();
await page.waitForFunction(() => document.querySelector('[data-local-wall]')?.getAttribute('data-size') === 'big');
assert.deepEqual(await photoWallFaces(page), { display: 'grid', columns: 2, gap: '10px', square: true });
assert.equal(await page.locator('#density').getAttribute('title'), '当前：大图');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
const phone = await openPhotoWall(browser, MOBILE);
try {
const { page } = phone;
assert.deepEqual(await photoWallFaces(page), { display: 'block', columns: 2, gap: '10px', square: true });
await page.locator('[data-entity-layout][aria-label="图片布局"] label:has(input[value="fixed"])').click();
await page.waitForFunction(() => document.querySelector('[data-local-wall]')?.getAttribute('data-layout') === 'fixed');
assert.deepEqual(await photoWallFaces(page), { display: 'grid', columns: 2, gap: '8px', square: true });
assert.deepEqual(phone.problems, []);
} finally {
await phone.close();
}
});
it('空搜索的头像与封面分栏，搜索记录排在左栏最下面，分隔线覆盖两栏', { timeout: 60_000 }, async () => {
const opened = await visit(browser, '/', WIDE);
try {
const page = opened.page;
const history = Array.from({ length: 10 }, (_, at) => `搜索记录 ${at + 1}`);
await page.route(/\/api\/search-history\?/, (route) => route.fulfill({ json: { items: history } }));
await page.reload({ waitUntil: 'load' });
await expectBody(page, '/', [page.locator('article[data-media-card][data-id]').first()]);
await settle(page);
await page.locator('#q').click();
await page.locator('#searchMenu [data-search-recommendations] [data-search-results][data-split]').waitFor({ state: 'visible', timeout: 5_000 });
// 推荐是预取好的、打开就在；搜索记录随后才到，排进左栏末尾。
await page.waitForFunction(() => [...document.querySelectorAll('#searchMenu [data-search-col]:first-child > [data-search-group] > h3')]
.some((title) => title.textContent === '搜索记录'), undefined, { timeout: 5_000 });
const split = await page.evaluate(() => {
const results = document.querySelector('#searchMenu [data-search-results]')!;
const [left, right] = [...results.querySelectorAll(':scope > [data-search-col]')].map((col) => col.getBoundingClientRect());
const box = results.getBoundingClientRect();
const line = getComputedStyle(results, '::before');
// 搜索记录比推荐晚到，排在左栏末尾，到了也不把上面的往下推。
const groups = [...results.querySelectorAll(':scope > [data-search-col]:first-child > [data-search-group]')];
const history = groups.at(-1)!;
return {
box: box.height, leftWidth: left.width, rightWidth: right.width, line: parseFloat(line.height),
historyLabel: history.querySelector('h3')?.textContent,
historyAfter: history.getBoundingClientRect().top >= groups.at(-2)!.getBoundingClientRect().bottom,
historyCount: history.querySelectorAll('[data-search-option]').length,
offset: parseFloat(line.left) + parseFloat(line.width) / 2 - ((left.right + right.left) / 2 - box.left),
};
});
assert.ok(split.rightWidth > split.leftWidth, '封面栏应比头像栏宽');
assert.equal(split.historyLabel, '搜索记录', '左栏最后一组应是搜索记录');
assert.equal(split.historyAfter, true, '搜索记录应排在左栏推荐之后');
assert.equal(split.historyCount, 10);
assert.ok(Math.abs(split.line - split.box) <= 1, `分隔线高 ${split.line}px，两栏高 ${split.box}px`);
assert.ok(Math.abs(split.offset) <= 1, `分隔线偏离两栏之间的缝 ${split.offset}px`);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('资料表的标签只列前四个，余下的收进「+N」，浮层进顶层列全部标签', { timeout: 60_000 }, async () => {
const opened = await openProfiledPerformer(browser, DESKTOP);
try {
const page = opened.page;
const cell = await page.locator('[data-entity-facts] dd[data-fact="tags"]').evaluate((dd) => ({
shown: [...dd.querySelectorAll(':scope > [data-fact-tag]')].map((tag) => tag.textContent!.trim()),
more: dd.querySelector(':scope > [data-hero-more="fact"]')?.textContent?.trim() ?? '',
}));
assert.deepEqual(cell.shown, PROFILED.profile.tags.slice(0, 4), '标签那一格不是前四个');
assert.equal(cell.more, '+5', '「+N」数的不是剩下那几个标签');
const pop = page.locator('#entityTagPop');
assert.equal(await pop.isVisible(), false);
await page.locator('[data-hero-more="fact"]').hover();
await pop.waitFor({ state: 'visible', timeout: 5_000 });
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(),
tags: [...element.querySelectorAll('[data-fact-tag]')].map((tag) => tag.textContent!.trim()),
};
});
assert.equal(shown.topLayer, true, '标签浮层没进顶层，会被资料卡的 overflow:hidden 裁掉');
assert.ok(shown.inView, '标签浮层越出了视口');
assert.equal(shown.title, '9 个标签');
assert.deepEqual(shown.tags, PROFILED.profile.tags);
await page.mouse.move(1, 1);
await pop.waitFor({ state: 'hidden', timeout: 5_000 });
// 点一下钉住：指针离开也不收，Escape 才收。
await page.locator('[data-hero-more="fact"]').click();
await page.mouse.move(1, 1);
await page.waitForTimeout(300);
assert.equal(await pop.isVisible(), true, '点按钉住的标签浮层指针一走就收了');
await page.keyboard.press('Escape');
assert.equal(await pop.isVisible(), false, 'Escape 收不起标签浮层');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('换头像的加号量在圆框上：整行比圆框高时也贴着圆框右下角', { timeout: 60_000 }, async () => {
const opened = await openProfiledPerformer(browser, { name: 'wide', width: 1440, height: 900, mobile: false });
try {
const page = opened.page;
const button = page.locator('[data-entity-portrait-wrap] [data-avatar-picker] button');
await button.waitFor({ timeout: 15_000 });
// 行有多高看她有多少资料、别名那一行折不折；这里直接把身份列撑高，量的是加号跟不跟圆框。
await page.addStyleTag({ content: '[data-entity-identity]{padding-block:40px}' });
const box = await page.evaluate(() => {
const rect = (element: Element) => element.getBoundingClientRect();
const wrap = rect(document.querySelector('[data-entity-portrait-wrap]')!);
const circle = rect(document.querySelector('[data-entity-portrait]')!);
const plus = rect(document.querySelector('[data-entity-portrait-wrap] [data-avatar-picker] button')!);
return { wrap: wrap.height, circle: { right: circle.right, bottom: circle.bottom, height: circle.height },
plus: { right: plus.right, bottom: plus.bottom } };
});
assert.ok(box.wrap > box.circle.height + 8, `这一行没有比圆框高，用例量不出偏移（行 ${box.wrap}，圆框 ${box.circle.height}）`);
// Tailwind 的 `right-1 bottom-1`：按钮离圆框外框右、下各 4px。
assert.ok(Math.abs(box.circle.bottom - box.plus.bottom - 4) < 1, `加号没有贴着圆框底边：${JSON.stringify(box)}`);
assert.ok(Math.abs(box.circle.right - box.plus.right - 4) < 1, `加号没有贴着圆框右边：${JSON.stringify(box)}`);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('女优页头深色主题：资料表与别名浮层跟着主题取墨色和浮层底', { timeout: 60_000 }, async () => {
const opened = await openProfiledPerformer(browser, DESKTOP, 'dark');
try {
const page = opened.page;
const ink = await tokenColor(page, '#main', '--ink');
const muted = await tokenColor(page, '#main', '--muted');
const ground = await tokenColor(page, '#main', '--ground');
const facts = await page.locator('[data-entity-facts]').evaluate((dl) => ({
dd: getComputedStyle(dl.querySelector('dd')!).color, dt: getComputedStyle(dl.querySelector('dt')!).color,
}));
assert.equal(facts.dd, ink, '深色下资料表的值不是墨色');
assert.equal(facts.dt, muted, '深色下资料表的项名不是次级字色');
await page.locator('[data-hero-more="alias"]').hover();
const pop = page.locator('#entityAliasPop');
await pop.waitFor({ state: 'visible', timeout: 5_000 });
const { face, shadow } = await pop.evaluate((element) => {
const style = getComputedStyle(element);
return { face: style.backgroundColor, shadow: style.boxShadow };
});
assert.notEqual(face, 'rgba(0, 0, 0, 0)');
assert.notEqual(face, 'rgb(255, 255, 255)', '深色下别名浮层还是白底');
assert.equal(shadow, await popmenuShadow(page), '深色下别名浮层的落影和 .popmenu 不是同一副');
assert.notEqual(ground, 'rgb(255, 255, 255)', '主题没有切到深色');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('详情出演区每一组的标题与头像共用一条左边缘，名字在头像正下方居中', { timeout: 60_000 }, async () => {
const opened = await visit(browser, '/', DESKTOP);
try {
const page = opened.page;
/* 演示库的作品没有女优与厂牌，身份数据按 `/api/item` 的 `entity_refs` 形状换进去；
名字比头像宽的那种最容易看出错位，所以女优名取四个字。 */
await page.route(/\/api\/item\?/, async (route) => {
const payload = await (await route.fetch()).json();
Object.assign(payload, {
is_jav: true, performers: ['凉森玲梦'], studio: 'Prestige', creator: '',
entity_refs: {
creator: [], series: [],
performer: [{ id: 90_101, name: '凉森玲梦', has_image: true }],
studio: [{ id: 90_102, name: 'Prestige', has_image: false, has_logo: true }],
},
});
await route.fulfill({ json: payload });
});
const square = { contentType: 'image/svg+xml',
body: '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect width="200" height="200" fill="#888"/></svg>' };
await page.route(/\/entity-image\?/, (route) => route.fulfill(square));
await page.route(/\/logo\?/, (route) => route.fulfill(square));
await page.goto(new URL(`/assets/${requiredEnv('PEACH_E2E_ITEM')}`, page.url()).href, { waitUntil: 'load' });
await page.locator('[data-item-identity] [data-id-group="studio"] [data-id-name]').waitFor({ timeout: 15_000 });
const edges = await page.evaluate(() => Object.fromEntries(
['performer', 'studio'].map((kind) => {
const group = document.querySelector(`[data-item-identity] [data-id-group="${kind}"]`)!;
const name = document.createRange();
name.selectNodeContents(group.querySelector('[data-id-name]')!);
const face = group.querySelector('[data-id-face]')!.getBoundingClientRect();
const text = name.getBoundingClientRect();
return [kind, {
label: group.querySelector('[data-id-label]')!.getBoundingClientRect().left,
face: face.left, faceCenter: face.left + face.width / 2,
nameCenter: text.left + text.width / 2,
}];
})));
for (const [kind, edge] of Object.entries(edges)) {
assert.ok(Math.abs(edge.face - edge.label) < 0.5, `${kind} 组头像左缘 ${edge.face} 不在标题左缘 ${edge.label}`);
assert.ok(Math.abs(edge.nameCenter - edge.faceCenter) < 0.5,
`${kind} 组名字中线 ${edge.nameCenter} 不在头像中线 ${edge.faceCenter}`);
}
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('人物页同台艺人的头像悬停和首页顶栏女优头像同一副：抬整格填充、不描圈', { timeout: 60_000 }, async () => {
const opened = await openPerformer(browser, DESKTOP);
try {
const page = opened.page;
const person = page.locator('[data-entity-foot] [data-related-performer]').first();
const face = () => person.evaluate((element) => {
const style = getComputedStyle(element), ring = getComputedStyle(element.querySelector('[data-hero-ring]')!);
return { fill: style.backgroundColor, ink: style.color, radius: style.borderRadius, padding: style.padding,
width: style.width, ring: ring.boxShadow, size: ring.width };
});
await page.mouse.move(0, 0);
const rest = await face();
await person.hover();
const hovered = await face();
// 首页那一格（board.css「首页顶部两排」）：76px 宽、6/4px 内边距、12px 圆角，悬停铺
// primary-hover、字换主文字色，48px 圆头像不另描圈。
const home = {
fill: await tokenColor(page, '#main', '--color-background-primary-hover'),
ink: await tokenColor(page, '#main', '--color-text-primary'),
};
assert.equal(rest.fill, 'rgba(0, 0, 0, 0)', '没悬停就垫了底');
assert.deepEqual({ radius: hovered.radius, padding: hovered.padding, width: hovered.width, size: hovered.size },
{ radius: '12px', padding: '6px 4px', width: '76px', size: '48px' }, '同台艺人那一格和首页头像格不是同一副几何');
assert.equal(hovered.fill, home.fill, '悬停没有铺首页那一档填充');
assert.equal(hovered.ink.replace(/\s/g, ''), home.ink.replace(/\s/g, ''), '悬停没有换成主文字色');
assert.equal(hovered.ring, 'none', '悬停还在给圆头像描圈');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('资料卡大位与同台艺人的头像按人脸框放大：图保持原比例、盖满圆框，不被预检的 max-width 夹住', { timeout: 60_000 }, async () => {
const name = '七沢みあ';
const opened = await visit(browser, '/', DESKTOP);
try {
const page = opened.page;
const focus = { box: TASTE_FACE };
await 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: [], links: [], metadata: {}, entry_links: [],
related_performers: [{ id: 90_002, k: '共演者', n: 1, rep: null, has_image: true, has_avatar: false,
avatar_focus: focus }],
has_image: true, has_avatar: false, avatar_focus: focus, representative_asset_id: null,
} }));
await page.route(/\/entity-image\?/, (route) => route.fulfill({
contentType: 'image/svg+xml',
body: `<svg xmlns="http://www.w3.org/2000/svg" width="${TASTE_FACE.imgW}" height="${TASTE_FACE.imgH}">`
+ `<rect width="${TASTE_FACE.imgW}" height="${TASTE_FACE.imgH}" fill="#888"/></svg>`,
}));
await page.goto(new URL(`/performers/${encodeURIComponent(name)}`, page.url()).href, { waitUntil: 'load' });
for (const [where, selector] of [['大位', '[data-entity-portrait] > img[data-facebox]'],
['同台艺人', '[data-hero-ring] > img[data-facebox]']] as const) {
const img = page.locator(selector).first();
await img.waitFor({ state: 'attached', timeout: 15_000 });
// 放大是图加载后 `avatarFrame` 写进内联 style 的；等到那一步落地再量。
await page.waitForFunction((element) => element instanceof HTMLImageElement
&& element.complete && element.naturalWidth > 0 && element.style.width !== '',
await img.elementHandle(), { timeout: 15_000 });
const frame = await img.evaluate((element) => {
const ring = element.parentElement!.getBoundingClientRect();
const box = element.getBoundingClientRect();
return {
maxWidth: getComputedStyle(element).maxWidth, maxHeight: getComputedStyle(element).maxHeight,
ring: ring.width, width: box.width, aspect: box.width / box.height,
gaps: [box.left - ring.left, ring.right - box.right, box.top - ring.top, ring.bottom - box.bottom],
initial: getComputedStyle(element.parentElement!.querySelector('span')!).display,
};
});
assert.deepEqual([frame.maxWidth, frame.maxHeight], ['none', 'none'], `${where}的图被预检的 max-width 夹住`);
assert.ok(frame.width > frame.ring, `${where}没有按人脸框放大：图宽 ${frame.width}px，圆框 ${frame.ring}px`);
assert.ok(Math.abs(frame.aspect - TASTE_FACE.imgW / TASTE_FACE.imgH) < .02, `${where}的图宽高比 ${frame.aspect}，被压扁了`);
assert.ok(frame.gaps.every((gap) => gap <= .5), `${where}的图没盖满圆框：${frame.gaps.join('、')}`);
if (where === '大位') assert.equal(frame.initial, 'none', '大位有图时首字母没有让位');
}
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
for (const viewport of [DESKTOP, MOBILE]) {
it(`资料卡外链的圆盘不垫底、社媒字形铺满圆盘；手机上那一排不换行、横滑，滚动层顶到卡沿（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openProfiledPerformer(browser, viewport);
try {
const row = await opened.page.locator('[data-entity-links]').evaluate((element) => {
const style = getComputedStyle(element);
const card = element.closest('[data-entity-card]')!.getBoundingClientRect();
const box = element.getBoundingClientRect();
const brand = element.querySelector('[data-link-icon="brand"]')!;
const glyph = brand.querySelector('svg')!.getBoundingClientRect(), plate = brand.getBoundingClientRect();
return {
wrap: style.flexWrap, overflowX: style.overflowX, justify: style.justifyContent,
edges: [box.left - card.left, card.right - box.right],
discs: [...element.querySelectorAll('[data-link-icon]')].map((disc) => getComputedStyle(disc).backgroundColor),
glyph: [Math.round(glyph.width), Math.round(glyph.height)], plate: [Math.round(plate.width), Math.round(plate.height)],
};
});
// 垫一层底会让圆盘比周围暗一档，看着像这条链接被禁用了。
assert.ok(row.discs.every((fill) => fill === 'rgba(0, 0, 0, 0)'), `外链圆盘垫了底色：${row.discs.join('、')}`);
assert.deepEqual(row.glyph, row.plate, '社媒字形没有铺满圆盘，场色的角露出底');
if (viewport.mobile) {
// 普通 `center` 在溢出时把前半排推到滚动起点之前，那几条滑不到。
assert.deepEqual([row.wrap, row.overflowX, row.justify], ['nowrap', 'auto', 'safe center'], '窄屏外链不是一行横滑');
assert.ok(row.edges.every((gap) => Math.abs(gap) < 0.5), `窄屏外链的滚动层没有顶到卡沿：${row.edges.join('、')}`);
} else {
assert.equal(row.wrap, 'wrap', '宽屏外链该换行，不横滑');
}
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it(`名字菜单：当前统称抬一档底色并打勾，其余行的勾位空着；手机上开关画 32px、命中区 44px，菜单行 44px（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openProfiledPerformer(browser, viewport);
try {
const page = opened.page;
const toggle = page.locator('[data-namepick-toggle]');
const hit = await toggle.evaluate((element) => {
const box = element.getBoundingClientRect(), after = getComputedStyle(element, '::after');
return { drawn: [Math.round(box.width), Math.round(box.height)], hit: [after.width, after.height] };
});
assert.deepEqual(hit.drawn, [32, 32], '名字旁那枚开关画出来不是 32px');
if (viewport.mobile) assert.deepEqual(hit.hit, ['44px', '44px'], '手机上开关的命中区不到 44px');
await toggle.click();
await page.locator('[data-namepick-menu]').waitFor({ state: 'visible', timeout: 5_000 });
const rows = await page.locator('[data-namepick-menu] [role="menuitemradio"]').evaluateAll((items) => items.map((item) => ({
checked: item.getAttribute('aria-checked') === 'true', fill: getComputedStyle(item).backgroundColor,
tick: getComputedStyle(item.querySelector('svg')!).visibility, height: item.getBoundingClientRect().height,
menu: getComputedStyle(item.closest('[data-namepick-menu]')!).backgroundColor,
})));
assert.deepEqual(rows.map((row) => row.checked), [true, false], '菜单里当前统称不是第一行，或不止一行被选中');
const [current, other] = rows;
assert.notEqual(current!.fill, 'rgba(0, 0, 0, 0)', '当前统称那一行没有抬底');
assert.notEqual(current!.fill, current!.menu, '当前统称那一行的底色和菜单面同色，看不出来');
assert.deepEqual([current!.tick, other!.tick], ['visible', 'hidden'], '勾没有只给当前统称，或未选中那行不留勾位');
assert.equal(other!.fill, 'rgba(0, 0, 0, 0)', '未选中那一行也抬了底');
const least = viewport.mobile ? 44 : 36;
const alias = await page.locator('[data-namepick-alias]').evaluate((item) => item.getBoundingClientRect().height);
assert.ok([...rows.map((row) => row.height), alias].every((height) => height >= least - 0.5), `菜单行矮于 ${least}px`);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
}
/* 尺寸按身份列有哪几行定：外链与看片那一行都在是 160px，缺一行是 120px。取行高百分比的话
圆框宽、列宽、别名折行、行高绕成一个圈，折行多出的那截压进卡底内边距。
有资料的女优默认只有外链那一行，两行都在的那位要补上看片标识与订阅开关；七沢みあ只有看片那一行。 */
for (const viewport of VIEWPORTS) {
it(`分类图标与视频数量同排，分类位于身份行最左侧（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openProfiledPerformer(browser, viewport, 'light', { identity_labels: ['女优','西方'] });
try {
const geometry = await opened.page.locator('[data-entity-alias="meta"]').evaluate((element) => {
const classification = element.querySelector('[data-identity-classification]')!;
const count = classification.nextElementSibling!;
const label = classification.getBoundingClientRect(), video = count.getBoundingClientRect();
const glyph = classification.querySelector('svg')!.getBoundingClientRect();
// 行内字形取 `--icon-inline`，是所在文字字号的 1.2 倍。
const inline = parseFloat(getComputedStyle(classification.querySelector('svg')!).fontSize) * 1.2;
return { first: element.firstElementChild === classification, top: [label.top, video.top],
edges: [label.right, video.left], glyph: [glyph.width, glyph.height].map(side => Math.abs(side - inline) < 0.5) };
});
assert.equal(geometry.first, true);
assert.ok(Math.abs(geometry.top[0]! - geometry.top[1]!) < 1, '分类与视频数量另起了行');
assert.ok(geometry.edges[0]! <= geometry.edges[1]!, '分类没有排在视频数量左侧');
assert.deepEqual(geometry.glyph, [true, true]);
const measured = await layout(opened.page);
assert.ok(measured.scrollWidth <= measured.viewportWidth + 1);
assert.deepEqual(measured.offenders, []);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
}
const openBothRows = (browser: Browser, viewport: typeof DESKTOP) => openProfiledPerformer(browser, viewport, 'light', {
entry_links: [
{ site: 'minnano-av', label: 'みんなのAV', ordinal: '', slot: 'pill', mark: 'brand-minnano',
url: 'https://www.minnano-av.com/actress12345.html' },
{ site: 'javdb', label: 'JavDB', ordinal: '', slot: 'mark', mark: 'mark-javdb', url: 'https://javdb.com/actors/NPD3' },
],
feed: { following: false },
});
for (const [label, open, size] of [
['外链与看片那一行都在', openBothRows, 160],
['只有看片那一行', openPerformer, 120],
['只有外链那一行', openProfiledPerformer, 120],
] as const) {
it(`资料卡大位按身份列的行数定尺寸：${label}是 ${size}px 正圆，身份列不压进卡底内边距`, { timeout: 60_000 }, async () => {
const opened = await open(browser, DESKTOP);
try {
const box = await opened.page.locator('[data-entity-portrait]').evaluate((element) => {
const portrait = element.getBoundingClientRect();
const profile = element.closest('[data-entity-profile]')!.getBoundingClientRect();
const identity = element.closest('[data-entity-profile]')!.querySelector('[data-entity-identity]')!.getBoundingClientRect();
return { width: portrait.width, height: portrait.height, room: profile.bottom - identity.bottom };
});
assert.ok(Math.abs(box.height - size) < 1, `头像 ${box.height}px，应是 ${size}px`);
assert.ok(Math.abs(box.width - box.height) < 1, '头像不是正圆');
assert.ok(box.room >= 19.5, `身份列离卡底只剩 ${box.room}px，压进了 20px 的内边距`);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
}
it('看片那一行：两枚标识隔 32px、按 22px 字高对齐；MISSAV 按它站上的排字，AV 用它的粉；第二枚带序号', { timeout: 60_000 }, async () => {
const name = '七沢みあ';
const opened = await visit(browser, `/performers/${encodeURIComponent(name)}`, DESKTOP, async page => {
await 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' },
{ site: 'missav', label: 'MISSAV', ordinal: '2', slot: 'mark', mark: '', url: 'https://missav.ws/actresses/x' },
],
} }));
});
try {
const page = opened.page;
await page.locator('[data-missav-mark]').waitFor({ timeout: 15_000 });
const marks = await page.locator('[data-entry-marks]').evaluate((row) => {
const wordmark = row.querySelector('[data-missav-mark]')!;
const [miss, av] = [...wordmark.children].map((part) => getComputedStyle(part).color);
return {
gap: getComputedStyle(row).columnGap,
javdb: row.querySelector('[data-entry-mark] svg')!.getBoundingClientRect().height,
family: getComputedStyle(wordmark).fontFamily, weight: getComputedStyle(wordmark).fontWeight,
miss, av, ink: getComputedStyle(wordmark.closest('a')!).color,
ordinal: row.querySelector('[data-entry-ordinal]')?.textContent ?? '',
hrefs: [...row.querySelectorAll('a[data-entry-mark]')].map((a) => a.getAttribute('href')),
};
});
assert.equal(marks.gap, '32px', '两枚标识的间距不是 32px');
assert.equal(Math.round(marks.javdb), 22, 'JavDB 标识的字高不是 22px');
assert.match(marks.family, /^Halant/, 'MISSAV 没有用 Halant 排字');
assert.equal(marks.weight, '500');
assert.equal(marks.miss, marks.ink, 'MISS 那半没有跟页面墨色');
assert.equal(marks.av, 'rgb(254, 98, 142)', 'AV 那半不是 MISSAV 的粉');
assert.equal(marks.ordinal, '2', '第二枚没带服务端编好的序号');
assert.deepEqual(marks.hrefs, ['https://javdb.com/actors/NPD3', 'https://missav.ws/actresses/x'], '入口地址不是服务端下发的那个');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('厂牌页资料卡：标识铺满方框；指回自家站的官网写「官方网站」，带站点圆标、字距 .02em', { timeout: 60_000 }, async () => {
const name = 'S1 NO.1 STYLE';
const opened = await visit(browser, '/', DESKTOP);
try {
const page = opened.page;
await page.route(/\/api\/entity\?/, (route) => route.fulfill({ json: {
id: 90_601, kind: 'studio', canonical_name: name, aliases: [], display_aliases: [], user_aliases: [],
asset_count: 3, tags: [], related_performers: [], labels: [], metadata: {}, entry_links: [],
has_image: false, has_avatar: false, has_logo: true, avatar_focus: null, representative_asset_id: null,
links: [{ link_id: 90_602, link_kind: 'official', clickable: true, label: 'S1', url: 'https://www.s1s1s1.com/' }],
} }));
// 标识比方框大，走铺满那条；比框小的走原尺寸居中，是另一条判据。
await page.route(/\/logo\?/, (route) => route.fulfill({
contentType: 'image/svg+xml',
body: '<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600"><rect width="600" height="600" fill="#888"/></svg>',
}));
await page.route('**/link-mark**', (route) => route.fulfill({
status: 200, contentType: 'image/png', body: Buffer.from(PIXEL, 'base64'),
}));
await page.goto(new URL(`/studios/${encodeURIComponent(name)}`, page.url()).href, { waitUntil: 'load' });
const logo = page.locator('[data-entity-portrait] > img');
await logo.waitFor({ state: 'attached', timeout: 15_000 });
await page.waitForFunction((element) => element instanceof HTMLImageElement && element.complete && element.naturalWidth > 0,
await logo.elementHandle(), { timeout: 15_000 });
const face = await logo.evaluate((element) => {
const frame = element.parentElement!, box = element.getBoundingClientRect(), outer = frame.getBoundingClientRect();
return { shape: frame.getAttribute('data-entity-portrait'), radius: getComputedStyle(frame).borderTopLeftRadius,
fit: getComputedStyle(element).objectFit,
gaps: [box.left - outer.left, outer.right - box.right, box.top - outer.top, outer.bottom - box.bottom] };
});
assert.equal(face.shape, 'square');
assert.notEqual(face.radius, '50%', '厂牌的标识框画成了圆');
// 标识走「图比框小就别放大」那组：contain 不裁字标，比框大的按框收，所以照样铺满。
assert.equal(face.fit, 'contain', '厂牌标识被裁成了铺满');
assert.ok(face.gaps.every((gap) => Math.abs(gap) < 0.5), `标识没盖满方框：${face.gaps.join('、')}`);
const site = await page.locator('[data-entity-links] a[data-link="url"]').evaluate((a) => ({
text: a.querySelector('[data-link-label]')?.textContent ?? '',
spacing: parseFloat(getComputedStyle(a).letterSpacing) / parseFloat(getComputedStyle(a).fontSize),
mark: a.querySelector('[data-link-icon] img')?.getAttribute('src') ?? '',
referrer: a.querySelector('[data-link-icon] img')?.getAttribute('referrerpolicy') ?? '',
}));
assert.equal(site.text, '官方网站');
assert.ok(Math.abs(site.spacing - 0.02) < 0.001, `官网那一格的字距是 ${site.spacing}em`);
assert.deepEqual([site.mark, site.referrer], ['/link-mark?id=90602', 'no-referrer'], '官网没带本机合成的站点圆标');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('人物页首帧保留新作和同台艺人的高度，文字先呈现、封面独立加载', { timeout: 60_000 }, async () => {
const name = '七沢みあ';
const opened = await visit(browser, '/', DESKTOP);
let releaseCover = () => {};
try {
await opened.page.route(/\/api\/entity\/shapes/, (route) => route.fulfill({ json: {
ok: true, entities: [{ id: 90_001, kind: 'performer', names: [name], parts: ['feed', 'costars'] }] } }));
// 骨架插进页面的那一刻就记下它带着哪几块：之后才补进去的，就是在骨架里跳了一下。
await opened.page.addInitScript(() => {
const first = { feed: null as boolean | null, foot: null as boolean | null, sheen: '' };
(window as unknown as { skeletonFirst: typeof first }).skeletonFirst = first;
new MutationObserver(() => {
const skeleton = document.querySelector('[data-skeleton="entity/performer"]');
if (!skeleton || first.feed !== null) return;
first.feed = !!skeleton.querySelector('.feednew');
first.foot = !!skeleton.querySelector('.entityfoot');
// 骨架卡的微光和骨架同一帧就在：晚一步的话，那一步里露出来的是封面格的黑底。
const pic = skeleton.querySelector('.feednewskeleton .pic.imgwait');
first.sheen = pic ? getComputedStyle(pic, '::after').opacity : '';
}).observe(document, { childList: true, subtree: true });
// 真实库上启动脚本发出名单请求后还要连续跑四五百毫秒，名单的响应就在这段时间里到、
// 排在队里。这里在发请求的同一个任务末尾占住主线程 700ms，把那一段复现出来。
const fetch = window.fetch;
let blocked = false;
window.fetch = (...args) => {
if (!blocked && String(args[0]).includes('/api/entity/shapes')) {
blocked = true;
queueMicrotask(() => { const end = performance.now() + 700; while (performance.now() < end); });
}
return fetch(...args);
};
});
let release = () => {};
const held = new Promise<void>((resolve) => { release = resolve; });
await opened.page.route(/\/api\/entity\?/, async (route) => {
await held;
await route.fulfill({ json: {
id: 90_001, kind: 'performer', canonical_name: name, aliases: [], display_aliases: [],
user_aliases: [], asset_count: 0, tags: [],
related_performers: [{ id: 90_002, k: '共演者', n: 1, rep: null, has_image: false,
has_avatar: false, avatar_focus: null }],
links: [], metadata: {}, has_image: false, has_avatar: false, avatar_focus: null,
representative_asset_id: null, entry_links: [], feed: { following: true },
} });
});
await opened.page.route(/\/api\/feeds\/discoveries\?/, (route) => route.fulfill({ json: {
ok: true, more: false, items: [{
id: 1, code: 'ABC-001', title: '标题', link: 'https://javdb.com/v/x', cover_url: null,
has_cover: true, cover_frame: null, poster_box: null, release_date: '2026-09-01',
studio: '厂牌', performers: name, source_name: '', read: false, ignored: false,
scrape_error: null }] } }));
// 封面尚未返回时，身份、标题和操作仍应可见。
const coverWaiting = new Promise<void>(resolve => { releaseCover = resolve });
await opened.page.route(/\/cover\?code=ABC-001/, async (route) => {
await coverWaiting;
await route.fulfill({ contentType: 'image/png', body: Buffer.from(PIXEL, 'base64') });
});
await opened.page.goto(new URL(`/performers/${encodeURIComponent(name)}`,
opened.page.url()).href, { waitUntil: 'load' });
const skeleton = opened.page.locator('[data-skeleton="entity/performer"]');
await skeleton.locator('.feednew .feednewskeleton').first().waitFor({ timeout: 15_000 });
const before = await skeleton.evaluate((element) => {
const row = element.querySelector('.feednew')!;
const foot = element.querySelector('.entityhero > .entityfoot');
// 同一个 `.pic.imgwait` 放在新作那一行外面，它的微光就是全站等待态那一种。
const probe = document.createElement('div');
probe.className = 'pic imgwait';
document.querySelector('#main')!.append(probe);
const plain = getComputedStyle(probe, '::after').backgroundImage;
probe.remove();
return { height: row.getBoundingClientRect().height,
footHeight: foot?.getBoundingClientRect().height ?? 0,
between: !!(row.previousElementSibling?.matches('[data-filter-frame]') || row.previousElementSibling?.querySelector('[data-filter-frame]'))
&& !!row.nextElementSibling?.matches('.entitysection'),
sheen: getComputedStyle(row.querySelector('.pic.imgwait')!, '::after').backgroundImage, plain,
first: (window as unknown as { skeletonFirst: { feed: boolean; foot: boolean; sheen: string } }).skeletonFirst };
});
assert.ok(before.between, '骨架里的新作那一行不在筛选框和作品之间');
const { sheen, ...parts } = before.first;
assert.deepEqual(parts, { feed: true, foot: true }, '骨架先画了一版，新作行或同台艺人是后来才补进去的');
assert.equal(sheen, '1', '新作骨架卡的微光晚于骨架出现，中间露出封面格的黑底');
assert.ok(before.footHeight > 0, '骨架的资料卡底没有同台艺人那一条');
assert.equal(before.sheen, before.plain, '新作骨架的微光另起了一种颜色');
// 身份就绪后新作可以独立等待；真卡出现后不能再退回骨架。
await opened.page.evaluate(() => {
const seen = { ready: false, second: false };
(window as unknown as { feedSeen: typeof seen }).feedSeen = seen;
new MutationObserver(() => {
if (document.querySelector('[data-feed-new] [data-feed-id]')) seen.ready = true;
if (seen.ready && document.querySelector('[data-feed-new] .feednewskeleton')) seen.second = true;
}).observe(document.querySelector('#index')!, { childList: true, subtree: true });
});
release();
const row = opened.page.locator('[data-feed-new]');
await row.locator('[data-feed-id]').waitFor({ timeout: 15_000 });
const after = await row.evaluate((element) => ({
height: element.getBoundingClientRect().height, busy: element.getAttribute('aria-busy'),
waiting: element.querySelectorAll('[data-feed-id] .pic.imgwait').length,
footHeight: document.querySelector('[data-entity-card] > [data-entity-foot]')?.getBoundingClientRect().height ?? 0,
second: (window as unknown as { feedSeen: { second: boolean } }).feedSeen.second }));
assert.equal(after.height, before.height, '占位行和到货的那一行不一样高，下面的作品网格会跳');
assert.equal(after.footHeight, before.footHeight, '同台艺人那一条占位和真的不一样高，资料卡会伸缩');
assert.equal(after.busy, null);
assert.equal(after.second, false, '整页画出来之后新作那一行又单独骨架了一轮');
assert.equal(after.waiting, 1, '封面独立等待时保留卡片标题和操作');
releaseCover();
await opened.page.waitForFunction(() => !document.querySelector('[data-feed-id] .pic.imgwait'));
assert.equal(await row.locator('[data-feed-id] img').first().evaluate(image =>
(image as HTMLImageElement).complete && (image as HTMLImageElement).naturalWidth > 0), true);
assert.deepEqual(opened.problems, []);
} finally {
releaseCover();
await opened.close();
}
});
it('卡片悬停面不顶到邻卡，三处卡片网格同一副列距', { timeout: 60_000 }, async () => {
const opened = await openCatalog(browser);
try {
const card = opened.page.locator('#grid [data-media-grid] > [data-media-card]').first();
await card.hover();
const geometry = await card.evaluate((element) => {
const box = element.getBoundingClientRect();
const neighbor = [...element.parentElement!.children].find((other) => other !== element
&& Math.abs(other.getBoundingClientRect().top - box.top) < 1)!;
const spread = Number(/0px 0px 0px (\d+(?:\.\d+)?)px/.exec(getComputedStyle(element).boxShadow)?.[1]);
// 壳画的骨架网格和关注页岛的视频列表不在首页这叠卡里：各挂一个同形的空壳读列距。
const columnGap = (build: (probe: HTMLElement) => HTMLElement) => {
const probe = document.createElement('div');
const host = build(probe);
document.querySelector('#main')!.append(host);
const gap = parseFloat(getComputedStyle(probe).columnGap);
host.remove();
return gap;
};
return {
spread, clearance: neighbor.getBoundingClientRect().left - (box.right + spread),
home: parseFloat(getComputedStyle(element.parentElement!).columnGap),
skeleton: columnGap((probe) => { probe.className = 'grid'; return probe }),
follow: columnGap((probe) => {
const island = document.createElement('div');
island.className = 'peach-react';
probe.setAttribute('data-follow-list', '');
island.append(probe);
return island;
}),
};
});
assert.ok(geometry.spread > 0, '卡片悬停面没有往盒外铺');
assert.ok(geometry.clearance >= geometry.spread,
`悬停面离邻卡只剩 ${geometry.clearance}px，比它自己往外铺的 ${geometry.spread}px 还窄`);
assert.equal(geometry.skeleton, geometry.home, '壳画的骨架网格的列距和首页不一样，真卡换上来时整排挪位');
assert.equal(geometry.follow, geometry.home, '关注页视频列表的列距和首页不一样');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('相邻两张稍后看卡的底色之间隔着整段列距', { timeout: 60_000 }, async () => {
const opened = await openCatalogFixture(browser, (payload) => {
if (payload.items.length < 2) throw new Error('演示目录不足两张卡');
for (const item of payload.items.slice(0, 2)) item.watch_later = true;
});
try {
await opened.page.mouse.move(0, 0);
const geometry = await opened.page.evaluate(() => {
const [first, second] = [...document.querySelectorAll<HTMLElement>('#grid [data-media-grid] > [data-media-card][data-watch-later]')];
const spread = (element: HTMLElement) => Number(/0px 0px 0px (\d+(?:\.\d+)?)px/.exec(getComputedStyle(element).boxShadow)?.[1] ?? 0);
return {
sameRow: Math.abs(first!.getBoundingClientRect().top - second!.getBoundingClientRect().top) < 1,
clearance: second!.getBoundingClientRect().left - spread(second!) - (first!.getBoundingClientRect().right + spread(first!)),
columnGap: parseFloat(getComputedStyle(first!.parentElement!).columnGap),
};
});
assert.ok(geometry.sameRow, '前两张稍后看卡不在同一排');
assert.equal(geometry.clearance, geometry.columnGap, `两张稍后看卡的底色之间只剩 ${geometry.clearance}px`);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('跳过渲染的元信息区不裁掉贴着边的头像悬停描边和焦点环', { timeout: 60_000 }, async () => {
/* 演示库的作品都未归属，头像是不可聚焦的 `<span>`；首张卡归给一位女优，头像才是按钮。 */
const opened = await openCatalogFixture(browser, (payload) => {
const item = payload.items[0];
if (!item) throw new Error('演示目录没有可替换的卡片');
item.creator = '';
item.performers = ['演示演员'];
item.performer_total = 1;
item.performer_entities = [{ id: 90_000, name: '演示演员', has_image: false }];
});
try {
/* 视口外跳过渲染连带 paint containment，元信息区里画出 padding box 的像素一律裁掉；
几何照算，所以这里比的是描边外沿与 padding box，不是与内容盒。头像贴着内容盒的
左缘和上缘。这条不读 `overflow-clip-margin`：Safari 不认它，裁切边只能靠盒子本身。 */
const { page } = opened;
const avatar = page.locator('#grid [data-media-grid] > [data-media-card] [data-media-meta] > button[data-media-avatar]').first();
const edges = () => avatar.evaluate((element) => {
const meta = element.closest('[data-media-meta]')!;
const style = getComputedStyle(element);
const shadow = Number(/0px 0px 0px (\d+(?:\.\d+)?)px/.exec(style.boxShadow)?.[1] ?? 0);
const outline = style.outlineStyle === 'none' ? 0
: parseFloat(style.outlineWidth) + parseFloat(style.outlineOffset);
const ring = Math.max(shadow, outline);
const box = element.getBoundingClientRect();
const clip = meta.getBoundingClientRect();
const left = clip.left + meta.clientLeft, top = clip.top + meta.clientTop;
return {
contained: getComputedStyle(meta).contentVisibility === 'auto',
focused: element.matches(':focus-visible'), ring,
// 描边外沿到裁切边还剩多少，四边取最小的那一边。
room: Math.min(box.left - ring - left, box.top - ring - top,
left + meta.clientWidth - (box.right + ring), top + meta.clientHeight - (box.bottom + ring)),
};
});
await avatar.hover();
const hovered = await edges();
assert.ok(hovered.contained, '首页卡片的元信息区不再跳过渲染：这条用例守的裁切前提变了，改用例');
assert.ok(hovered.ring > 0, '头像悬停没有描边');
assert.ok(hovered.room >= -.5, `头像悬停描边越过了元信息区的裁切边 ${-hovered.room}px，那一截会被裁掉`);
await page.mouse.move(0, 0);
await page.keyboard.press('Tab');
await avatar.focus();
const focused = await edges();
assert.ok(focused.focused && focused.ring > 0, '键盘聚焦的头像没有焦点环');
assert.ok(focused.room >= -.5, `头像焦点环越过了元信息区的裁切边 ${-focused.room}px，那一截会被裁掉`);
} finally {
await opened.close();
}
});
it('头像圆框里的图按人脸框写进的内联尺寸不被岛里的预检夹回框宽', { timeout: 60_000 }, async () => {
/* 演示库没有实体图，往首张卡的头像框里塞一张按人脸框放大的图：宽超过框宽时图就该那么宽，
由圆框的 overflow 裁；被夹回框宽的话脸偏到左边，右侧露出底下的首字母。 */
const opened = await openCatalogFixture(browser, (payload) => {
const item = payload.items[0];
if (!item) throw new Error('演示目录没有可替换的卡片');
item.creator = '';
item.performers = ['演示演员'];
item.performer_total = 1;
item.performer_entities = [{ id: 90_000, name: '演示演员', has_image: false }];
});
try {
const avatar = opened.page.locator('#grid [data-media-grid] > [data-media-card] [data-media-meta] > button[data-media-avatar]').first();
const framed = await avatar.evaluate((element) => {
const img = document.createElement('img');
img.setAttribute('style', 'position:absolute;inset:-25% auto auto 0;width:150%;height:195%');
element.appendChild(img);
const frame = element.getBoundingClientRect();
const box = img.getBoundingClientRect();
const style = getComputedStyle(img);
return { maxWidth: style.maxWidth, maxHeight: style.maxHeight,
width: box.width / frame.width, height: box.height / frame.height };
});
assert.equal(framed.maxWidth, 'none', '头像图还带着预检的 max-width');
assert.equal(framed.maxHeight, 'none', '头像图还带着 max-height');
assert.ok(Math.abs(framed.width - 1.5) <= .02, `按人脸框放大到 1.5 倍框宽的图被夹成了 ${framed.width} 倍`);
assert.ok(Math.abs(framed.height - 1.95) <= .02, `按人脸框放大到 1.95 倍框高的图被夹成了 ${framed.height} 倍`);
} finally {
await opened.close();
}
});
it('亮暗按钮保持尺寸与悬停面色，卡片和回执保持接触阴影', { timeout: 60_000 }, async () => {
const opened = await visit(browser, '/stats', DESKTOP);
try {
// 选中的那张页签按基线收掉接触阴影，读旁边没选中的一张。
const card = opened.page.locator('#main [class~="shadow-card"]:not([data-selected])').first();
await card.waitFor({ timeout: 15_000 });
await settle(opened.page);
const checkSecondaryButton = async () => {
await opened.page.mouse.move(0, 0);
const dimensions = await opened.page.evaluate(() => {
const holder = document.createElement('div');
holder.style.cssText = 'position:fixed;right:16px;bottom:16px;z-index:10000';
const button = document.createElement('button');
button.className = 'geist-button';
button.dataset.buttonProbe = '';
button.textContent = '操作';
holder.append(button);
document.body.append(holder);
const style = getComputedStyle(button);
return [style.boxSizing, style.height, style.paddingTop, style.paddingRight,
style.borderTopWidth, style.display];
});
assert.deepEqual(dimensions, ['border-box', '36px', '8px', '12px', '1px', 'inline-flex']);
const button = opened.page.locator('[data-button-probe]');
try {
const idle = await button.evaluate(element => getComputedStyle(element).backgroundColor);
assert.equal(idle, await tokenColor(opened.page, 'body', '--color-background-primary-default'));
const border = await button.evaluate(element => getComputedStyle(element).borderTopColor);
await button.hover();
await settle(opened.page);
const hovered = await button.evaluate(element => getComputedStyle(element).backgroundColor);
assert.equal(hovered, await tokenColor(opened.page, 'body', '--control-hover'));
assert.equal(await button.evaluate(element => getComputedStyle(element).borderTopColor), border);
} finally {
await button.evaluate(element => element.parentElement!.remove());
}
};
/* Tailwind 把阴影 token 的字面值抄进工具类，`.dark` 里改 `--shadow-*` 够不着它；
旧样式表里写死的浅色阴影同样不跟主题走。读三类来源各一处的计算值。 */
const alphas = () => opened.page.evaluate(() => {
const strongest = (shadow: string) => Math.max(0, ...[...shadow.matchAll(
/rgba\(0, 0, 0, ([\d.]+)\)|rgb\(0, 0, 0\)/g)].map((match) => (match[1] ? Number(match[1]) : 1)));
const probe = (html: string, parent: Element = document.body) => {
const holder = document.createElement('div');
holder.innerHTML = html;
const element = holder.firstElementChild!;
// 挂在 React 岛外面：岛里的重置会把旧样式表的按钮阴影清掉。
parent.append(element);
const shadow = getComputedStyle(element).boxShadow;
element.remove();
return strongest(shadow);
};
return {
card: strongest(getComputedStyle(document.querySelector('#main [class~="shadow-card"]:not([data-selected])')!).boxShadow),
button: probe('<button class="geist-button" type="button">键</button>'),
// Toast 的面只在 #toasts 里成立：阴影写在 Sonner 那一条的属性选择器上。
toast: probe('<li data-sonner-toast data-styled="true">回执</li>', document.getElementById('toasts')!),
};
});
await opened.page.evaluate(() => {
document.documentElement.dataset.theme = 'light';
document.documentElement.classList.remove('dark');
});
const light = await alphas();
await checkSecondaryButton();
// `web/app.js` 的 `applyTheme('dark')` 就是这两句；这里只借它换一次配色。
await opened.page.evaluate(() => {
document.documentElement.dataset.theme = 'dark';
document.documentElement.classList.add('dark');
});
const dark = await alphas();
await checkSecondaryButton();
for (const key of Object.keys(light) as Array<keyof typeof light>) {
assert.ok(light[key] > 0 && light[key] < .2, `浅色下 ${key} 的阴影 ${light[key]} 不在浅色那一档`);
assert.ok(dark[key] > light[key] && dark[key] <= .2,
`暗色 ${key} 阴影应保留接触感而不形成重边：${dark[key]}`);
}
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
for (const viewport of [DESKTOP, MOBILE]) {
it(`JAV 订阅卡片包含分页与贴边底栏（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openFollowManage(browser, viewport);
try {
const page = opened.page;
await page.route('**/api/feeds', route => route.fulfill({ json: {
unread: 81, sources: Array.from({ length: 25 }, (_, i) => ({
id: i + 1, kind: 'javdb-actor', kind_label: 'JAV 订阅', name: `测试订阅 ${i + 1}`,
url: `https://example.com/actors/${i + 1}`, entity_id: null, entity_name: null,
has_image: false, enabled: true, interval_minutes: 360, last_fetched_at: null,
last_error: null, last_new_count: 0, seen: 0,
})),
} }));
await page.reload({ waitUntil: 'load' });
await page.getByRole('tab', { name: '关注列表', exact: true }).waitFor();
const card = page.getByRole('region', { name: 'JAV 订阅列表', exact: true });
await card.getByText('1–20 / 25 个订阅源', { exact: true }).waitFor();
assert.equal(await card.locator('[role="row"][data-key]').count(), 20);
await card.getByRole('button', { name: '下一页', exact: true }).click();
await card.getByText('21–25 / 25 个订阅源', { exact: true }).waitFor();
assert.equal(await card.locator('[role="row"][data-key]').count(), 5);
for (const theme of ['light', 'dark']) {
await page.evaluate(value => {
document.documentElement.dataset.theme = value;
document.documentElement.classList.toggle('dark', value === 'dark');
}, theme);
const surface = await card.evaluate(element => {
const footer = element.querySelector('footer')!;
const box = element.getBoundingClientRect();
const bottom = footer.getBoundingClientRect();
return { background: getComputedStyle(element).backgroundColor,
footerBackground: getComputedStyle(footer).backgroundColor,
left: bottom.left - box.left, right: box.right - bottom.right,
bottom: box.bottom - bottom.bottom };
});
assert.notEqual(surface.background, 'rgba(0, 0, 0, 0)');
assert.notEqual(surface.background, surface.footerBackground);
for (const edge of ['left', 'right', 'bottom'] as const) assert.ok(Math.abs(surface[edge]) <= 1);
const dimensions = await layout(page);
assert.ok(dimensions.scrollWidth <= dimensions.viewportWidth + 1, JSON.stringify(dimensions));
}
assert.deepEqual(opened.problems, []);
} finally { await opened.close(); }
});
it(`关注分类使用 Pills，添加关注结果带描边（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openFollowManage(browser, viewport);
try {
const page = opened.page;
const tabs = page.getByRole('tablist', { name: '关注管理区域' });
for (const theme of ['light', 'dark']) {
await page.evaluate((value) => {
document.documentElement.dataset.theme = value;
document.documentElement.classList.toggle('dark', value === 'dark');
}, theme);
await tabs.getByRole('tab', { name: '添加关注', exact: true }).click();
await page.waitForFunction(() => {
const host = document.querySelector('[role="tablist"][aria-label="关注管理区域"]')!;
const selected = host.querySelector('[aria-selected=true]')!.getBoundingClientRect();
const surface = host.querySelector('[data-pill-thumb]')?.getBoundingClientRect();
return surface && Math.abs(selected.left - surface.left) <= 1
&& Math.abs(selected.width - surface.width) <= 1;
});
const face = await tabs.evaluate((element) => {
const selected = element.querySelector('[data-pill-thumb]')!;
return { track: getComputedStyle(element).backgroundColor,
selected: getComputedStyle(selected).backgroundColor,
shadow: getComputedStyle(selected).boxShadow };
});
assert.equal(face.track, 'rgba(0, 0, 0, 0)', 'Pills 容器应透明');
assert.notEqual(face.selected, face.track, '当前分类应有独立底色');
assert.equal(face.shadow, 'none', 'Pills 不使用浮起滑块');
await tabs.getByRole('tab', { name: '添加关注', exact: true }).focus();
await page.keyboard.press('Home');
await page.keyboard.press('Enter');
assert.equal(await tabs.getByRole('tab', { name: '关注列表', exact: true }).getAttribute('aria-selected'), 'true');
const dimensions = await layout(page);
assert.ok(dimensions.scrollWidth <= dimensions.viewportWidth + 1, JSON.stringify(dimensions));
}
await page.route('**/api/follow/resolve', (route) => route.fulfill({
status: 200, contentType: 'application/json', body: JSON.stringify({
status: 'done', results: [{ line: '主题测试来源', candidates: [{
provider: 'kemono', provider_label: 'Kemono', label: '主题测试候选', url: 'https://example.com/creator',
}] }],
}),
}));
await tabs.getByRole('tab', { name: '添加关注', exact: true }).click();
await page.getByRole('textbox', { name: '来源链接、名字或 id' }).fill('主题测试来源');
await page.getByRole('region', { name: '添加创作者关注', exact: true }).getByRole('button', { name: '查找', exact: true }).click();
const result = page.getByText('主题测试来源', { exact: true }).locator('..');
await result.waitFor();
for (const theme of ['light', 'dark']) {
await page.evaluate((value) => {
document.documentElement.dataset.theme = value;
document.documentElement.classList.toggle('dark', value === 'dark');
}, theme);
const surface = await result.evaluate((element) => {
const s = getComputedStyle(element);
return { shadow: s.boxShadow, width: s.borderTopWidth, border: s.borderTopColor, bg: s.backgroundColor };
});
assert.equal(surface.shadow, 'none');
assert.equal(surface.width, '1px');
assert.notEqual(surface.border, surface.bg, '结果分组必须有可辨认边界');
}
assert.deepEqual(opened.problems, []);
} finally { await opened.close(); }
});
it(`Peach 配置的来源凭据按要求分组并带描边（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openFollowManage(browser, viewport);
try {
const page = opened.page;
await page.getByRole('link', { name: /^来源与订阅设置/ }).click();
await page.getByRole('tab', { name: '来源与订阅', exact: true, selected: true }).waitFor();
await page.getByRole('region', { name: '可配置凭据', exact: true }).waitFor();
await settle(page);
for (const theme of ['light', 'dark']) {
await page.evaluate(value => {
document.documentElement.dataset.theme = value;
document.documentElement.classList.toggle('dark', value === 'dark');
}, theme);
for (const name of ['可配置凭据', '不需要凭据', '暂不支持']) {
const group = page.getByRole('region', { name, exact: true });
const rows = await group.evaluate(element => {
const style = getComputedStyle(element.lastElementChild!);
return { shadow: style.boxShadow, width: style.borderTopWidth,
border: style.borderTopColor, background: style.backgroundColor };
});
assert.equal(rows.shadow, 'none');
assert.equal(rows.width, '1px');
assert.notEqual(rows.border, rows.background);
}
assert.match(await page.getByRole('region', { name: '不需要凭据', exact: true }).innerText(), /Kemono/);
assert.match(await page.getByRole('region', { name: '暂不支持', exact: true }).innerText(), /OnlyFans/);
const dimensions = await layout(page);
assert.ok(dimensions.scrollWidth <= dimensions.viewportWidth + 1, JSON.stringify(dimensions));
}
assert.deepEqual(opened.problems, []);
} finally { await opened.close(); }
});
}
});