Figranium可视化浏览器自动化：低代码构建与API集成实战

在自动化测试、数据抓取和网页交互脚本开发中你是否厌倦了手动编写和维护复杂的浏览器操作代码当业务需要模拟用户登录、表单提交、数据提取或页面监控时传统的 Selenium 或 Puppeteer 脚本虽然强大但开发调试周期长对非专业开发者门槛较高。Figranium的出现为这类场景提供了一种全新的解决方案通过可视化拖拽构建浏览器任务流并通过标准 API 一键执行整个过程支持 Docker 容器化部署极大地简化了浏览器自动化的工程实践。本文将为你完整拆解 Figranium 的核心概念、架构设计、从零开始的部署流程以及如何通过 API 集成到你的项目中。无论你是测试工程师、后端开发者还是需要处理网页自动化任务的数据分析师都能通过本文掌握一套高效、可复用的实战方案。1. Figranium 是什么核心概念与价值1.1 可视化浏览器任务构建器Figranium 的核心定位是一个“可视化浏览器任务构建与执行平台”。你可以将其理解为一个低代码/无代码工具专门用于编排在浏览器中执行的一系列操作。传统方式使用 Python Selenium你需要编写诸如find_element,click,send_keys的代码并处理等待、iframe、弹窗等各种边界情况。Figranium 方式在一个图形化界面中通过拖拽预定义的“动作块”如“打开网页”、“输入文本”、“点击元素”、“提取数据”并以连线的方式定义执行流程。这大大降低了创建自动化脚本的技术门槛。1.2 API 驱动的任务执行构建好的任务流并不是在 Figranium 的界面上直接运行。Figranium 将其封装成可通过 HTTP API 调用的服务。这意味着解耦设计与执行你可以在 Figranium 的 Web UI 中精心设计和调试你的任务流程。集成到任何系统任何能发送 HTTP 请求的程序你的后端服务、定时任务、命令行工具都可以通过调用 Figranium 提供的 API触发一个或多个浏览器任务的执行。标准化与复用任务被定义为可复用的“资产”通过 API 调用可以在不同场景、不同时间被反复执行。1.3 Dockerized 部署“Dockerized”意味着 Figranium 被打包成了 Docker 镜像。这带来了几个关键优势环境一致性避免了“在我机器上能跑”的经典问题。无论是在开发、测试还是生产环境只要运行同一个 Docker 镜像Figranium 的运行环境就是完全一致的。快速部署一条docker run命令即可启动全套服务通常包含前端 UI、后端 API 服务器和浏览器运行环境。资源隔离与扩展每个 Figranium 实例运行在独立的容器中互不干扰。你可以轻松地通过 Docker Compose 或 Kubernetes 来编排多个实例以支持高并发任务执行。1.4 解决什么问题降低自动化门槛让不擅长编程的运营、产品人员也能创建简单的网页自动化流程。提升开发效率对于开发者可视化构建可以快速原型验证省去大量样板代码的编写。便于协作与维护任务流程以图形化方式呈现逻辑一目了然比阅读代码更易于团队理解和维护。打造自动化服务通过 API你可以将浏览器自动化能力作为一项微服务提供给其他系统调用构建更复杂的自动化工作流。2. 环境准备与部署指南在开始使用 Figranium 之前我们需要搭建其运行环境。由于它是 Dockerized 的所以核心依赖就是 Docker 环境。2.1 基础环境要求操作系统支持 Linux (推荐 Ubuntu/CentOS)、macOS 或 Windows (需安装 Docker Desktop)。Docker版本 20.10.0 或更高。确保 Docker 服务已启动。Docker Compose版本 1.29.0 或更高如果使用 Compose 部署方式。Figranium 的部署通常需要协调多个容器Web UI、API Server、浏览器实例Compose 是最佳选择。网络服务器需要能访问外网以便拉取 Docker 镜像和任务中需要访问的目标网页。硬件建议至少 2核 CPU4GB 内存。运行浏览器实例尤其是多个并发比较消耗资源。2.2 获取 Figranium 部署文件通常开源项目会提供docker-compose.yml文件来定义服务。你需要从 Figranium 的官方代码仓库如 GitHub获取这个文件。假设项目仓库地址为https://github.com/figranium/figranium你可以通过以下命令获取# 克隆仓库如果提供 git clone https://github.com/figranium/figranium.git cd figranium/deploy # 进入部署目录 # 或者直接下载 docker-compose.yml 文件 curl -O https://raw.githubusercontent.com/figranium/figranium/main/docker-compose.yml重要提示由于 Figranium 是一个相对较新的 Show HN 项目其具体的仓库地址和部署文件可能发生变化。请以项目官方文档为准。本文的示例基于此类项目的通用结构。2.3 使用 Docker Compose 启动一个典型的docker-compose.yml文件可能如下所示version: 3.8 services: figranium-ui: image: figranium/ui:latest ports: - 3000:3000 environment: - API_SERVER_URLhttp://figranium-api:8080 depends_on: - figranium-api networks: - figranium-net figranium-api: image: figranium/api:latest ports: - 8080:8080 environment: - REDIS_URLredis://figranium-redis:6379 - BROWSER_WS_URLws://figranium-browser:3000 volumes: - ./data:/app/data depends_on: - figranium-redis - figranium-browser networks: - figranium-net figranium-browser: image: browserless/chrome:latest ports: - 3001:3000 environment: - CONNECTION_TIMEOUT60000 - MAX_CONCURRENT_SESSIONS10 networks: - figranium-net figranium-redis: image: redis:alpine ports: - 6379:6379 volumes: - redis-data:/data networks: - figranium-net networks: figranium-net: driver: bridge volumes: redis-data:服务说明figranium-ui可视化任务构建器的前端界面运行在 3000 端口。figranium-api核心 API 服务器接收任务执行请求运行在 8080 端口。它将任务数据持久化到挂载的./data目录。figranium-browser使用browserless/chrome镜像提供无头 Chrome 浏览器环境供 API 服务器驱动执行任务。figranium-redisRedis 数据库用于缓存任务状态、管理队列等。在包含docker-compose.yml的目录下执行以下命令启动所有服务# 启动服务后台运行 docker-compose up -d # 查看服务运行状态 docker-compose ps # 查看实时日志 docker-compose logs -f figranium-api启动成功后你可以通过浏览器访问http://你的服务器IP:3000来打开 Figranium 的可视化构建界面。3. 核心功能与可视化构建实战3.1 初识 Figranium 用户界面访问 UI (端口 3000) 后你通常会看到以下核心区域组件库/动作面板罗列所有可用的浏览器操作“块”如“Navigate”导航、“Click”点击、“Type”输入、“Extract Text”提取文本、“Screenshot”截图、“Condition”条件判断、“Loop”循环等。画布/工作区拖拽动作块到此区域并通过连线连接它们构建任务流程图。属性/配置面板选中画布上的某个动作块在此面板配置其具体参数如要导航的URL、要点击的元素选择器、要输入的文本等。任务列表/项目管理管理已创建的不同任务流。3.2 构建你的第一个任务自动搜索并提取结果我们以“在百度搜索关键词并提取第一页结果标题”为例演示构建流程。步骤 1创建新任务在 UI 中点击“New Task”或“创建新任务”命名为baidu_search_demo。步骤 2拖拽动作块并连线Navigate从组件库拖出“Navigate”块到画布。在属性面板设置URL为https://www.baidu.com。这个块代表打开百度首页。Type拖出“Type”块连接到“Navigate”块的下方。在属性面板设置Selector:#kw(这是百度搜索输入框的CSS选择器)。Text:Figranium 自动化测试。Delay (ms):500(可选模拟人类输入延迟)。Click拖出“Click”块连接到“Type”块下方。设置Selector为#su(百度一下按钮)。Wait For Navigation拖出“Wait”块或类似功能块连接到“Click”块下方。设置Wait For为navigation或Timeout为10000等待页面跳转完成。Extract Data拖出“Extract”块连接到“Wait”块下方。这是我们任务的核心——获取数据。配置提取规则通常你需要指定一个“选择器”来定位多个结果项例如.result.c-container h3。然后为每个匹配的元素定义一个“提取字段”。例如定义一个字段title其提取方式为element.textContent。最终这个块会输出一个包含所有结果标题的数组如[“Figranium 官网”, “GitHub - figranium”, “…]。Return/Output拖出一个“Return”或“Output”块连接到“Extract”块下方。将上一步提取的数据数组赋值给输出变量例如output extracted_titles。最终你的画布上应该有一条清晰的流程线Navigate - Type - Click - Wait - Extract - Return。步骤 3调试与运行保存任务。点击“Run”或“Test”Figranium UI 通常会启动一个调试会话在界面内嵌的浏览器或新窗口中执行你构建的流程。查看执行日志与结果执行过程中你可以看到每个步骤的日志成功/失败。执行完成后在结果面板可以看到提取到的标题列表。通过这个简单的例子你已经体验了可视化构建的核心逻辑定义步骤What - 配置细节How - 连接顺序When。3.3 高级功能条件、循环与变量变量你可以在任务中定义变量如search_keyword并在后续的“Type”块中引用它Text: {{search_keyword}}。这使得任务可参数化。条件判断使用“Condition”块。例如你可以判断“Extract”块提取的数组是否为空如果为空则走一条发送警报的路径否则走正常处理路径。循环使用“Loop”块。例如你可以遍历一个URL列表对每个URL执行相同的抓取操作。这些高级功能让你能构建出非常复杂和智能的浏览器工作流。4. API 调用详解将任务集成到你的系统可视化构建是手段API 调用才是将自动化能力赋能给其他系统的关键。4.1 API 概览Figranium API Server (端口 8080) 通常提供 RESTful 接口。以下是一些核心端点具体路径需参考官方文档GET /api/tasks获取所有任务列表。GET /api/tasks/{id}获取特定任务的详情包括其流程定义。POST /api/executions创建一个新的任务执行实例。GET /api/executions/{id}查询某个执行实例的状态和结果。POST /api/tasks/{id}/run可能是一个直接运行任务的快捷端点。4.2 执行一个任务完整代码示例假设我们已经通过 UI 创建了一个任务其ID为task_baidu_search。现在我们通过 API 来触发它。使用 cURL 调用curl -X POST http://localhost:8080/api/executions \ -H Content-Type: application/json \ -d { taskId: task_baidu_search, parameters: { keyword: Docker 容器化 }, callbackUrl: https://your-server.com/webhook/figranium # 可选执行完成后回调通知 }请求体说明taskId: 要执行的任务ID。parameters: 传递给任务的运行时参数。这对应着你在UI中定义的变量。例如任务里可能有一个变量{{keyword}}这里传入Docker 容器化任务执行时就会使用这个值进行搜索。callbackUrl: 可选。任务执行完成后无论成功失败Figranium API 会向这个 URL 发送一个 POST 请求包含执行结果。这对于异步处理非常有用。响应示例{ executionId: exec_abc123, taskId: task_baidu_search, status: queued, createdAt: 2023-10-27T08:00:00Z }你得到了一个executionId用于后续查询结果。4.3 查询执行结果使用上一步得到的executionId来查询状态和获取数据。curl -X GET http://localhost:8080/api/executions/exec_abc123响应示例执行中{ executionId: exec_abc123, taskId: task_baidu_search, status: running, startedAt: 2023-10-27T08:00:05Z, currentStep: Extract Data }响应示例执行成功{ executionId: exec_abc123, taskId: task_baidu_search, status: succeeded, startedAt: 2023-10-27T08:00:05Z, finishedAt: 2023-10-27T08:00:15Z, result: { output: [ Docker 容器化入门教程 - CSDN, 什么是 Docker 容器 | Docker 官方文档, Docker 从入门到实践 - GitBook ] } }响应示例执行失败{ executionId: exec_abc123, taskId: task_baidu_search, status: failed, startedAt: 2023-10-27T08:00:05Z, finishedAt: 2023-10-27T08:00:08Z, error: { step: Click, message: Element not found with selector: #su, details: ... } }4.4 在 Python/Node.js 项目中集成在实际项目中你需要在代码中调用这些 API。Python 示例 (使用 requests 库)import requests import time FIGRANIUM_API_BASE http://localhost:8080 def run_figranium_task(task_id, paramsNone): 触发 Figranium 任务执行 url f{FIGRANIUM_API_BASE}/api/executions payload { taskId: task_id, parameters: params or {} } resp requests.post(url, jsonpayload) resp.raise_for_status() return resp.json()[executionId] def get_execution_result(execution_id, timeout60, interval2): 轮询获取任务执行结果 url f{FIGRANIUM_API_BASE}/api/executions/{execution_id} start_time time.time() while time.time() - start_time timeout: resp requests.get(url) resp.raise_for_status() data resp.json() status data[status] if status succeeded: return data[result] # 返回成功结果 elif status failed: raise Exception(fTask failed: {data.get(error, Unknown error)}) elif status in [queued, running]: print(fTask is {status}, waiting...) time.sleep(interval) else: raise Exception(fUnexpected status: {status}) raise TimeoutError(Task execution timeout) # 使用示例 if __name__ __main__: try: exec_id run_figranium_task(task_baidu_search, {keyword: Python API 调用}) print(fTask started. Execution ID: {exec_id}) result get_execution_result(exec_id) print(Search results:, result.get(output, [])) except Exception as e: print(fError: {e})Node.js 示例 (使用 axios)const axios require(axios); const FIGRANIUM_API_BASE http://localhost:8080; async function runFigraniumTask(taskId, params {}) { const url ${FIGRANIUM_API_BASE}/api/executions; const response await axios.post(url, { taskId, parameters: params }); return response.data.executionId; } async function getExecutionResult(executionId, timeout 60000, interval 2000) { const url ${FIGRANIUM_API_BASE}/api/executions/${executionId}; const startTime Date.now(); while (Date.now() - startTime timeout) { try { const response await axios.get(url); const data response.data; switch (data.status) { case succeeded: return data.result; case failed: throw new Error(Task failed: ${data.error?.message || Unknown error}); case queued: case running: console.log(Task is ${data.status}, waiting...); await new Promise(resolve setTimeout(resolve, interval)); break; default: throw new Error(Unexpected status: ${data.status}); } } catch (error) { throw error; } } throw new Error(Task execution timeout); } // 使用示例 (async () { try { const execId await runFigraniumTask(task_baidu_search, { keyword: Node.js 爬虫 }); console.log(Task started. Execution ID: ${execId}); const result await getExecutionResult(execId); console.log(Search results:, result?.output || []); } catch (error) { console.error(Error:, error.message); } })();5. 常见问题与排查思路在部署和使用 Figranium 过程中你可能会遇到以下问题。问题现象可能原因排查步骤与解决方案Docker Compose 启动失败1. 端口被占用2. 镜像拉取失败3. 内存不足1.docker-compose ps查看端口冲突修改docker-compose.yml中的端口映射。2.docker-compose logs查看具体错误检查网络尝试docker pull镜像。3.docker stats查看资源使用增加 Docker 内存分配或服务器资源。UI 无法访问 (localhost:3000)1. 服务未启动2. 防火墙限制3. 容器内部错误1.docker-compose ps确认figranium-ui服务状态为Up。2. 检查服务器防火墙/安全组是否开放了3000端口。3.docker-compose logs figranium-ui查看前端容器日志。API 调用返回 404 或连接拒绝1. API 服务未运行2. 网络配置错误3. 路径错误1. 确认figranium-api容器运行正常端口 8080 可访问。2. 在 Docker 内部使用docker-compose exec figranium-api curl localhost:8080/health检查 API 健康状态。3. 核对 API 文档确认端点路径是否正确。任务执行失败错误提示元素未找到1. 页面加载未完成2. 元素选择器错误或已变更3. 页面存在 iframe 或 Shadow DOM1. 在“Click”或“Type”等操作前添加“Wait”块等待元素出现。2. 使用浏览器开发者工具重新检查并更新元素选择器。3. 对于 iframe需要使用“Switch to Frame”块对于 Shadow DOM可能需要特殊的选择器或使用 JavaScript 执行。任务执行超时1. 网络慢或目标网站响应慢2. 任务逻辑有无限循环3. 浏览器实例崩溃1. 在任务配置或 API 调用时增加超时时间。2. 检查任务流程图中的循环逻辑确保有正确的退出条件。3. 查看figranium-browser容器的日志 (docker-compose logs figranium-browser)。提取的数据为空或格式不对1. 提取选择器未匹配到任何元素2. 提取的字段配置错误3. 页面结构是动态加载的1. 在“Extract”块中使用更通用的选择器或在 UI 调试模式下查看当前页面的 HTML 结构。2. 确认字段的提取方式如textContent,innerHTML,getAttribute(‘href’)是否正确。3. 在提取数据前添加等待或触发页面滚动的操作确保数据已加载。API 返回429 Too Many Requests并发任务数超过限制1. 检查figranium-browser服务的MAX_CONCURRENT_SESSIONS环境变量设置。2. 在你的调用代码中实现请求队列或增加重试间隔。api error: 400相关错误请求参数不符合 API 规范1. 仔细检查 API 请求的 JSON 结构、字段名和数据类型。2. 查阅 Figranium API 文档确认必填字段和参数格式。3. 对于thinking_budget等特定参数错误确认传入的是正整数。6. 最佳实践与工程建议将 Figranium 用于生产环境时遵循以下最佳实践可以提升稳定性、可维护性和安全性。6.1 任务设计最佳实践模块化与复用将通用的操作序列如“登录网站”、“处理弹窗”构建成独立的子任务或模板。在复杂任务中通过调用或引用来复用它们避免重复构建。健壮的选择器优先使用id、name或稳定的>