搭建浏览器 RPA 工作流

本篇将以一个贴近真实场景的“获取示例公司校招岗位数”为例，带您在 MagicAI 中搭建一条完整的 RPA 工作流（即工作流自动化）。您将学习如何让工作流模拟人在浏览器中的操作，自动打开网页、点击按钮，并从页面中准确提取所需信息。

延伸阅读

如果您还不熟悉工作流的基础概念，建议先阅读什么是工作流自动化（RPA）。

如果您是第一次搭建自动化任务，建议先阅读工作流自动化（RPA）快速开始。

调试、发布、导入导出方式参考工作流管理与高级应用。

核心概念：理解执行环境与运行

在开始搭建之前，最重要的一点是理解执行环境在浏览器 RPA 中的作用。这能帮助您规避后续 90% 的常见问题。

编辑工作流时：您必须手动连接一台设备（如浏览器）。这是为了给“捕获元素”功能提供一个实时的操作界面，让您可以在真实的网页上进行点选。
正式运行工作流时：您无需手动开启任何设备。当工作流执行到第一个 UI 节点时，系统会自动启动一个符合要求的设备来执行任务。
调试工作流时：
- 如果您已经手动连接了一台设备（例如，一台特定的手机），那么工作流将优先在这台已连接的设备上运行。
- 如果您没有连接任何设备，系统同样会自动启动一台新设备来完成调试。

准备工作：进入工作流自动化（RPA）编辑器

在 MagicAI 左侧导航进入 工作流自动化（RPA）。
点击创建入口。
在创建弹窗中选择适合浏览器自动化的方式，例如空白创建或从模板开始。
填写基本信息：
- 名称：例如 获取示例公司校招岗位数
- 描述：例如“自动访问示例招聘官网并获取最新的校园招聘岗位总数”
确认后进入编辑页面。

此时，画布（编排区）上会默认出现一个 开始节点 和一个 结束节点。页面中会提供执行环境、指令、元素和运行调试等区域。

我们将要搭建什么？（工作流概览）

在深入配置细节之前，我们先快速了解这个工作流的整体设计。我们的目标是搭建一个自动化流程，它能模拟用户在浏览器中的操作，自动获取示例公司最新的校招岗位总数。为实现这一目标，我们将把多个 UI 操作节点串联起来，形成一个完整的操作链路。

开始节点 → 导航到 URL → 点击按钮 → 获取文本 → 结束节点

下面按顺序完成每一步配置。

示例：搭建“获取示例公司校招岗位数”工作流

步骤 1：连接设备并导航到目标页面

首先，我们需要在编辑阶段连接一个浏览器，为后续的“元素捕获”做准备。

连接设备
- 在编辑器左侧的设备区域，找到一台可用的浏览器设备。
- 点击设备进行连接，等待页面加载。
导航到示例招聘首页
- 从右侧的指令面板中，找到 网页指令 > 导航到 URL 节点。
  
  指令详解请见网页指令-导航到URL。
- 将该节点拖拽到画布的 开始节点 和 结束节点 之间。
- 双击该节点，在配置面板中填写 URL：https://zhaopin.example.com
- 配置完成后，您应能在已连接的浏览器中看到示例招聘首页页面。

步骤 2：点击“校园招聘”按钮

页面打开后，需要模拟用户点击导航栏中的“校园招聘”按钮，以跳转到岗位列表页。

插入点击节点
- 从右侧指令面板中找到 网页指令 > 点击(web)，拖拽到 导航到 URL 节点之后。
  
  指令详解请见网页指令-点击。
捕获元素

重要提示：在捕获一个元素之前，您需要在已连接的设备（浏览器）中手动操作，使页面达到该节点即将执行时的状态。例如，要捕获本步骤的“校园招聘”按钮，浏览器本身就应该停留在示例招聘首页。
- 双击 点击(web) 节点，在配置面板的 元素选择器 区域，点击 “捕获元素” 按钮。
- 在弹出的浏览器实时画面中，将鼠标移动到“校园招聘”导航按钮上，待其高亮后单击。
- 平台会自动分析并弹出元素详情面板。您可以将元素名称修改为“校园招聘按钮”以便识别，然后点击保存。

步骤 3：从页面中获取岗位数量文本

点击后，页面会跳转到校招职位列表。我们的目标是读取页面上显示的岗位总数。

插入获取文本节点
- 在右侧指令面板中找到 网页指令 > 获取文本(web) 节点，并将其插入到 点击(web) 节点之后。
  
  指令详解请见网页指令-获取文本。
捕获岗位数量元素

