Web 截图

捕获网页（尤其是SPA应用）的截图，并支持自动登录处理。

依赖

• - puppeteer-core（npm 全局安装）
• chromium-browser（/usr/bin/chromium-browser）
• Node.js

验证方式：which chromium-browser && npm ls -g puppeteer-core

快速开始

bash
node /scripts/screenshot.js

配置格式

json
{
baseUrl: http://192.168.7.66:8080,
outputDir: /root/screenpics/my-capture,
resolution: [1920, 1080],
login: {
url: /login,
usernameSelector: input[placeholder=请输入用户名],
passwordSelector: input[type=password],
submitSelector: button.el-button--primary,
credentials: { username: admin, password: 123456 }
},
pages: [
{ name: 01_dashboard, path: /dashboard, waitMs: 3000 },
{ name: 02projectlist, path: /project/list, waitMs: 2000 }
],
descriptions: {
01_dashboard: 工作台首页，展示KPI卡片和图表。,
02projectlist: 项目管理列表页面。
}
}

登录流程（SPA认证）

脚本通过以下方式处理Vue/React SPA登录：

1. 1. 导航到登录页面
2. 通过原生HTMLInputElement.value设置器设置输入值，并派发input事件（兼容Vue响应式）
3. 点击提交按钮
4. 等待SPA路由导航（URL变化）
5. 使用Vue的$router.push()进行后续页面导航（避免完整页面重载导致Pinia/Redux状态重置）

字段说明

输出

• - {outputDir}/{name}.png — 每个页面一张PNG图片
• {outputDir}/result.json — 包含文件名、标题、URL、描述的元数据

result.json格式

json
{
project: auto-generated,
captureDate: 2026-03-22,
baseUrl: ...,
resolution: 1920x1080,
screenshots: [
{
filename: 01_dashboard.png,
title: Dashboard,
url: ...,
description: ...
}
]
}

同时捕获登录页面

如需将登录页面作为第一张截图，可在pages中添加带有特殊标记的页面：

json
{
pages: [
{ name: 00_login, path: /login, isLoginPage: true, waitMs: 2000 }
]
}

当isLoginPage: true时，脚本会在执行登录前捕获该页面。

高级：自定义Vue Store登录

如果基于表单的登录无法正常工作（例如自定义认证流程），可使用storeLogin替代：

json
{
login: {
url: /login,
storeLogin: {
storeName: user,
method: login,
args: [平台管理员]
}
}
}

这将通过CDP直接调用pinia._s.get(storeName).method(...args)。

故障排除

• - 图表空白（ECharts/Chart.js）：无头Chromium没有GPU。使用Canvas的图表可能渲染为空。已包含--disable-gpu参数。
• 所有页面重定向到登录页：登录失败。检查选择器是否与实际表单元素匹配。尝试使用storeLogin方式。
• SPA导航不工作：确保已配置login部分。未配置登录时，将使用page.goto()而非$router.push()。