DOMAnalyzer Swarm v4

LangGraph-powered DOM analysis with pluggable browser automation (Playwright, Puppeteer, Selenium), Express API, and Socket.IO live updates.

Requires Node.js 18+ to run. (Puppeteer/Playwright/Selenium and LangGraph require it.)

Setup

npm install

Postinstall scripts are skipped (see .npmrc) so install completes on any Node. Use Node 18+ to run the app. After switching to Node 18+, install browser binaries once:

npx playwright install

(Puppeteer will download Chromium on first use when run under Node 18+.)

Optional: create screenshots dir (created automatically at runtime if missing).

Run

npm start

Server listens on PORT (default 3000).

API

POST /analyze

Body: { "task": "string" }

Task string can include:

• on <url> — page to load (default: https://example.com)
• edit <text> — placeholder edit text
• use playwright|puppeteer|selenium — browser tool (default: playwright)
• browser chromium|firefox|webkit — Playwright browser engine (default: chromium; only applies when use playwright)

Example

curl -X POST http://localhost:3000/analyze \
  -H "Content-Type: application/json" \
  -d '{"task": "Test form on https://example.com, edit CSS, demo visually, use playwright"}'

Use Firefox engine:

curl -X POST http://localhost:3000/analyze \
  -H "Content-Type: application/json" \
  -d '{"task": "Test form on https://example.com, edit CSS, use playwright browser firefox"}'

Use WebKit engine:

curl -X POST http://localhost:3000/analyze \
  -H "Content-Type: application/json" \
  -d '{"task": "Test form on https://example.com, edit CSS, use playwright browser webkit"}'

Socket.IO

Connect to receive update events: parse, execute (with visuals, networkLog, traces), analyze (with analysis).

Screenshots

Before/after screenshots: GET /screenshots/before.png, GET /screenshots/after.png.

Playwright Traces

When using Playwright, a trace archive is saved to screenshots/trace.zip and served at GET /screenshots/trace.zip. Open it with npx playwright show-trace screenshots/trace.zip for step-by-step debugging.

Videos

When using Playwright, a video of each run is saved under screenshots/videos/.

Playwright Features

When use playwright is selected the server leverages the full Playwright feature set:

Feature	Details
Multi-browser	Chromium (default), Firefox, WebKit — select with browser <engine>
Network interception	All requests are intercepted via page.route() and returned in analysis.network_requests
Trace recording	context.tracing captures screenshots + DOM snapshots; saved to screenshots/trace.zip
Video recording	recordVideo on browser.newContext() saves a video to screenshots/videos/
Locators API	DOM manipulation uses page.locator() instead of raw querySelector calls

Testing

End-to-end test (starts server on E2E_PORT (default 31999), POSTs /analyze, asserts response). Requires Node 18+ and Playwright installed.

npm run test:e2e

Env

• PORT — server port (default 3000)
• HEADLESS=0 — run browser with GUI (default is headless)