Web Screenshot#

Capture screenshots of web pages (especially SPA applications) with automatic login handling.

Dependencies#

• puppeteer-core (npm global)
• chromium-browser ( /usr/bin/chromium-browser)
• Node.js

Verify with: which chromium-browser && npm ls -g puppeteer-core

Quick Start#

bash

node <skill_dir>/scripts/screenshot.js <config.json>

Config Format#

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": "02_project_list", "path": "/project/list", "waitMs": 2000 }
  ],
  "descriptions": {
    "01_dashboard": "工作台首页，展示KPI卡片和图表。",
    "02_project_list": "项目管理列表页面。"
  }
}

Login Flow (SPA Authentication)#

The script handles Vue/React SPA login by:

1. Navigating to the login page
2. Setting input values via native HTMLInputElement.value setter + dispatching input events (Vue-reactive compatible)
3. Clicking the submit button
4. Waiting for SPA router navigation (URL change)
5. Using Vue's $router.push() for subsequent page navigation (avoids Pinia/Redux store reset on full page reload)

Fields#

FieldRequiredDescriptionbaseUrl✅Base URL of the web appoutputDir✅Output directory for screenshotsresolutionNoViewport size [width, height], default [1920, 1080]``loginNoLogin config (skip for public pages)login.usernameSelector✅*CSS selector for username inputlogin.passwordSelector✅*CSS selector for password inputlogin.submitSelector✅*CSS selector for submit buttonlogin.credentials✅*{ username, password }``pages✅Array of pages to capturepages[].name✅Filename prefix (e.g. 01_dashboard)pages[].path✅URL path (e.g. /dashboard)pages[].waitMsNoExtra wait in ms after navigation (default 2000)descriptionsNoMap of name → description text (included in result.json)

Output#

• {outputDir}/{name}.png — one PNG per page
• {outputDir}/result.json — metadata with filenames, titles, URLs, descriptions

result.json Format#

json

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

Capture Login Page Too#

To include the login page as the first screenshot, add it to pages with a special flag:

json

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

When isLoginPage: true, the script captures this page before performing login.

Advanced: Custom Vue Store Login#

If the form-based login doesn't work (e.g., custom auth flow), use storeLogin instead:

json

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

This directly calls pinia._s.get(storeName).method(...args) via CDP.

Troubleshooting#

• Blank charts (ECharts/Chart.js): Headless Chromium has no GPU. Charts using Canvas may render empty. Use --disable-gpu (already included).
• Redirected to login on all pages: Login failed. Check selectors match the actual form elements. Try storeLogin approach.
• SPA navigation not working: Ensure login section is configured. Without login, page.goto() is used instead of $router.push().