116 lines
4.3 KiB
JavaScript
116 lines
4.3 KiB
JavaScript
import { chromium } from 'playwright';
|
||
import { mkdir } from 'node:fs/promises';
|
||
import path from 'node:path';
|
||
import { fileURLToPath } from 'node:url';
|
||
|
||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||
const outDir = path.join(__dirname, '..', 'docs', 'screenshots');
|
||
const base = process.env.J13_URL || 'http://localhost:8080';
|
||
|
||
/** 用于发帖页截图的演示账号 */
|
||
const DEMO_USER = { username: 'admin', password: 'admin123' };
|
||
/** 富文本示例帖，用于详情页截图 */
|
||
const DEMO_POST_ID = Number(process.env.J13_POST_ID || 36);
|
||
|
||
async function shot(page, name, opts = {}) {
|
||
const file = path.join(outDir, name);
|
||
await page.screenshot({ path: file, type: 'png', ...opts });
|
||
console.log('saved', file);
|
||
}
|
||
|
||
async function setTheme(page, theme) {
|
||
await page.addInitScript((t) => {
|
||
localStorage.setItem('j13-theme', t);
|
||
document.documentElement.classList.toggle('dark', t === 'dark');
|
||
document.documentElement.style.colorScheme = t;
|
||
}, theme);
|
||
}
|
||
|
||
/** 通过登录页写入 Cookie，供发帖页等需登录场景使用 */
|
||
async function login(page) {
|
||
await page.goto(`${base}/login`, { waitUntil: 'networkidle' });
|
||
await page.fill('input[name="username"], #username, input[autocomplete="username"]', DEMO_USER.username);
|
||
await page.fill('input[name="password"], #password, input[type="password"]', DEMO_USER.password);
|
||
await page.click('button[type="submit"]');
|
||
await page.waitForURL((url) => !url.pathname.endsWith('/login'), { timeout: 10000 });
|
||
await page.waitForTimeout(600);
|
||
}
|
||
|
||
const browser = await chromium.launch();
|
||
const context = await browser.newContext({ deviceScaleFactor: 2 });
|
||
|
||
try {
|
||
await mkdir(outDir, { recursive: true });
|
||
|
||
// 首页 · 浅色
|
||
{
|
||
const page = await context.newPage();
|
||
await page.setViewportSize({ width: 1440, height: 900 });
|
||
await setTheme(page, 'light');
|
||
await page.goto(`${base}/`, { waitUntil: 'networkidle' });
|
||
await page.waitForSelector('.feed-sort-bar, .virtual-post-list, .post-list', { timeout: 10000 });
|
||
await page.waitForTimeout(1000);
|
||
await shot(page, 'home-light.png');
|
||
await page.close();
|
||
}
|
||
|
||
// 首页 · 暗色
|
||
{
|
||
const page = await context.newPage();
|
||
await page.setViewportSize({ width: 1440, height: 900 });
|
||
await setTheme(page, 'dark');
|
||
await page.goto(`${base}/`, { waitUntil: 'networkidle' });
|
||
await page.waitForSelector('.feed-sort-bar, .virtual-post-list, .post-list', { timeout: 10000 });
|
||
await page.waitForTimeout(1000);
|
||
await shot(page, 'home-dark.png');
|
||
await page.close();
|
||
}
|
||
|
||
// 帖子详情（富文本 + 楼层回复）
|
||
{
|
||
const page = await context.newPage();
|
||
await page.setViewportSize({ width: 1440, height: 900 });
|
||
await setTheme(page, 'light');
|
||
await page.goto(`${base}/post/${DEMO_POST_ID}`, { waitUntil: 'networkidle' });
|
||
await page.waitForSelector('.post-detail-page, .post-detail-title', { timeout: 10000 });
|
||
await page.waitForTimeout(1200);
|
||
await shot(page, 'post-detail.png');
|
||
await page.close();
|
||
}
|
||
|
||
// 发帖编辑器（需登录）
|
||
{
|
||
const page = await context.newPage();
|
||
await page.setViewportSize({ width: 1440, height: 900 });
|
||
await setTheme(page, 'light');
|
||
await login(page);
|
||
await page.goto(`${base}/compose`, { waitUntil: 'networkidle' });
|
||
await page.waitForSelector('.compose-page, .compose-canvas, .article-editor', { timeout: 10000 });
|
||
await page.fill('.compose-title', '分享你的技术见解');
|
||
const editor = page.locator('.article-editor .ProseMirror, .article-editor [contenteditable="true"]').first();
|
||
if (await editor.count()) {
|
||
await editor.click();
|
||
await editor.fill('支持 **粗体**、列表、代码块与图片上传的 TipTap 编辑器。');
|
||
}
|
||
await page.waitForTimeout(800);
|
||
await shot(page, 'compose.png', {
|
||
clip: { x: 0, y: 56, width: 1440, height: 844 },
|
||
});
|
||
await page.close();
|
||
}
|
||
|
||
// 移动端
|
||
{
|
||
const page = await context.newPage();
|
||
await page.setViewportSize({ width: 390, height: 844 });
|
||
await setTheme(page, 'light');
|
||
await page.goto(`${base}/`, { waitUntil: 'networkidle' });
|
||
await page.waitForSelector('.feed-sort-bar, .virtual-post-list, .post-list', { timeout: 10000 });
|
||
await page.waitForTimeout(1000);
|
||
await shot(page, 'mobile-home.png', { fullPage: true });
|
||
await page.close();
|
||
}
|
||
} finally {
|
||
await browser.close();
|
||
}
|