# Browserless > Browserless + FlareSolverr — Full Capability Reference - Skill: `phattbeats/browserless` (Agent Skill) - Install (CLI): `npx skillmds@latest add phattbeats/browserless` - Raw SKILL.md: https://api.skillmd.com/api/skills/phattbeats/browserless/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: phattbeats (https://skillmd.com/u/phattbeats) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/phattbeats/browserless --- # Browserless + FlareSolverr — Full Capability Reference This skill documents everything possible with a headless Chromium browser via CDP (Chrome DevTools Protocol) / Browserless, and FlareSolverr for Cloudflare bypass. Use this when building automation, documenting capabilities, or querying what browser actions are available. --- ## Connection ### Browserless CDP **PHATT-RAID browserless** is running at `http://10.0.0.100:3000` (CDP WebSocket: `ws://10.0.0.100:3000`). Connect via OpenClaw's browser tool with `profile="browserless"` — it handles session management automatically. Alternative: run Chromium locally with remote debugging: ```bash chromium --headless --remote-debugging-port=9222 # then connect to ws://127.0.0.1:9222 ``` ### FlareSolverr (Cloudflare Bypass) **FlareSolverr v3.4.6** is running at `http://10.0.0.100:8191`. Use it to bypass JavaScript challenge protection (Cloudflare, PerimeterX, etc.) before scraping. **API endpoint:** `POST http://10.0.0.100:8191/v1` **Headers:** `Content-Type: application/json` ```bash curl -s -X POST http://10.0.0.100:8191/v1 -H "Content-Type: application/json" -d '{"cmd":"request.get","url":"https://target-site.com","maxTimeout":60000}' ``` **Response structure:** ```json { "status": "ok", "solution": { "url": "https://target-site.com/page", "status": 200, "cookies": [{"name": "cf_clearance", "value": "...", "domain": ".target-site.com", ...}], "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 ...", "headers": {"Content-Type": "text/html"}, "response": "..." } } ``` **When to use FlareSolverr vs. browserless:** - FlareSolverr: Static HTML pages behind Cloudflare challenges. Fast, no browser overhead. - Browserless: Dynamic pages, interactive JavaScript, multi-step sessions, tab management. - Stack them: Get cookies + UA from FlareSolverr, then pass to browserless session via CDP for full interaction. **Recommended stack:** 1. **FlareSolverr** → get clearance cookies + UA 2. **Browserless CDP** → set cookies via `Network.setCookie`, navigate as normal user 3. **Result:** Full browser session that clears Cloudflare without triggering challenges --- ## Navigation | Action | CDP / Playwright | Notes | |---|---|---| | Open URL | `Page.navigate` | Full page load | | Go back | `Page.goBack` | Browser history | | Go forward | `Page.goForward` | Browser history | | Reload | `Page.reload` | Cache-aware reload | **Stealth flags** (set before navigation): - `Emulation.setUserAgentOverride` — custom UA string - `Emulation.setDeviceMetricsOverride` — viewport, mobile sim - `Network.setCookie` — pre-set auth cookies --- ## Page State | Action | CDP / Playwright | Notes | |---|---|---| | Get full HTML | `Page.getContent` | Raw DOM as string | | Get computed style | `CSS.getComputedStyle` | Element styling | | Get all resources | `Page.getResourceTree` | Frames, iframes, assets | | Get resource content | `Page.getResourceContent` | JS/CSS/images | | Get viewport screenshot | `Page.captureScreenshot` | PNG bytes | | Full-page screenshot | same | Scroll + stitch | | Element screenshot | `Element.screenshot` | Single element | **Screenshot options:** - `format`: `png` (default) or `jpeg` (quality可控) - `quality`: 0–100 for jpeg - `clip`: `{x, y, width, height}` for partial capture - `fromSurface`: `true` = capture what GPU renders (ignores viewport) --- ## Content Extraction | Action | CDP / Playwright | Notes | |---|---|---| | DOM snapshot | `Page.captureSnapshot` | Flat text + accessibility tree | | Accessibility tree | `Accessibility.getFullAXTree` | Full a11y tree | | Live DOM query | `Runtime.evaluate` | `document.querySelectorAll()` | | Box model | `DOM.getBoxModel` | Element dimensions + padding/border/margin | | Scroll position | `Runtime.evaluate` | `window.scrollX`, `window.scrollY` | **Live DOM access (evaluate JavaScript):** ```javascript // Anything you can do in browser console, you can do via CDP Runtime.evaluate({ expression: `document.querySelector('#main').textContent`, returnByValue: true }) // Multi-step: get links Runtime.evaluate({ expression: `[...document.querySelectorAll('a')].map(a => ({text: a.textContent, href: a.href}))`, returnByValue: true }) ``` --- ## User Interactions | Action | CDP / Playwright | Notes | |---|---|---| | Click | `Input.dispatchMouseEvent` (type=clicked) | x/y from box model | | Double-click | `Input.dispatchMouseEvent` (type=doubleClicked) | | | Right-click | `Input.dispatchMouseEvent` (type=rightClicked) | Context menu | | Hover | `Input.dispatchMouseEvent` (type=mouseMoved) | | | Drag | `Input.dispatchMouseEvent` (series) | mousedown + moves + mouseup | | Type text | `Input.insertText` | Raw text, no keyboard events | | Key press | `Input.dispatchKeyEvent` | keyDown + keyUp | | Press Enter/Tab | `Input.dispatchKeyEvent` | key: "Enter", "Tab" | | Scroll element | `Element.scrollIntoViewIfNeeded` | Bring into view | | Scroll page | `Input.dispatchMouseEvent` + wheel | Page-level scroll | | Select dropdown | `Element.select` | `` | **Click coordinates from box model:** ``` box = DOM.getBoxModel({nodeId}) center_x = (box.content[0].x + box.content[2].x) / 2 center_y = (box.content[0].y + box.content[3].y) / 2 Input.dispatchMouseEvent({type: 'mousePressed', x: cx, y: cy, button: 'left'}) Input.dispatchMouseEvent({type: 'mouseReleased', x: cx, y: cy, button: 'left'}) ``` --- ## Network Interception | Action | CDP | Notes | |---|---|---| | Capture all requests | `Network.setRequestInterception` | See every resource | | Block URL | `Network.addInterception` with abort | Block ads, trackers | | Mock response | `Fetch.takePendingInterception` | Return fake data | | Get response body | `Network.getResponseBody` | After request completes | | Get request body | `Network.getRequestPostData` | POST data sent | | Set header | `Network.setExtraHTTPHeaders` | Add/override headers | | Auth credentials | `Network.setAuthCredentials` | For basic/digest auth | **Block resources:** ```javascript Network.setRequestInterception({patterns: [ {urlPattern: '*://*.doubleclick.net/*', resourceType: 'image', interception: 'abort'}, {urlPattern: '*://*.google-analytics.com/*', resourceType: 'script', interception: 'abort'}, {urlPattern: '*.css', resourceType: 'stylesheet', interception: 'abort'}, ]}) ``` **Mock API response:** ```javascript Fetch.enable() Fetch.requestPaused(async (e) => { if (e.request.url.includes('/api/')) { Fetch.fulfillRequest({requestId: e.requestId, response: { status: 200, body: JSON.stringify({mocked: true, data: [1,2,3]}), headers: {'Content-Type': 'application/json'} }}) } else { Fetch.continueRequest({requestId: e.requestId}) } }) ``` --- ## State & Storage | Action | CDP / Playwright | Notes | |---|---|---| | Get cookies | `Network.getAllCookies` | All cookies | | Get cookies for URL | `Network.getCookies` | Scope to domain | | Set cookie | `Network.setCookie` | Persistent cookie | | Delete cookie | `Network.deleteCookies` | By name + domain | | localStorage get | `Storage.getOriginStorageKey` | | | localStorage set | `Storage.setLocalStorage` | | | sessionStorage | `Storage.getSessionStorageMetadata` | | | Clear all storage | `Storage.clearData` | Cookies, cache, storage | --- ## Authentication & Sessions | Action | CDP / Playwright | Notes | |---|---|---| | Set cookies for auth | `Network.setCookie` | Pre-login state | | Inject auth token | `Runtime.evaluate` | `localStorage.setItem('token', ...)` | | Get current URL | `Page.getFrameTree` | Check if logged in | | Wait for nav after login | `Page.setLifecycleEvent` | Listen for `networkidle` | | Take screenshot on auth | Screenshot | Verify login state | **Login flow example:** ```javascript // 1. Navigate to login page Page.navigate({url: 'https://example.com/login'}) // 2. Wait for form await waitSelector('#username') // 3. Fill and submit Input.insertText({text: 'user@example.com'}) // click field first Runtime.evaluate({expression: "document.querySelector('#username').value='user@example.com'"}) Runtime.evaluate({expression: "document.querySelector('#password').value='secret'"}) Runtime.evaluate({expression: "document.querySelector('form').submit()"}) // 4. Wait for post-login state Page.setLifecycleEvent({enabled: true}) // or: Network.waitForIdle() ``` --- ## Form Handling | Action | CDP / Playwright | Notes | |---|---|---| | Focus element | `Runtime.evaluate` | `el.focus()` | | Fill text input | Direct value injection | `el.value = 'text'` then `input` event | | Clear input | `Element.setAttribute` | `el.value = ''` then events | | Check/Select radio | `Input.dispatchMouseEvent` | Click the radio | | Check checkbox | Click or `Element.setAttribute` | `checked=true` | | Select option | `Element.select` | For `