操作提示：捕获岗位数之前，请确保您连接的浏览器已经显示了“校园招聘”的职位列表页面。您可能需要手动点击一次“校园招聘”按钮来让浏览器跳转到正确的页面状态。
- 选中 获取文本(web) 节点，点击 捕获元素。
- 在浏览器页面上，将鼠标移动到显示“全部校招职位 (536)”的区域，单击该文本。
- 在元素详情面板中，可将元素名称修改为“校招岗位总数”，然后保存。
设置输出变量名
- 在该节点的配置面板中，将“将结果保存至”字段填写为 output。这样，获取到的文本（例如“全部校招职位 (536)”）就会被存入名为 output 的变量中。

步骤 4：配置输出（结束节点）

最后，定义整个工作流最终对外输出的结果。

点击 结束节点 打开配置面板。
在输出参数中点击 添加字段：
- 字段名称：hire_count
- 类型：String
- 字段值：点击输入框右侧的变量选择器，从列表中选择 获取文本 / output。

至此，一个完整的“获取示例公司校招岗位数”浏览器 RPA 已经搭建完成。当它运行时，最终会输出一个名为 hire_count 的结果，其值就是从页面上抓取到的原始文本。

元素选择器使用说明

在 RPA 中，元素选择器 是最核心的配置之一，它决定了节点操作的是哪个页面元素。大多数 UI 节点（输入文本、点击、获取文本等）都需要配置元素选择器。

MagicAI 提供两种常用方式：

使用捕获元素（面向业务用户）

适用于不会写 Xpath / Css，需要在页面上找到目标元素的用户。

基本流程：

在节点配置中点击 捕获元素，进入采集模式。
在浏览器页面中移动鼠标，目标元素会被高亮框选。
点击目标元素。
在弹出的元素详情面板中：
- 查看或修改元素名称；
- 选择或保留合适的 Xpath / Css / Text / Image 定位规则；
- 确认后点击保存。
元素会以卡片的形式显示在节点中，同时会出现在元素列表中，供其他节点复用。

这种方式直观易用，对页面结构的变更具有一定的容错能力，适合作为默认推荐方式。

手动新建元素（面向开发者）

适用于对前端结构更熟悉，需要精细控制定位规则的用户。

在元素选择器卡片中，点击右侧的 新建元素 按钮。
在弹窗中填写：
- 元素名称：例如 登录按钮、搜索输入框 等。
- 定位信息：支持多种类型：
  - Xpath：例如 //div[@id=“login-button”]
  - Css：例如 .hotsearch-item.even > a.title
  - Text：根据文本内容定位。
  - Image：通过图像模板匹配定位。
可以添加多条定位规则，系统会在运行时综合匹配，提高准确率。
保存后，该元素同样会出现在元素列表中，供多个节点共享。

实践中，您可以结合两种方式：先用捕获元素生成初始定位，再在“元素详情”中细调或补充其它定位规则。

与接口、数据、AI 节点的组合使用

在同一条工作流自动化（RPA）里，UI 操作节点可以和其它节点自由混搭，例如：

大模型调用节点；
HTTP 请求、执行代码、条件判断、循环等逻辑节点；

相关指令详情请见搜索与API调用-HTTP、代码与逻辑-条件分支、代码与逻辑-循环控制。
调用其他工作流或工具的节点。

这意味着，您可以在完成页面操作后，继续调用接口、写入数据库、触发消息通知等，实现从“页面操作”到“系统集成”的一体化流程。

调试、发布与导入导出

在工作流自动化（RPA）中，调试、发布、导入和导出方式是统一的：

可以在编辑器顶部使用 调试 / 运行 功能，实时观察每个节点的执行结果和页面变化。
每次运行都会产生详细的日志，方便排错。
点击右上角发布，填写版本号、工作流简介等信息，即可生成新版本，对外提供使用。
在工作流菜单中使用 导出 / 导入 功能，可以将工作流打包为 ZIP 文件进行备份或迁移；导入时上传 ZIP 即可在当前空间中创建新的工作流实例。

详细的发布配置、导入导出内容结构以及规则事件配置方式，可以参考工作流管理与高级应用中的对应章节，这里不再重复展开。

下一步：让流程更聪明

通过本示例，您已经掌握了浏览器 RPA 的基础操作：

连接设备并控制浏览器；
使用 UI 节点依次完成“打开页面 → 点击按钮 → 获取文本”；
使用元素选择器捕获或新建页面元素，并在多个节点之间复用；
在结束节点中输出结构化结果，供数字员工或其他系统调用。

下一步您可以：

深化数据处理：在获取到岗位数文本后，增加“执行代码”节点，用正则表达式或字符串分割的方式，仅提取出数字部分。
扩展流程能力：在获取岗位数后，调用后续接口或工作流进行告警、记录或分析。
与 AI 智能团队 / Agent Team 结合：将该工作流作为能力挂载到 AI 智能团队 / Agent Team 上，让用户用自然语言就能问出“现在示例公司有多少个校招岗位？”并得到实时回答。