agent-browser-monitor

Browser monitoring and data capture tool based on agent-browser.

Auto-login to a web page, take periodic screenshots, capture network/console/error data, and generate an HTML visual report.

Features

• Auto-login - Automatically fill username/password and click login
• Periodic screenshots - Take screenshots at configurable intervals
• Network capture - Record all HTTP requests in HAR format
• Console capture - Capture all console.log/warn/error output
• Error tracking - Catch all page errors
• Performance trace - Chrome Trace recording
• Page snapshot - Accessibility tree snapshot
• HTML report - Beautiful visual report with screenshot timeline

Prerequisites

# Install agent-browser globally
npm install -g agent-browser

# Download Chrome (first time only)
agent-browser install

Install

# Install from npm
npm install agent-browser-monitor

# Or install globally for CLI usage
npm install -g agent-browser-monitor

Quick Start

CLI Usage

After global install, use the abm-capture command:

# Basic - 30s capture with visible browser
abm-capture --url "http://example.com/login" --user "admin" --pass "123456"

# Custom duration 60s, screenshot every 3s
abm-capture --url "http://example.com/login" --user "admin" --pass "123456" --duration 60 --interval 3

# Headless mode (no visible browser window)
abm-capture --url "http://example.com/login" --user "admin" --pass "123456" --headless

# Custom output directory
abm-capture --url "http://example.com/login" --user "admin" --pass "123456" --output ./my-output

CLI Options

| Option | Description | Default | |--------|-------------|---------| | --url <loginUrl> | Login page URL (required) | - | | --user <username> | Username (required) | - | | --pass <password> | Password (required) | - | | --duration <seconds> | Capture duration in seconds | 30 | | --interval <seconds> | Screenshot interval in seconds | 5 | | --output <dir> | Output directory | ./output | | --headless | Run without visible browser | false |

Programmatic Usage

import { QuickCapture } from 'agent-browser-monitor';

const capture = new QuickCapture({
  loginUrl: 'http://example.com/login',
  username: 'admin',
  password: '123456',
  duration: 30,       // seconds
  interval: 5,        // screenshot interval in seconds
  outputDir: './output',
  headed: true         // show browser window
});

// Run capture and get result
const result = await capture.run();

console.log(result.screenshots);  // Array of screenshot info
console.log(result.url);          // Final page URL
console.log(result.title);        // Final page title
console.log(result.errors);       // Captured errors

QuickCapture Options

| Option | Type | Description | Default | |--------|------|-------------|---------| | loginUrl | string | Login page URL (required) | - | | username | string | Username (required) | - | | password | string | Password (required) | - | | duration | number | Capture duration in seconds | 30 | | interval | number | Screenshot interval in seconds | 5 | | outputDir | string | Output directory | ./output | | headed | boolean | Show browser window | true | | session | string | Browser session name | auto-generated |

Workflow

When you run abm-capture, the tool will:

1. Open browser and navigate to the login URL
2. Auto-fill username and password fields (tries multiple selectors)
3. Click login button
4. Start recording - Trace + HAR network capture
5. Take screenshots at the configured interval
6. Capture data - console logs, errors, page snapshot
7. Generate report - HTML visual report with all data
8. Close browser

Output Files

output/
├── report.html           # Visual HTML report (open in browser)
├── recording.json        # Recording metadata
├── trace.json            # Chrome performance trace
├── network.har           # Network requests (HAR format)
├── console.json          # Console logs
├── errors.json           # Page errors
├── snapshot.txt          # Page accessibility snapshot
└── screenshots/          # All screenshots
    ├── 01-login-page.png
    ├── 02-filled-form.png
    ├── 03-after-login.png
    ├── shot-4-*.png
    └── final-page.png

| File | Description | How to View | |------|-------------|-------------| | report.html | Visual report with everything | Open in browser | | trace.json | Performance trace | Chrome DevTools > Performance > Load | | network.har | Network request details | Chrome DevTools > Network > Import HAR | | console.json | Console logs (JSON) | Text editor or report.html | | errors.json | Page errors (JSON) | Text editor or report.html | | snapshot.txt | Page accessibility tree | Text editor | | screenshots/ | Chronological screenshots | Image viewer or report.html |

Integration Examples

In your Node.js project

import { QuickCapture } from 'agent-browser-monitor';

async function capturePageData(url, user, pass) {
  const capture = new QuickCapture({
    loginUrl: url,
    username: user,
    password: pass,
    duration: 30,
    headed: false  // headless for server-side
  });

  const result = await capture.run();
  return result;
}

In CI/CD pipeline

# .github/workflows/capture.yml
name: Browser Capture
on:
  schedule:
    - cron: '0 */6 * * *'
jobs:
  capture:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm install -g agent-browser agent-browser-monitor
      - run: agent-browser install --with-deps
      - run: abm-capture --url "${{ secrets.LOGIN_URL }}" --user "${{ secrets.USER }}" --pass "${{ secrets.PASS }}" --headless --duration 60
      - uses: actions/upload-artifact@v4
        with:
          name: capture-report
          path: output/

License

MIT