SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场electron

electron

测试与质量

查看项目

更新于 10-16 22:15

技能介绍

用途

本技能用于自动化任意 Electron 桌面应用。Electron 应用基于 Chromium 构建，会暴露一个 Chrome DevTools Protocol（CDP）端口，agent-browser 可以连接到该端口，从而复用与网页相同的快照-交互工作流。适用于需要与 Electron 应用交互、自动化桌面应用、连接正在运行的应用、控制原生应用或测试 Electron 应用的场景。

核心工作流

  1. 以启用远程调试的方式启动 Electron 应用
  2. 将 agent-browser 连接到 CDP 端口
  3. 快照以发现可交互元素
  4. 使用元素引用进行交互
  5. 在导航或状态变化后重新快照
# Launch an Electron app with remote debugging
open -a "Slack" --args --remote-debugging-port=9222

# Connect agent-browser to the app
agent-browser connect 9222

# Standard workflow from here
agent-browser snapshot -i
agent-browser click @e5
agent-browser screenshot slack-desktop.png

以 CDP 方式启动 Electron 应用

由于 --remote-debugging-port 标志内置于 Chromium，每个 Electron 应用都支持该标志。

macOS

# Slack
open -a "Slack" --args --remote-debugging-port=9222

# VS Code
open -a "Visual Studio Code" --args --remote-debugging-port=9223

# Discord
open -a "Discord" --args --remote-debugging-port=9224

# Figma
open -a "Figma" --args --remote-debugging-port=9225

# Notion
open -a "Notion" --args --remote-debugging-port=9226

# Spotify
open -a "Spotify" --args --remote-debugging-port=9227

Linux

slack --remote-debugging-port=9222
code --remote-debugging-port=9223
discord --remote-debugging-port=9224

Windows

"C:\Users\%USERNAME%\AppData\Local\slack\slack.exe" --remote-debugging-port=9222
"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --remote-debugging-port=9223

重要： 如果应用已在运行，请先退出，再带该标志重新启动。--remote-debugging-port 标志必须在启动时存在。

连接

# Connect to a specific port
agent-browser connect 9222

# Or use --cdp on each command
agent-browser --cdp 9222 snapshot -i

# Auto-discover a running Chromium-based app
agent-browser --auto-connect snapshot -i

执行 connect 后，后续所有命令都会以已连接的应用为目标，无需再指定 --cdp。

标签页管理

Electron 应用通常有多个窗口或 webview。使用 tab 命令列出并切换它们：

# List all available targets (windows, webviews, etc.)
agent-browser tab

# Switch to a specific tab by index
agent-browser tab 2

# Switch by URL pattern
agent-browser tab --url "*settings*"

Webview 支持

Electron 的 <webview> 元素会被自动发现，并可像普通页面一样被控制。使用 --native 模式时，webview 会作为独立目标出现在标签页列表中，类型为 type: "webview"：

# Connect in native mode
agent-browser --native connect 9222

# List targets -- webviews appear alongside pages
agent-browser tab
# Example output:
#   0: [page]    Slack - Main Window     https://app.slack.com/
#   1: [webview] Embedded Content        https://example.com/widget

# Switch to a webview
agent-browser tab 1

# Interact with the webview normally
agent-browser snapshot -i
agent-browser click @e3
agent-browser screenshot webview.png

注意： Webview 支持需要 --native 模式（原始 CDP）。基于 Playwright 的模式不支持 webview 目标。

常见模式

检查并导航应用

open -a "Slack" --args --remote-debugging-port=9222
sleep 3  # Wait for app to start
agent-browser connect 9222
agent-browser snapshot -i
# Read the snapshot output to identify UI elements
agent-browser click @e10  # Navigate to a section
agent-browser snapshot -i  # Re-snapshot after navigation

截取桌面应用截图

agent-browser connect 9222
agent-browser screenshot app-state.png
agent-browser screenshot --full full-app.png
agent-browser screenshot --annotate annotated-app.png

从桌面应用提取数据

agent-browser connect 9222
agent-browser snapshot -i
agent-browser get text @e5
agent-browser snapshot --json > app-state.json

在桌面应用中填写表单

agent-browser connect 9222
agent-browser snapshot -i
agent-browser fill @e3 "search query"
agent-browser press Enter
agent-browser wait 1000
agent-browser snapshot -i

同时运行多个应用

使用命名会话可同时控制多个 Electron 应用：

# Connect to Slack
agent-browser --session slack connect 9222

# Connect to VS Code
agent-browser --session vscode connect 9223

# Interact with each independently
agent-browser --session slack snapshot -i
agent-browser --session vscode snapshot -i

配色方案

通过 CDP 连接时，Playwright 默认会将配色方案覆盖为 light。如需保留深色模式：

agent-browser connect 9222
agent-browser --color-scheme dark snapshot -i

或全局设置：

AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222

故障排查

“Connection refused”或“Cannot connect”

  • 确认应用是以 --remote-debugging-port=NNNN 启动的
  • 如果应用已在运行，请退出并带该标志重新启动
  • 检查端口是否被其他进程占用：lsof -i :9222

应用已启动但连接失败

  • 启动后等待几秒再连接（sleep 3）
  • 某些应用需要时间初始化其 webview

快照中未出现元素

  • 应用可能使用了多个 webview。使用 agent-browser tab 列出目标并切换到正确的那个
  • 使用 agent-browser snapshot -i -C 以包含光标可交互元素（带 onclick 处理器的 div）

无法在输入框中输入

  • 尝试 agent-browser keyboard type "text" 在当前焦点处输入，无需选择器
  • 某些 Electron 应用使用自定义输入组件；使用 agent-browser keyboard inserttext "text" 绕过按键事件

支持的应用

任何基于 Electron 构建的应用都可用，包括：

  • 通信： Slack、Discord、Microsoft Teams、Signal、Telegram Desktop
  • 开发： VS Code、GitHub Desktop、Postman、Insomnia
  • 设计： Figma、Notion、Obsidian
  • 媒体： Spotify、Tidal
  • 效率： Todoist、Linear、1Password

如果应用基于 Electron 构建，它就支持 --remote-debugging-port，并可用 agent-browser 自动化。