plain-English goals | vision-enabled, any site | screenshot + DOM evidence per turn | MIT licensed · npm i -g
HOW IT RUNS
CLI for one-offs. SDK for CI.
Same engine, two surfaces. bad run drives an attached Chrome for explore-and-debug; the SDK runs headless in CI with deterministic seeds.
$ bad run --goal "Sign up, verify dashboard loads" \
--url https://your-app.com --model claude-sonnet-4-6
# turn 1 · navigate
→ goto https://your-app.com · 312ms · 200 OK
# turn 2 · plan
→ click "Sign up" · header CTA
→ type "[email protected]" · #email
→ type "••••••••" · #password
→ click "Create account"
# turn 3 · verify
→ wait_for 'h1:has-text("Dashboard")' · visible in 814ms
→ screenshot · artifacts/turn-3.png
✓ Goal achieved · 3 turns · 4.7s · 1 screenshot · DOM trace
import { BrowserAgent } from "@tangle-network/browser-agent-driver";
const agent = new BrowserAgent({
model: "anthropic/claude-sonnet-4-6",
apiKey: process.env.TANGLE_API_KEY,
});
const result = await agent.run({
goal: "Sign up, verify dashboard loads",
url: "https://your-app.com",
evidence: "screenshots+dom",
});
if (!result.achieved) {
throw new Error(result.failureReason);
}
// every turn has a screenshot, DOM snapshot, and reasoning trace
for (const turn of result.turns) {
console.log(turn.action, turn.screenshot);
}
WHERE TEAMS RUN IT
From PR smoke to release-blocker audits.
Describe what matters. The agent finds the bug, keeps the evidence.
PR SMOKE
Every PR runs 30+ goals.
Run on every preview URL. Fails the build on a miss, posts evidence to the PR.
DESIGN AUDITS
WCAG + brand in one pass.
Per-page punchlist: contrast ratios, spacing drift, broken components.
COMPETITIVE RECON
Watch what competitors ship.
Diff copy, pricing, flows over time. Pipe to Slack.
ONE COMMAND
Describe the test. Get evidence.
CLI for one-offs. TypeScript SDK for CI.
$ bad run --goal "Sign up, verify dashboard loads" \
--url https://your-app.com --model claude-sonnet-4-6
# turn 1 · navigate
→ goto https://your-app.com · 312ms · 200 OK
# turn 2 · plan
→ click "Sign up" · header CTA
→ type "[email protected]" · #email
→ type "••••••••" · #password
→ click "Create account"
# turn 3 · verify
→ wait_for 'h1:has-text("Dashboard")' · visible in 814ms
→ screenshot · artifacts/turn-3.png
✓ Goal achieved · 3 turns · 4.7s · 1 screenshot · DOM trace
import { BrowserAgent } from "@tangle-network/browser-agent-driver";
const agent = new BrowserAgent({
model: "anthropic/claude-sonnet-4-6",
apiKey: process.env.TANGLE_API_KEY,
});
const result = await agent.run({
goal: "Sign up, verify dashboard loads",
url: "https://your-app.com",
evidence: "screenshots+dom",
});
if (!result.achieved) {
throw new Error(result.failureReason);
}
// every turn has a screenshot, DOM snapshot, and reasoning trace
for (const turn of result.turns) {
console.log(turn.action, turn.screenshot);
}
BROWSER AGENT WORKFLOWS
Watch a real run, turn by turn.
Goal in. Goto, click, type, verify. Screenshot + DOM evidence per turn. Real @tangle-network/browser-agent-driver API.
$ bad run \
--goal "Sign up, verify email, check dashboard" \
--url https://your-app.com \
--model claude-sonnet-4-6 --vision
# turn 1 · navigate
→ goto /signup · 312ms · 200 OK
→ type "[email protected]" · #email
→ click "Create account"
→ wait_for 'h1:has-text("Dashboard")' · 814ms
→ screenshot · artifacts/turn-3.png
✓ Goal achieved · 6 turns · 12.1s · video + DOM trace
import { BrowserAgent, PlaywrightDriver } from "@tangle-network/browser-agent-driver";
import { chromium } from "playwright";
const browser = await chromium.launch();
const page = await browser.newPage();
const agent = new BrowserAgent({
driver: new PlaywrightDriver(page),
config: { model: "claude-sonnet-4-6", vision: true },
});
const result = await agent.run({
goal: "Sign up, verify email, check dashboard",
startUrl: "https://your-app.com",
});
✓ result.success // true
✓ result.turns // 6
✓ result.screenshots // ["turn-1.png", ...]
$ bad run --cases tests/e2e.json --concurrency 4
# Running 5 test cases (4 concurrent)
✓ signup · 4 turns · 8.1s
✓ login · 2 turns · 3.4s
✓ create-project · 6 turns · 14.2s
✗ billing · stuck at payment modal
✓ settings · 3 turns · 5.8s
Pass: 4/5 · Fail: 1 · Duration: 31.5s · Report: results/report.html
import { BrowserAgent } from "@tangle-network/browser-agent-driver";
const cases = [
{ id: "signup", goal: "Create account", startUrl: "/signup" },
{ id: "login", goal: "Login with credentials", startUrl: "/login" },
{ id: "billing", goal: "Update payment method", startUrl: "/billing" },
];
const results = await agent.runBatch(cases, { concurrency: 4 });
results.forEach((r) => console.log(r.id, r.success));
✓ 4 passed · 1 failed · 31.5s
$ bad design-audit \
--url https://your-app.com \
--pages "/, /pricing, /docs" \
--extract-tokens
# Auditing 3 pages at 1440×900
Health Score: 82/100
⚠ Typography: 3 inconsistent font sizes
⚠ Spacing: 12px / 16px mixed in cards
✓ Colors: consistent palette
✓ Contrast: WCAG AA compliant
Tokens → design-tokens.json · Screenshots → ./audit-results/
const audit = await agent.designAudit({
url: "https://your-app.com",
pages: ["/", "/pricing", "/docs"],
extractTokens: true,
});
✓ audit.score // 82
✓ audit.findings // [{ type, severity, msg }]
✓ audit.tokens // { colors, fonts, spacing }
$ bad visual-diff \
--baseline ./screenshots/v1 \
--current https://staging.your-app.com \
--threshold 0.02
# Comparing 8 pages against baseline
✓ / · 0.00% diff
✓ /pricing · 0.01% diff
⚠ /dashboard · 4.21% diff, layout shift detected
✓ /settings · 0.00% diff
1 regression detected · Diff images → ./visual-diff/
const diff = await agent.visualDiff({
baseline: "./screenshots/v1",
currentUrl: "https://staging.your-app.com",
threshold: 0.02,
});
for (const r of diff.regressions) {
console.log(r.path, r.diffPercent);
}
✓ 1 regression · /dashboard · 4.21%
Capabilities
One package: E2E, regression, audit, web3.
E2E Testing
Whole flows in one sentence.
Signup, checkout, onboarding: one prompt, one run.
navigate
→ type email
→ type password
→ click "Sign Up"
→ verify dashboard
Visual Regression
Catch design drift.
Vision-diff against baselines, per page.
0 visual regressions detected
Self-Healing
Recover without human eyes.
Stuck detection, auto-retry, overlay dismiss.
stuck detected
recovered → continue
Design Audit
Score any site's UI in one pass.
Extract tokens, flag drift, return a structured report.
82
health score
Typography: 3 inconsistent sizes
Colors: consistent palette
Contrast: WCAG AA compliant
Parallel Execution
1 to 100 browsers.
Concurrent, dependency-aware.
Trajectory Memory
Reliability climbs with every run.
Case-based reasoning over prior runs.
Reliability 98%
Learn more
Frequently Asked Questions
What is Browser Agent?
A browser automation agent. Describe a goal in English. It launches Chromium, navigates, clicks, types, verifies, and saves screenshots and DOM per turn.
How does it work?
Goal + URL in. Vision-capable model decides each action, Playwright executes it. Every turn produces a screenshot, DOM snapshot, and reasoning trace.
What models does it support?
Claude, GPT, and other vision-capable models. Choose per run with --model.
Is it open source?
Yes. MIT. npm i -g @tangle-network/browser-agent-driver. Source: github.com/tangle-network/browser-agent-driver.
