capture-dashboard

Dashboard Capture

Capture authenticated web dashboards as screenshots and HTML files using cookie-based authentication with automatic crawling.

Prerequisites

1. Install cookie-editor Chrome Extension

Install the cookie-editor extension to export cookies from your browser:

• Chrome Web Store: https://chrome.google.com/webstore/search/cookie-editor
• Search for "cookie-editor" or "EditThisCookie"

2. Install Dependencies

Required:

• Node.js v16 or higher
• puppeteer: npm install -g puppeteer

The capture script uses puppeteer's bundled Chromium browser.

Quick Start

Basic single-page screenshot capture:

# 1. Export cookies from your authenticated session
# (Use cookie-editor extension, export as JSON, save as cookies.json)

# 2. Run capture
node scripts/capture.js \
  --cookies cookies.json \
  --url https://dashboard.example.com \
  --mode screenshots

Workflow

Step 1: Authenticate and Export Cookies

1. Open your browser and navigate to the dashboard
2. Sign in with your credentials
3. Click the cookie-editor extension icon
4. Click "Export" and select "JSON" format
5. Copy the JSON and save to a file (e.g., cookies.json)

Important: Cookies contain sensitive authentication tokens. Never commit cookie files to version control.

Step 2: Create Configuration File

For advanced usage with crawling, create a config file:

{
  "cookies": "./cookies.json",
  "landing_page": "https://dashboard.example.com",
  "output_dir": "./dashboard-capture",
  "mode": "both",
  "crawl": {
    "enabled": true,
    "max_depth": 2,
    "same_origin_only": true,
    "exclude_patterns": [
      "*logout*",
      "*signout*",
      "*delete*",
      "*remove*",
      "*destroy*"
    ]
  },
  "screenshot": {
    "full_page": true
  },
  "timeout": 30000
}

Step 3: Run Capture Script

With config file:

node scripts/capture.js --config config.json

With command-line arguments:

node scripts/capture.js \
  --cookies cookies.json \
  --url https://dashboard.example.com \
  --mode both \
  --output ./output