browser-automation

# Browser Automation For verdicts, do not drive CDP by hand — write or run an `evals/core` journey or `evals/proofs` proof (`write-a-spec`, `run-tests`). This skill is for exploration and debugging only. ## What I Do - Attach OpenCode browser tools to the OpenWork Electron app during local development. - Drive the app UI through Electron's Chrome DevTools Protocol endpoint. - Send a task/session from the composer and confirm the response in the UI. ## Local Dev Setup `pnpm dev` enables Electron CDP by default: ```sh OPENWORK_ELECTRON_REMOTE_DEBUG_PORT=${OPENWORK_ELECTRON_REMOTE_DEBUG_PORT:-9823} ``` The default browser URL for OpenCode browser tools is: ```text http://127.0.0.1:9823 ``` The app UI normally loads at: ```text http://localhost:5173/ ``` To use a different CDP port, launch with an override: ```sh OPENWORK_ELECTRON_REMOTE_DEBUG_PORT=9830 pnpm dev ``` To disable Electron CDP for a run: ```sh OPENWORK_ELECTRON_REMOTE_DEBUG_PORT=0 pnpm dev ``` ## Background Launch Use a detached launch when the user wants the app running in the background: ```sh nohup pnpm dev > /tmp/openwork-dev.log 2>&1 & ``` Then wait for the CDP port: ```sh lsof -nP -iTCP:9823 -sTCP:LISTEN ``` ## Browser Tool Flow 1. List targets with `browser_list` using `browser_url: "http://127.0.0.1:9823"`. 2. Select the `OpenWork` target ID. 3. Read state with `browser_eval` or `browser_snapshot`. 4. Fill the Lexical composer by targeting `[contenteditable="true"][data-lexical-editor="true"]`. 5. Click the `Run task` button. 6. Confirm the session response by checking `document.body.innerText` or the current URL. ## Send A Session Use this `browser_eval` pattern after selecting the OpenWork target: ```js (() => { const editor = document.querySelector('[contenteditable="true"][data-lexical-editor="true"]'); if (!editor) return { ok: false, reason: 'editor not found' }; editor.focus(); const data = new DataTransfer(); data.setData('text/plain', 'Say hello from the Electron browser test.'); editor.dispatchEvent(new ClipboardEvent('paste', { bubbles: true, cancelable: true, clipboardData: data, })); const run = Array.from(document.querySelectorAll('button')) .find((button) => button.innerText.trim() === 'Run task'); if (!run) return { ok: false, reason: 'Run task not found', inserted }; if (run.disabled) return { ok: false, reason: 'Run task disabled', inserted, text: editor.innerText }; run.click(); return { ok: true, inserted: true, text: editor.innerText }; })() ``` ## Notes - Electron CDP is used for development test tooling. User browser tasks should use the built-in OpenWork Browser target. - A successful local attach should show an `OpenWork` target at `http://127.0.0.1:9823`. - The known-good smoke prompt is `Say hello from the Electron browser test.` and the expected response is `Hello from the Electron browser test.`