尧图网站建设 
在自动化测试、数据抓取和网页监控等场景中我们经常需要编写复杂的浏览器脚本。传统方式下开发者需要与底层的浏览器驱动如 Selenium和复杂的异步逻辑打交道调试和维护成本都很高。有没有一种方法能让我们像搭积木一样通过可视化拖拽来构建浏览器任务然后通过一个简单的 API 调用就能执行呢今天要介绍的Figranium正是这样一个开源工具。它允许你通过直观的可视化界面编排浏览器操作流程并将流程打包成一个可复用的任务最终通过 Docker 容器化的 API 服务来执行。无论是需要定期抓取商品价格的爬虫还是模拟用户登录并截图的操作都可以通过 Figranium 快速构建和部署。本文将带你从零开始完整掌握 Figranium 的核心概念、本地部署、可视化任务构建以及 API 调用的全流程。无论你是想提升自动化测试效率的 QA 工程师还是需要稳定数据采集渠道的后端开发者都能从中获得一套即拿即用的解决方案。1. Figranium 是什么解决什么问题1.1 核心概念与定位Figranium 是一个“可视化浏览器任务编排与 API 执行平台”。我们可以把它拆解为三个关键部分来理解可视化编排提供了一个图形化界面通常是一个 Web 应用用户可以通过拖拽预定义的“动作块”如“打开网页”、“点击元素”、“输入文本”、“提取数据”来组合成一个完整的浏览器工作流。这极大地降低了编写浏览器自动化脚本的门槛非开发人员也能参与构建。浏览器任务指代一个完整的、可重复执行的浏览器操作序列。例如“登录邮箱 - 查看未读邮件 - 提取发件人和标题”就是一个任务。API 执行 (Dockerized)编排好的任务会被发布为一个 API 端点。这个 API 服务运行在 Docker 容器中意味着它拥有标准化的运行环境、易于部署和扩展。你只需要向这个 API 发送一个 HTTP 请求通常携带必要的参数服务就会在后台启动一个浏览器实例按流程执行任务并将结果如截图、提取的数据返回给你。1.2 解决了哪些痛点与传统手写 Selenium/Puppeteer 脚本相比Figranium 主要解决了以下问题降低技术门槛可视化操作让产品、运营或测试人员可以直接参与自动化流程的设计无需深入学习编程和浏览器驱动细节。提升开发效率构建复杂流程的速度更快调试更直观通常支持步骤回放和实时预览。便于维护与复用任务以模块化的方式存储和版本管理修改一个动作块所有用到该块的任务都会更新。任务可以作为 API 被多个系统调用。环境标准化Docker 化部署确保了执行环境的一致性避免了“在我机器上能跑”的经典问题。它也简化了在云服务器或 Kubernetes 集群上的横向扩展。集中化管理所有任务和其执行历史、日志都可以在一个平台中查看和管理。1.3 典型应用场景自动化测试 (E2E)快速构建冒烟测试、回归测试流程。数据抓取与监控定时执行任务抓取公开的股票价格、新闻标题、电商商品信息。工作流自动化自动完成一些日常的、重复性的网页操作如每日报表下载、系统状态检查。网页截图与归档定期对重要网页进行截图存档。API 驱动的浏览器操作为其他系统提供“浏览器操作能力”例如接收一个订单号自动到物流网站查询并返回结果。2. 环境准备与部署Figranium 通常由多个组件构成一个用于编排的 Web UI 前端、一个管理任务和执行器的后端服务以及实际运行浏览器实例的 Worker。Docker 化部署将这些组件打包让安装变得非常简单。2.1 系统要求操作系统任何可以运行 Docker 和 Docker Compose 的系统包括 Linux (推荐)、macOS 和 Windows。Docker需要安装 Docker Engine (版本 20.10) 和 Docker Compose (版本 v2)。这是运行 Figranium 的必备条件。硬件建议至少 2 核 CPU4 GB 内存。每个并发的浏览器实例都会消耗较多资源。网络服务器需要能访问目标网页。如果目标网页在国内建议将服务部署在国内网络环境。2.2 通过 Docker Compose 一键部署这是最推荐的部署方式。假设你已经安装好 Docker 和 Docker Compose。创建项目目录并下载配置文件 首先创建一个专属目录并进入该目录。mkdir figranium cd figranium通常Figranium 项目会提供一个docker-compose.yml文件。如果官方没有直接提供你可能需要根据其文档自行编写。这里我们假设一个典型的组合figranium-ui: 可视化编排前端。figranium-server: 后端 API 服务器负责任务管理和调度。figranium-worker: 一个或多个工作节点实际执行浏览器任务。redis: 用于缓存和消息队列。postgres(可选): 用于数据存储。简单演示可能使用 SQLite。创建一个docker-compose.yml文件version: 3.8 services: redis: image: redis:7-alpine container_name: figranium-redis restart: unless-stopped ports: - 6379:6379 volumes: - redis_data:/data postgres: image: postgres:15-alpine container_name: figranium-db restart: unless-stopped environment: POSTGRES_USER: figranium POSTGRES_PASSWORD: your_strong_password_here POSTGRES_DB: figranium ports: - 5432:5432 volumes: - postgres_data:/var/lib/postgresql/data server: # 假设官方镜像为 figranium/server:latest image: figranium/server:latest container_name: figranium-server restart: unless-stopped depends_on: - redis - postgres environment: - DATABASE_URLpostgresql://figranium:your_strong_password_herepostgres:5432/figranium - REDIS_URLredis://redis:6379 - NODE_ENVproduction ports: - 3000:3000 # 后端API端口 volumes: - ./data/server:/app/data # 持久化任务定义等数据 worker: # 假设官方镜像为 figranium/worker:latest image: figranium/worker:latest container_name: figranium-worker restart: unless-stopped depends_on: - server - redis environment: - SERVER_URLhttp://server:3000 - REDIS_URLredis://redis:6379 - BROWSER_TYPEchromium # 或 firefox, webkit # 注意浏览器需要一些系统依赖镜像通常已包含 # 如果需要支持显示如调试可以添加 -e DISPLAY 和挂载 /tmp/.X11-unix ui: # 假设官方镜像为 figranium/ui:latest image: figranium/ui:latest container_name: figranium-ui restart: unless-stopped depends_on: - server environment: - REACT_APP_API_BASE_URLhttp://localhost:3000 # UI访问后端的地址 ports: - 8080:80 # 前端Web界面端口 # 通常是一个静态Nginx服务 volumes: redis_data: postgres_data:重要请将your_strong_password_here替换为强密码。镜像名称figranium/server:latest等需要替换为 Figranium 项目官方提供的真实镜像名。启动服务 在包含docker-compose.yml的目录下运行docker-compose up -d-d参数表示在后台运行。首次运行会拉取镜像可能需要一些时间。验证服务状态 使用以下命令查看容器是否正常运行docker-compose ps你应该看到所有服务的状态都是Up。也可以查看日志docker-compose logs -f server # 查看后端日志访问 Web 界面 打开浏览器访问http://你的服务器IP:8080。如果一切正常你将看到 Figranium 的可视化编排界面。访问 API 文档 后端 API 通常运行在 3000 端口并可能提供 Swagger/OpenAPI 文档访问http://localhost:3000/api-docs查看。2.3 关键配置说明端口映射8080是前端 UI3000是后端 API。确保防火墙或安全组开放了这些端口。数据持久化我们通过 Docker Volumes (redis_data,postgres_data) 和绑定挂载 (./data/server) 来持久化数据避免容器重启后数据丢失。Worker 扩展如果你需要同时执行多个任务可以轻松扩展 Worker 数量docker-compose up -d --scale worker3这将启动 3 个 Worker 容器。浏览器类型通过worker服务的BROWSER_TYPE环境变量可以指定使用的浏览器引擎Chromium, Firefox, Webkit。确保镜像支持对应的浏览器。3. 核心概念与可视化编排界面详解成功部署后我们进入 Figranium 的 Web 界面。虽然不同版本 UI 略有差异但核心概念相通。3.1 核心概念项目、任务与动作块项目最高层级的组织单位用于归类相关的浏览器任务。例如你可以创建“电商价格监控”、“内部系统巡检”等项目。任务在一个项目下一个具体的、可执行的浏览器工作流就是一个任务。每个任务有唯一的名称和 ID。动作块构成任务的基本单元。每个块代表一个原子操作。常见的动作块包括导航打开一个 URL。点击点击页面上的某个元素通过 CSS 选择器或 XPath 定位。输入向输入框填充文本。提取从页面中获取文本、属性或 HTML 内容。条件判断根据页面内容或变量决定执行哪条分支。循环对列表元素进行重复操作。等待显式等待一段时间或等待某个元素出现。执行 JavaScript在页面上下文中运行自定义 JS 代码。截图捕获当前页面或元素的图片。变量操作设置、修改变量用于在动作块间传递数据。3.2 构建你的第一个任务以百度搜索为例让我们创建一个简单的任务打开百度搜索“Figranium”并提取第一页的第一个搜索结果标题。创建项目与任务 在 UI 中点击“新建项目”命名为“Demo”。然后在项目中“新建任务”命名为“Baidu Search”。拖拽动作块构建流程 从左侧的组件库中将以下动作块拖到画布中央并按顺序连接起来。块1导航类型导航 / 打开网页。参数URL https://www.baidu.com。作用启动浏览器并打开百度首页。块2输入类型输入 / 填充文本。参数选择器#kw(百度搜索框的 ID)。文本Figranium。作用在搜索框中输入关键词。块3点击类型点击。参数选择器#su(百度一下按钮的 ID)。作用点击搜索按钮。块4等待类型等待。参数等待条件 “元素出现”选择器 .result.c-container h3(搜索结果的标题元素)。作用等待搜索结果加载完成。块5提取类型提取 / 获取文本。参数选择器.result.c-container h3(第一个结果标题)。变量名first_result_title。作用将第一个搜索结果的标题文本保存到一个变量中。块6输出/日志类型实用工具 / 日志。参数消息 搜索到的第一个标题是{{first_result_title}}。作用将提取到的变量内容打印到任务日志中。保存与测试运行 点击画布上方的“保存”按钮。然后点击“运行”或“测试”按钮。Figranium 会启动一个浏览器实例可能在后台并自动执行你编排的流程。你可以在“运行历史”或“日志”面板中查看实时执行过程和最终输出的日志。4. 通过 API 执行任务可视化编排并测试成功后下一步就是如何让外部系统调用这个任务。这就是 Figranium API 的核心价值。4.1 获取任务 ID 与 API 密钥任务 ID在任务列表或任务详情页找到该任务的唯一标识符通常是一串 UUID。API 认证为了保护 APIFigranium 通常需要认证。常见方式是 API Key。在系统设置或用户设置中生成一个新的 API Key。记住这个 Key它将在 HTTP 请求头中用于认证。4.2 调用执行任务 API假设后端 API 地址是http://localhost:3000任务 ID 是task_abc123API Key 是sk_test_xyz789。API 请求示例 (使用 cURL):curl -X POST \ http://localhost:3000/api/v1/tasks/task_abc123/run \ -H Authorization: Bearer sk_test_xyz789 \ -H Content-Type: application/json \ -d { parameters: { search_keyword: Docker }, options: { headless: true, timeout: 60000 } }请求说明端点POST /api/v1/tasks/{task_id}/run认证在Authorization头中使用 Bearer Token。请求体 (JSON)parameters: 向任务传递动态参数。在任务编排时你可以定义“输入参数”然后在动作块中通过{{参数名}}引用。例如我们可以把搜索关键词改成参数这样每次调用 API 时可以指定不同的词。在上例中任务需要预先配置一个名为search_keyword的输入参数并在“输入”动作块中将文本设置为{{search_keyword}}。options: 执行选项例如是否启用无头模式 (headless)任务超时时间 (timeout) 等。4.3 处理 API 响应API 调用通常会立即返回一个响应包含本次执行的runId。{ success: true, runId: run_def456, message: Task execution started. }任务可能异步执行。你需要使用这个runId去查询执行结果。查询执行结果 APIcurl -X GET \ http://localhost:3000/api/v1/runs/run_def456 \ -H Authorization: Bearer sk_test_xyz789响应结果示例{ id: run_def456, taskId: task_abc123, status: completed, // 可能的状态pending, running, completed, failed, timed_out result: { variables: { first_result_title: Docker: Accelerated Container Application Development }, screenshots: [screenshot_url_1.png], logs: [...执行日志...], error: null }, startedAt: 2023-10-27T08:00:00Z, finishedAt: 2023-10-27T08:00:25Z }从result.variables中我们就可以拿到任务执行过程中提取的数据。4.4 编程语言调用示例 (Python)在实际项目中我们更常用编程语言来调用。以下是一个 Python 示例使用requests库。import requests import time API_BASE http://localhost:3000 API_KEY sk_test_xyz789 TASK_ID task_abc123 def run_figranium_task(search_keyword): 执行Figranium任务并获取结果 headers { Authorization: fBearer {API_KEY}, Content-Type: application/json } # 1. 启动任务执行 run_payload { parameters: { search_keyword: search_keyword }, options: { headless: True } } run_resp requests.post( f{API_BASE}/api/v1/tasks/{TASK_ID}/run, headersheaders, jsonrun_payload ) run_resp.raise_for_status() run_data run_resp.json() run_id run_data[runId] print(f任务已启动Run ID: {run_id}) # 2. 轮询查询结果简单示例生产环境应更健壮 status running max_retries 30 retry_interval 2 # 秒 for i in range(max_retries): time.sleep(retry_interval) query_resp requests.get( f{API_BASE}/api/v1/runs/{run_id}, headersheaders ) query_resp.raise_for_status() run_info query_resp.json() status run_info[status] if status in [completed, failed, timed_out]: break print(f轮询中... ({i1}/{max_retries})状态: {status}) # 3. 处理最终结果 if status completed: result run_info.get(result, {}) first_title result.get(variables, {}).get(first_result_title, 未提取到) print(f✅ 任务成功完成) print(f 第一个搜索结果标题: {first_title}) # 可以进一步处理截图、日志等 return first_title else: error_msg run_info.get(result, {}).get(error, 未知错误) print(f❌ 任务失败状态: {status}, 错误: {error_msg}) return None if __name__ __main__: # 调用函数搜索不同的关键词 title run_figranium_task(Kubernetes) if title: # 将结果存入数据库或进行其他操作 print(f获取到的标题可用于后续处理: {title})这个脚本清晰地展示了调用 Figranium API 的完整流程启动任务 - 轮询状态 - 获取并处理结果。5. 高级编排技巧与最佳实践掌握了基础操作后以下技巧能帮助你构建更强大、更稳健的任务。5.1 使用变量与参数化任务参数在任务设置中定义输入参数如search_keyword,start_date。在动作块中使用{{参数名}}来引用。这使得任务变得可配置、可复用。局部变量使用“设置变量”动作块将页面提取的内容或计算中间结果存储起来供后续步骤使用。例如将登录后的session_token存入变量在后续请求的 Header 中使用。5.2 处理动态内容与等待策略现代网页大量使用 JavaScript 动态加载内容。简单的“等待固定时间”不可靠。优先使用“等待元素”指定一个期望出现的元素选择器Figranium 会轮询直到该元素出现或超时。组合等待在关键操作如点击按钮后页面跳转前后添加等待确保页面状态稳定。使用 XPath 应对复杂结构当 CSS 选择器因动态类名失效时使用更灵活的 XPath 进行定位。5.3 错误处理与条件分支任务不可能永远成功。需要增加容错逻辑。条件判断使用“条件”块。例如判断某个提示弹窗是否存在 (if 元素(.alert) exists)如果存在则执行“点击关闭按钮”的分支。Try-Catch 逻辑一些高级工具支持“尝试-捕获”块组。将可能失败的操作如点击一个可能不存在的按钮放在“尝试”区在“捕获”区处理异常如记录日志并继续执行其他路径。设置任务超时在 API 调用或任务设置中配置合理的全局超时避免因页面卡死导致资源长期占用。5.4 数据输出与集成结构化输出精心设计“提取”步骤将数据保存为结构化的变量如列表、字典。在最后的“返回”或“输出”块中将这些变量组合成清晰的 JSON 结构。Webhook 回调在任务完成后配置一个 Webhook 动作将执行结果自动 POST 到你的业务服务器实现主动通知。与外部系统联动Figranium API 可以很容易地与你的 CI/CD 流水线如 Jenkins, GitLab CI、数据管道如 Airflow或消息队列如 RabbitMQ集成。6. 常见问题与排查思路在部署和使用 Figranium 过程中你可能会遇到以下问题。问题现象可能原因排查思路与解决方案Docker 容器启动失败端口冲突、镜像不存在、环境变量错误、权限不足。1. 运行docker-compose logs [服务名]查看具体错误日志。2. 检查docker-compose.yml中的端口是否被占用。3. 确认镜像名称和标签是否正确可用。4. 检查数据库连接字符串等环境变量格式。Web UI 无法访问前端容器未运行、端口映射错误、网络问题。1.docker-compose ps确认ui服务状态为Up。2. 检查docker-compose.yml中ui服务的端口映射 (8080:80)。3. 尝试在服务器本地curl http://localhost:8080。任务执行超时或失败页面元素加载慢、选择器错误、网络问题、资源不足。1. 在任务“运行历史”中查看详细日志和截图定位失败步骤。2. 检查失败步骤的选择器是否在当前页面生效可使用浏览器开发者工具验证。3. 增加“等待”时间或改用“等待元素出现”。4. 检查 Worker 容器资源CPU/内存是否充足。API 调用返回 401/403API Key 无效、过期或权限不足。1. 确认请求头中的Authorization: Bearer your_api_key格式正确且 Key 有效。2. 在 Figranium 管理界面重新生成 API Key 并替换。API 调用返回 404任务 ID 错误或 API 端点路径不正确。1. 确认 URL 中的task_id与 UI 中显示的任务 ID 完全一致。2. 查阅 API 文档确认正确的端点路径。浏览器无法启动 (Worker 日志报错)Docker 容器内缺少浏览器依赖、显卡驱动问题如需显示。1. 确保使用官方推荐的 Docker 镜像其内已包含浏览器。2. 对于无头模式通常没问题。如需显示检查DISPLAY等环境变量和 X11 套接字挂载。3. 查看 Worker 日志docker-compose logs worker。提取的数据为空提取动作执行时机过早元素未加载、选择器错误、数据在 Shadow DOM 内。1. 在提取动作前添加“等待”步骤确保目标元素已出现。2. 使用更精确的选择器或改用 XPath。3. 如果数据在 Shadow DOM 中可能需要使用“执行 JavaScript”动作块来穿透 Shadow Root 进行提取。7. 生产环境部署与安全建议将 Figranium 用于生产环境时需要考虑更多因素。7.1 部署架构优化分离数据库考虑使用云托管的 RDS (PostgreSQL) 和 ElastiCache (Redis) 服务提高可靠性和可维护性。反向代理与 SSL使用 Nginx 或 Traefik 作为反向代理为 UI 和 API 服务配置域名和 HTTPS (SSL/TLS 证书)确保通信安全。容器编排在 Kubernetes 上部署可以更灵活地管理服务发现、配置、Secret 和水平扩缩容尤其是 Worker 节点。资源限制在docker-compose.yml或 Kubernetes 配置中为容器设置 CPU 和内存限制防止单个异常任务耗尽主机资源。7.2 安全配置强密码与密钥管理为数据库、Redis 设置强密码并将 API Key 存储在环境变量或 Secrets 管理工具中切勿硬编码在代码里。API 访问控制精细化管理 API Key 的权限如果支持例如区分“仅执行特定任务”和“管理所有任务”的 Key。网络隔离将 Figranium 服务部署在内网仅通过 API 网关或反向代理对外暴露必要的端口。Worker 容器可能不需要直接对外访问。定期更新关注 Figranium 项目的安全更新定期更新 Docker 镜像到最新版本。7.3 监控与运维日志聚合将 Docker 容器的日志收集到 ELK (Elasticsearch, Logstash, Kibana) 或 Loki/Grafana 等集中日志系统中方便排查问题。指标监控监控关键指标如任务队列长度、Worker 活跃数、任务成功率/失败率、平均执行时间、API 请求速率和延迟。可以使用 Prometheus 收集指标并在 Grafana 中展示。任务调度与限流如果有大量定时任务考虑使用外部的调度系统如 Apache Airflow, Celery来调用 Figranium API并在 Figranium 服务端或网关层实施 API 限流防止突发流量击垮服务。通过本文的讲解你应该已经对 Figranium 这个可视化浏览器任务工具有了全面的了解。从 Docker 化部署、可视化流程编排到通过 API 集成调用它提供了一套完整的低代码浏览器自动化方案。虽然它可能无法覆盖所有极端复杂和定制化的场景但对于 80% 的常规网页操作自动化需求Figranium 能显著提升开发和运维效率。下一步你可以尝试将现有的、用脚本编写的简单爬虫或测试用例迁移到 Figranium 上重构亲身体验其编排的便捷性。然后探索如何将其与你的业务系统深度集成例如构建一个内部的数据监控面板后台定期通过 Figranium API 抓取数据并展示。 Figranium：可视化浏览器任务编排与API执行平台实战指南
在自动化测试、数据抓取和网页监控等场景中我们经常需要编写复杂的浏览器脚本。传统方式下开发者需要与底层的浏览器驱动如 Selenium和复杂的异步逻辑打交道调试和维护成本都很高。有没有一种方法能让我们像搭积木一样通过可视化拖拽来构建浏览器任务然后通过一个简单的 API 调用就能执行呢今天要介绍的Figranium正是这样一个开源工具。它允许你通过直观的可视化界面编排浏览器操作流程并将流程打包成一个可复用的任务最终通过 Docker 容器化的 API 服务来执行。无论是需要定期抓取商品价格的爬虫还是模拟用户登录并截图的操作都可以通过 Figranium 快速构建和部署。本文将带你从零开始完整掌握 Figranium 的核心概念、本地部署、可视化任务构建以及 API 调用的全流程。无论你是想提升自动化测试效率的 QA 工程师还是需要稳定数据采集渠道的后端开发者都能从中获得一套即拿即用的解决方案。1. Figranium 是什么解决什么问题1.1 核心概念与定位Figranium 是一个“可视化浏览器任务编排与 API 执行平台”。我们可以把它拆解为三个关键部分来理解可视化编排提供了一个图形化界面通常是一个 Web 应用用户可以通过拖拽预定义的“动作块”如“打开网页”、“点击元素”、“输入文本”、“提取数据”来组合成一个完整的浏览器工作流。这极大地降低了编写浏览器自动化脚本的门槛非开发人员也能参与构建。浏览器任务指代一个完整的、可重复执行的浏览器操作序列。例如“登录邮箱 - 查看未读邮件 - 提取发件人和标题”就是一个任务。API 执行 (Dockerized)编排好的任务会被发布为一个 API 端点。这个 API 服务运行在 Docker 容器中意味着它拥有标准化的运行环境、易于部署和扩展。你只需要向这个 API 发送一个 HTTP 请求通常携带必要的参数服务就会在后台启动一个浏览器实例按流程执行任务并将结果如截图、提取的数据返回给你。1.2 解决了哪些痛点与传统手写 Selenium/Puppeteer 脚本相比Figranium 主要解决了以下问题降低技术门槛可视化操作让产品、运营或测试人员可以直接参与自动化流程的设计无需深入学习编程和浏览器驱动细节。提升开发效率构建复杂流程的速度更快调试更直观通常支持步骤回放和实时预览。便于维护与复用任务以模块化的方式存储和版本管理修改一个动作块所有用到该块的任务都会更新。任务可以作为 API 被多个系统调用。环境标准化Docker 化部署确保了执行环境的一致性避免了“在我机器上能跑”的经典问题。它也简化了在云服务器或 Kubernetes 集群上的横向扩展。集中化管理所有任务和其执行历史、日志都可以在一个平台中查看和管理。1.3 典型应用场景自动化测试 (E2E)快速构建冒烟测试、回归测试流程。数据抓取与监控定时执行任务抓取公开的股票价格、新闻标题、电商商品信息。工作流自动化自动完成一些日常的、重复性的网页操作如每日报表下载、系统状态检查。网页截图与归档定期对重要网页进行截图存档。API 驱动的浏览器操作为其他系统提供“浏览器操作能力”例如接收一个订单号自动到物流网站查询并返回结果。2. 环境准备与部署Figranium 通常由多个组件构成一个用于编排的 Web UI 前端、一个管理任务和执行器的后端服务以及实际运行浏览器实例的 Worker。Docker 化部署将这些组件打包让安装变得非常简单。2.1 系统要求操作系统任何可以运行 Docker 和 Docker Compose 的系统包括 Linux (推荐)、macOS 和 Windows。Docker需要安装 Docker Engine (版本 20.10) 和 Docker Compose (版本 v2)。这是运行 Figranium 的必备条件。硬件建议至少 2 核 CPU4 GB 内存。每个并发的浏览器实例都会消耗较多资源。网络服务器需要能访问目标网页。如果目标网页在国内建议将服务部署在国内网络环境。2.2 通过 Docker Compose 一键部署这是最推荐的部署方式。假设你已经安装好 Docker 和 Docker Compose。创建项目目录并下载配置文件 首先创建一个专属目录并进入该目录。mkdir figranium cd figranium通常Figranium 项目会提供一个docker-compose.yml文件。如果官方没有直接提供你可能需要根据其文档自行编写。这里我们假设一个典型的组合figranium-ui: 可视化编排前端。figranium-server: 后端 API 服务器负责任务管理和调度。figranium-worker: 一个或多个工作节点实际执行浏览器任务。redis: 用于缓存和消息队列。postgres(可选): 用于数据存储。简单演示可能使用 SQLite。创建一个docker-compose.yml文件version: 3.8 services: redis: image: redis:7-alpine container_name: figranium-redis restart: unless-stopped ports: - 6379:6379 volumes: - redis_data:/data postgres: image: postgres:15-alpine container_name: figranium-db restart: unless-stopped environment: POSTGRES_USER: figranium POSTGRES_PASSWORD: your_strong_password_here POSTGRES_DB: figranium ports: - 5432:5432 volumes: - postgres_data:/var/lib/postgresql/data server: # 假设官方镜像为 figranium/server:latest image: figranium/server:latest container_name: figranium-server restart: unless-stopped depends_on: - redis - postgres environment: - DATABASE_URLpostgresql://figranium:your_strong_password_herepostgres:5432/figranium - REDIS_URLredis://redis:6379 - NODE_ENVproduction ports: - 3000:3000 # 后端API端口 volumes: - ./data/server:/app/data # 持久化任务定义等数据 worker: # 假设官方镜像为 figranium/worker:latest image: figranium/worker:latest container_name: figranium-worker restart: unless-stopped depends_on: - server - redis environment: - SERVER_URLhttp://server:3000 - REDIS_URLredis://redis:6379 - BROWSER_TYPEchromium # 或 firefox, webkit # 注意浏览器需要一些系统依赖镜像通常已包含 # 如果需要支持显示如调试可以添加 -e DISPLAY 和挂载 /tmp/.X11-unix ui: # 假设官方镜像为 figranium/ui:latest image: figranium/ui:latest container_name: figranium-ui restart: unless-stopped depends_on: - server environment: - REACT_APP_API_BASE_URLhttp://localhost:3000 # UI访问后端的地址 ports: - 8080:80 # 前端Web界面端口 # 通常是一个静态Nginx服务 volumes: redis_data: postgres_data:重要请将your_strong_password_here替换为强密码。镜像名称figranium/server:latest等需要替换为 Figranium 项目官方提供的真实镜像名。启动服务 在包含docker-compose.yml的目录下运行docker-compose up -d-d参数表示在后台运行。首次运行会拉取镜像可能需要一些时间。验证服务状态 使用以下命令查看容器是否正常运行docker-compose ps你应该看到所有服务的状态都是Up。也可以查看日志docker-compose logs -f server # 查看后端日志访问 Web 界面 打开浏览器访问http://你的服务器IP:8080。如果一切正常你将看到 Figranium 的可视化编排界面。访问 API 文档 后端 API 通常运行在 3000 端口并可能提供 Swagger/OpenAPI 文档访问http://localhost:3000/api-docs查看。2.3 关键配置说明端口映射8080是前端 UI3000是后端 API。确保防火墙或安全组开放了这些端口。数据持久化我们通过 Docker Volumes (redis_data,postgres_data) 和绑定挂载 (./data/server) 来持久化数据避免容器重启后数据丢失。Worker 扩展如果你需要同时执行多个任务可以轻松扩展 Worker 数量docker-compose up -d --scale worker3这将启动 3 个 Worker 容器。浏览器类型通过worker服务的BROWSER_TYPE环境变量可以指定使用的浏览器引擎Chromium, Firefox, Webkit。确保镜像支持对应的浏览器。3. 核心概念与可视化编排界面详解成功部署后我们进入 Figranium 的 Web 界面。虽然不同版本 UI 略有差异但核心概念相通。3.1 核心概念项目、任务与动作块项目最高层级的组织单位用于归类相关的浏览器任务。例如你可以创建“电商价格监控”、“内部系统巡检”等项目。任务在一个项目下一个具体的、可执行的浏览器工作流就是一个任务。每个任务有唯一的名称和 ID。动作块构成任务的基本单元。每个块代表一个原子操作。常见的动作块包括导航打开一个 URL。点击点击页面上的某个元素通过 CSS 选择器或 XPath 定位。输入向输入框填充文本。提取从页面中获取文本、属性或 HTML 内容。条件判断根据页面内容或变量决定执行哪条分支。循环对列表元素进行重复操作。等待显式等待一段时间或等待某个元素出现。执行 JavaScript在页面上下文中运行自定义 JS 代码。截图捕获当前页面或元素的图片。变量操作设置、修改变量用于在动作块间传递数据。3.2 构建你的第一个任务以百度搜索为例让我们创建一个简单的任务打开百度搜索“Figranium”并提取第一页的第一个搜索结果标题。创建项目与任务 在 UI 中点击“新建项目”命名为“Demo”。然后在项目中“新建任务”命名为“Baidu Search”。拖拽动作块构建流程 从左侧的组件库中将以下动作块拖到画布中央并按顺序连接起来。块1导航类型导航 / 打开网页。参数URL https://www.baidu.com。作用启动浏览器并打开百度首页。块2输入类型输入 / 填充文本。参数选择器#kw(百度搜索框的 ID)。文本Figranium。作用在搜索框中输入关键词。块3点击类型点击。参数选择器#su(百度一下按钮的 ID)。作用点击搜索按钮。块4等待类型等待。参数等待条件 “元素出现”选择器 .result.c-container h3(搜索结果的标题元素)。作用等待搜索结果加载完成。块5提取类型提取 / 获取文本。参数选择器.result.c-container h3(第一个结果标题)。变量名first_result_title。作用将第一个搜索结果的标题文本保存到一个变量中。块6输出/日志类型实用工具 / 日志。参数消息 搜索到的第一个标题是{{first_result_title}}。作用将提取到的变量内容打印到任务日志中。保存与测试运行 点击画布上方的“保存”按钮。然后点击“运行”或“测试”按钮。Figranium 会启动一个浏览器实例可能在后台并自动执行你编排的流程。你可以在“运行历史”或“日志”面板中查看实时执行过程和最终输出的日志。4. 通过 API 执行任务可视化编排并测试成功后下一步就是如何让外部系统调用这个任务。这就是 Figranium API 的核心价值。4.1 获取任务 ID 与 API 密钥任务 ID在任务列表或任务详情页找到该任务的唯一标识符通常是一串 UUID。API 认证为了保护 APIFigranium 通常需要认证。常见方式是 API Key。在系统设置或用户设置中生成一个新的 API Key。记住这个 Key它将在 HTTP 请求头中用于认证。4.2 调用执行任务 API假设后端 API 地址是http://localhost:3000任务 ID 是task_abc123API Key 是sk_test_xyz789。API 请求示例 (使用 cURL):curl -X POST \ http://localhost:3000/api/v1/tasks/task_abc123/run \ -H Authorization: Bearer sk_test_xyz789 \ -H Content-Type: application/json \ -d { parameters: { search_keyword: Docker }, options: { headless: true, timeout: 60000 } }请求说明端点POST /api/v1/tasks/{task_id}/run认证在Authorization头中使用 Bearer Token。请求体 (JSON)parameters: 向任务传递动态参数。在任务编排时你可以定义“输入参数”然后在动作块中通过{{参数名}}引用。例如我们可以把搜索关键词改成参数这样每次调用 API 时可以指定不同的词。在上例中任务需要预先配置一个名为search_keyword的输入参数并在“输入”动作块中将文本设置为{{search_keyword}}。options: 执行选项例如是否启用无头模式 (headless)任务超时时间 (timeout) 等。4.3 处理 API 响应API 调用通常会立即返回一个响应包含本次执行的runId。{ success: true, runId: run_def456, message: Task execution started. }任务可能异步执行。你需要使用这个runId去查询执行结果。查询执行结果 APIcurl -X GET \ http://localhost:3000/api/v1/runs/run_def456 \ -H Authorization: Bearer sk_test_xyz789响应结果示例{ id: run_def456, taskId: task_abc123, status: completed, // 可能的状态pending, running, completed, failed, timed_out result: { variables: { first_result_title: Docker: Accelerated Container Application Development }, screenshots: [screenshot_url_1.png], logs: [...执行日志...], error: null }, startedAt: 2023-10-27T08:00:00Z, finishedAt: 2023-10-27T08:00:25Z }从result.variables中我们就可以拿到任务执行过程中提取的数据。4.4 编程语言调用示例 (Python)在实际项目中我们更常用编程语言来调用。以下是一个 Python 示例使用requests库。import requests import time API_BASE http://localhost:3000 API_KEY sk_test_xyz789 TASK_ID task_abc123 def run_figranium_task(search_keyword): 执行Figranium任务并获取结果 headers { Authorization: fBearer {API_KEY}, Content-Type: application/json } # 1. 启动任务执行 run_payload { parameters: { search_keyword: search_keyword }, options: { headless: True } } run_resp requests.post( f{API_BASE}/api/v1/tasks/{TASK_ID}/run, headersheaders, jsonrun_payload ) run_resp.raise_for_status() run_data run_resp.json() run_id run_data[runId] print(f任务已启动Run ID: {run_id}) # 2. 轮询查询结果简单示例生产环境应更健壮 status running max_retries 30 retry_interval 2 # 秒 for i in range(max_retries): time.sleep(retry_interval) query_resp requests.get( f{API_BASE}/api/v1/runs/{run_id}, headersheaders ) query_resp.raise_for_status() run_info query_resp.json() status run_info[status] if status in [completed, failed, timed_out]: break print(f轮询中... ({i1}/{max_retries})状态: {status}) # 3. 处理最终结果 if status completed: result run_info.get(result, {}) first_title result.get(variables, {}).get(first_result_title, 未提取到) print(f✅ 任务成功完成) print(f 第一个搜索结果标题: {first_title}) # 可以进一步处理截图、日志等 return first_title else: error_msg run_info.get(result, {}).get(error, 未知错误) print(f❌ 任务失败状态: {status}, 错误: {error_msg}) return None if __name__ __main__: # 调用函数搜索不同的关键词 title run_figranium_task(Kubernetes) if title: # 将结果存入数据库或进行其他操作 print(f获取到的标题可用于后续处理: {title})这个脚本清晰地展示了调用 Figranium API 的完整流程启动任务 - 轮询状态 - 获取并处理结果。5. 高级编排技巧与最佳实践掌握了基础操作后以下技巧能帮助你构建更强大、更稳健的任务。5.1 使用变量与参数化任务参数在任务设置中定义输入参数如search_keyword,start_date。在动作块中使用{{参数名}}来引用。这使得任务变得可配置、可复用。局部变量使用“设置变量”动作块将页面提取的内容或计算中间结果存储起来供后续步骤使用。例如将登录后的session_token存入变量在后续请求的 Header 中使用。5.2 处理动态内容与等待策略现代网页大量使用 JavaScript 动态加载内容。简单的“等待固定时间”不可靠。优先使用“等待元素”指定一个期望出现的元素选择器Figranium 会轮询直到该元素出现或超时。组合等待在关键操作如点击按钮后页面跳转前后添加等待确保页面状态稳定。使用 XPath 应对复杂结构当 CSS 选择器因动态类名失效时使用更灵活的 XPath 进行定位。5.3 错误处理与条件分支任务不可能永远成功。需要增加容错逻辑。条件判断使用“条件”块。例如判断某个提示弹窗是否存在 (if 元素(.alert) exists)如果存在则执行“点击关闭按钮”的分支。Try-Catch 逻辑一些高级工具支持“尝试-捕获”块组。将可能失败的操作如点击一个可能不存在的按钮放在“尝试”区在“捕获”区处理异常如记录日志并继续执行其他路径。设置任务超时在 API 调用或任务设置中配置合理的全局超时避免因页面卡死导致资源长期占用。5.4 数据输出与集成结构化输出精心设计“提取”步骤将数据保存为结构化的变量如列表、字典。在最后的“返回”或“输出”块中将这些变量组合成清晰的 JSON 结构。Webhook 回调在任务完成后配置一个 Webhook 动作将执行结果自动 POST 到你的业务服务器实现主动通知。与外部系统联动Figranium API 可以很容易地与你的 CI/CD 流水线如 Jenkins, GitLab CI、数据管道如 Airflow或消息队列如 RabbitMQ集成。6. 常见问题与排查思路在部署和使用 Figranium 过程中你可能会遇到以下问题。问题现象可能原因排查思路与解决方案Docker 容器启动失败端口冲突、镜像不存在、环境变量错误、权限不足。1. 运行docker-compose logs [服务名]查看具体错误日志。2. 检查docker-compose.yml中的端口是否被占用。3. 确认镜像名称和标签是否正确可用。4. 检查数据库连接字符串等环境变量格式。Web UI 无法访问前端容器未运行、端口映射错误、网络问题。1.docker-compose ps确认ui服务状态为Up。2. 检查docker-compose.yml中ui服务的端口映射 (8080:80)。3. 尝试在服务器本地curl http://localhost:8080。任务执行超时或失败页面元素加载慢、选择器错误、网络问题、资源不足。1. 在任务“运行历史”中查看详细日志和截图定位失败步骤。2. 检查失败步骤的选择器是否在当前页面生效可使用浏览器开发者工具验证。3. 增加“等待”时间或改用“等待元素出现”。4. 检查 Worker 容器资源CPU/内存是否充足。API 调用返回 401/403API Key 无效、过期或权限不足。1. 确认请求头中的Authorization: Bearer your_api_key格式正确且 Key 有效。2. 在 Figranium 管理界面重新生成 API Key 并替换。API 调用返回 404任务 ID 错误或 API 端点路径不正确。1. 确认 URL 中的task_id与 UI 中显示的任务 ID 完全一致。2. 查阅 API 文档确认正确的端点路径。浏览器无法启动 (Worker 日志报错)Docker 容器内缺少浏览器依赖、显卡驱动问题如需显示。1. 确保使用官方推荐的 Docker 镜像其内已包含浏览器。2. 对于无头模式通常没问题。如需显示检查DISPLAY等环境变量和 X11 套接字挂载。3. 查看 Worker 日志docker-compose logs worker。提取的数据为空提取动作执行时机过早元素未加载、选择器错误、数据在 Shadow DOM 内。1. 在提取动作前添加“等待”步骤确保目标元素已出现。2. 使用更精确的选择器或改用 XPath。3. 如果数据在 Shadow DOM 中可能需要使用“执行 JavaScript”动作块来穿透 Shadow Root 进行提取。7. 生产环境部署与安全建议将 Figranium 用于生产环境时需要考虑更多因素。7.1 部署架构优化分离数据库考虑使用云托管的 RDS (PostgreSQL) 和 ElastiCache (Redis) 服务提高可靠性和可维护性。反向代理与 SSL使用 Nginx 或 Traefik 作为反向代理为 UI 和 API 服务配置域名和 HTTPS (SSL/TLS 证书)确保通信安全。容器编排在 Kubernetes 上部署可以更灵活地管理服务发现、配置、Secret 和水平扩缩容尤其是 Worker 节点。资源限制在docker-compose.yml或 Kubernetes 配置中为容器设置 CPU 和内存限制防止单个异常任务耗尽主机资源。7.2 安全配置强密码与密钥管理为数据库、Redis 设置强密码并将 API Key 存储在环境变量或 Secrets 管理工具中切勿硬编码在代码里。API 访问控制精细化管理 API Key 的权限如果支持例如区分“仅执行特定任务”和“管理所有任务”的 Key。网络隔离将 Figranium 服务部署在内网仅通过 API 网关或反向代理对外暴露必要的端口。Worker 容器可能不需要直接对外访问。定期更新关注 Figranium 项目的安全更新定期更新 Docker 镜像到最新版本。7.3 监控与运维日志聚合将 Docker 容器的日志收集到 ELK (Elasticsearch, Logstash, Kibana) 或 Loki/Grafana 等集中日志系统中方便排查问题。指标监控监控关键指标如任务队列长度、Worker 活跃数、任务成功率/失败率、平均执行时间、API 请求速率和延迟。可以使用 Prometheus 收集指标并在 Grafana 中展示。任务调度与限流如果有大量定时任务考虑使用外部的调度系统如 Apache Airflow, Celery来调用 Figranium API并在 Figranium 服务端或网关层实施 API 限流防止突发流量击垮服务。通过本文的讲解你应该已经对 Figranium 这个可视化浏览器任务工具有了全面的了解。从 Docker 化部署、可视化流程编排到通过 API 集成调用它提供了一套完整的低代码浏览器自动化方案。虽然它可能无法覆盖所有极端复杂和定制化的场景但对于 80% 的常规网页操作自动化需求Figranium 能显著提升开发和运维效率。下一步你可以尝试将现有的、用脚本编写的简单爬虫或测试用例迁移到 Figranium 上重构亲身体验其编排的便捷性。然后探索如何将其与你的业务系统深度集成例如构建一个内部的数据监控面板后台定期通过 Figranium API 抓取数据并展示。