browser-automation
GitHub用于本地 Electron 应用开发中的浏览器自动化,通过 CDP 驱动 UI 进行探索、调试及冒烟测试。
Trigger Scenarios
Install
npx skills add different-ai/openwork --skill browser-automation -g -y
SKILL.md
Frontmatter
{
"name": "browser-automation",
"description": "Local OpenWork Electron browser automation with CDP. Use when driving a local Electron dev app, browser_list, browser_snapshot, browser_eval, composer automation, or local UI smoke tests."
}
Browser Automation
For verdicts, do not drive CDP by hand — write or run an evals/specs test (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:
OPENWORK_ELECTRON_REMOTE_DEBUG_PORT=${OPENWORK_ELECTRON_REMOTE_DEBUG_PORT:-9823}
The default browser URL for OpenCode browser tools is:
http://127.0.0.1:9823
The app UI normally loads at:
http://localhost:5173/
To use a different CDP port, launch with an override:
OPENWORK_ELECTRON_REMOTE_DEBUG_PORT=9830 pnpm dev
To disable Electron CDP for a run:
OPENWORK_ELECTRON_REMOTE_DEBUG_PORT=0 pnpm dev
Background Launch
Use a detached launch when the user wants the app running in the background:
nohup pnpm dev > /tmp/openwork-dev.log 2>&1 &
Then wait for the CDP port:
lsof -nP -iTCP:9823 -sTCP:LISTEN
Browser Tool Flow
- List targets with
browser_listusingbrowser_url: "http://127.0.0.1:9823". - Select the
OpenWorktarget ID. - Read state with
browser_evalorbrowser_snapshot. - Fill the Lexical composer by targeting
[contenteditable="true"][data-lexical-editor="true"]. - Click the
Run taskbutton. - Confirm the session response by checking
document.body.innerTextor the current URL.
Send A Session
Use this browser_eval pattern after selecting the OpenWork target:
(() => {
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
OpenWorktarget athttp://127.0.0.1:9823. - The known-good smoke prompt is
Say hello from the Electron browser test.and the expected response isHello from the Electron browser test.
Version History
-
c26be48
Current 2026-09-23 01:44
将日志路径从机器特定路径替换为可移植的 /tmp 路径;添加 YAML frontmatter 以增强技能可发现性。
- ff5d298 2026-08-20 11:35


