fmode-app/prototypes/fmode-mvp-20261014/_shot.mjs

import { chromium } from 'playwright';
const OUT = process.env.SHOT_OUT || 'test-results';
const browser = await chromium.launch({ executablePath: process.env.DEMO_CHROME || 'C:/Program Files/Google/Chrome/Application/chrome.exe' });

async function grab(name, w, h, path, pre) {
  const ctx = await browser.newContext({ viewport: { width: w, height: h } });
  const p = await ctx.newPage();
  const errs = [];
  p.on('console', m => { if (m.type() === 'error') errs.push(m.text().slice(0, 160)); });
  p.on('pageerror', e => errs.push('PAGEERROR: ' + e.message.slice(0, 160)));
  await p.goto('http://localhost:4200' + path, { waitUntil: 'networkidle' });
  await p.waitForTimeout(1200);
  if (pre) await pre(p);
  await p.waitForTimeout(1000);
  await p.screenshot({ path: `${OUT}/${name}.png` });
  const dim = await p.evaluate(() => ({ sw: document.documentElement.scrollWidth, cw: document.documentElement.clientWidth }));
  console.log(`[${name}] ${w}x${h} url=${new URL(p.url()).pathname} scrollW=${dim.sw} clientW=${dim.cw}${dim.sw > dim.cw ? '  ⚠ 横向溢出' : ''}`);
  if (errs.length) console.log(`   ⚠ 控制台错误 ${errs.length}: ${errs.slice(0,2).join(' || ')}`);
  await ctx.close();
}

// 登录流程(演示模式填手机号+验证码)
async function login(p) {
  await p.fill('input[type="tel"]', '13800138000');
  await p.fill('input[type="text"][maxlength="6"]', '123456');
  await p.click('button[type="submit"]');
  await p.waitForTimeout(2500);
}

const A = process.argv[2] || 'login';
if (A === 'login') {
  await grab('login', 1440, 900, '/login');
  await grab('login-m', 390, 844, '/login');
} else if (A === 'desktop') {
  await grab('dk-workbench', 1440, 900, '/desktop/workbench', login);
  await grab('dk-workbench-wide', 1920, 1080, '/desktop/workbench', login);
  await grab('dk-workbench-narrow', 1100, 900, '/desktop/workbench', login);
} else if (A === 'mobile') {
  await grab('mb-home', 390, 844, '/mobile/home', login);
}
await browser.close();