RPA是个好东西，值得学习一下

背景

公司最近要在项目中启用RPA技术, 配置好客户群和要发送的消息后，用办公账号，登陆第三方App，给客户发送消息。此举为了优化用户体验，替代原来的人工手动操作，提升公司产品的市场竞争力。虽然这一块的业务改造工作量都在后端，但我之前没听说过这个名词，比较好奇，决定查阅了解一下RPA技术的背景知识。

什么是 RPA?

RPA(全称是Robotic Process Automation-直译机器人流程自动化)是一种利用软件机器人自动执行任务的技术。它模拟人类在计算机上执行日常操作, 如打开应用程序、点击鼠标、填写表单、复制粘贴等。RPA 的目标是自动化那些高度重复、规则明确、基于已知系统和应用程序的任务。 比如说我司想实现的业务功能模拟人登陆第三方应用，给特定客户群发送业务资讯。

因为笔者是做前端开发的，所以比较关注RPA在前端领域的应用场景。RPA 技术最初应用于企业内部的后台流程自动化, 但在前端开发领域同样有巨大的应用潜能。前端工程师们面临着大量重复性操作,比如构建、部署、测试等。RPA 可以帮助前端团队自动化这些流程,从而节约时间和资源我们通过一个自动化构建部署的案例，看看如何在项目中应用RPA技术。这些步骤每次都要手动执行,非常繁琐。如果我们可以通过一个"机器人"自动完成这些工作,不仅能节省时间,还能确保部署过程无差错地按照既定流程执行。

实现过程

1. 选择 RPA 工具。

可供选择的RPA工具有很多，除了下面列举的这10种，声名赫赫的按键精灵肯定也算。

1. UiPath - 领先的RPA工具之一,界面友好,支持多种技术集成。

2. Automation Anywhere - 功能全面,支持AI和认知自动化。

3. Blue Prism - 基于对象的可视化开发工具,适合复杂流程。

4. WorkFusion - 整合RPA、AI和大规模自动化,支持多种技术。

5. AutomationEdge - 基于web的RPA工具,易于使用和管理。

6. Softomotive - 成本较低,界面简单,支持手机自动化。

7. Kofax RPA - 具备认知功能和Kofax其他产品集成优势。

8. NICE - 支持自动化交互、计算和分析,集成能力出色。

9. Kryon - 基于云的RPA解决方案,功能完备、易于配置。

10. TagUI - 开源免费的RPA工具,支持多语言和自然语言编码。

扫了一眼，发现TagUI是开源免费的，那就选它了。下载Windows版TagUI,并进行安装，安装时会弹出一个提示，说tagui是无法识别来源的应用程序，我已经测试过了，并无风险，点击更多信息==>仍要运行，执行安装

2. 文中用到的tagui命令学习。

tagui命令	说明
tagui live	用于tagui 命令的调试，每次输入一条命令之后，可以实时看到反馈结果
url	访问网页命令, tagui运行时会启动系统默认的浏览器，输入一个网页的话，会在浏览器中打开这个网站
type	填充文本命令， 后面跟两个参数 type 需要输入文本的网页元素 as 输入文本内容
click	鼠标单击命令，后面可跟需要识别的图片, 网页上用css选择器选择的元素，或者用XPath选择的元素，或者是桌面应用图标的坐标

元素定位用的最多，有5种方式，这里展开说明一下：

1. DOM 元素属性定位

# 方式一 查找网页中匹配的文字
click Build with Parameters
# 方式二 用CSS Selector定位网页中的元素
click input[value="manage"]

2. XPath 页面路径定位

XPath（XML Path Language）用树状结构来定位元素，网页元素XPath的获取方式

截图中的XPath路径为：

click //*[@id="juejin-web-editor"]/div[2]/div/div/div/div[2]/div[1]/div/div[6]/div[1]/div[1]/div/div/div[5]/pre[28]/span/span[3]

3. Point 坐标点定位

坐标原点是在屏幕左上角，横向称为X坐标，竖向称为Y坐标，Y坐标100表示从上往下100个像素的位置。下面的命令会到距离屏幕左侧200像素，距离屏幕顶部500像素的位置 进行点击。这个命令会使用TagUI的视觉自动化功能 visual automation。

click (200,500)

屏蔽坐标的获取方式是：打开微信，按下Alt+A截图，鼠标移动到某个应用图标，就可以看到这个应用图标的坐标，我测试了一下，不是特别准确，需要调整一下横坐标。

4. 图像定位

比如先把微信的桌面图标进行截图，保存在images/wechat.png,执行click images/wechat.png命令会在全屏范围寻找类似图像文件 wechat.png 的位置进行点击。这个命令会用到TagUI的视觉自动化功能 visual automation。我测试发现，二次弹窗中的图片，tagui识别不出来。

完整的tagui指令请看这里tagui

3. 调试部署流程。

• 3.1 第一步完成登录，要结合登陆页面，理解每条指令，我每条指令都有些注释，很好理解。

tagui live
# 登录Jenkins
https://ci.xxx.com
# 输入用户名和密码
type //*[@id="j_username"] as 用户名
type //*[@name="j_password"] as 密码
# 勾选记住登录态
click //*[@id="remember_me"]
# 点击确定按钮
click button[name="Submit"]

这是命令执行之后的效果，可以看到用户名和密码都已正确填充，复选框也被选中。

• 3.2 第二步，依次点击项目菜单，选择要构建项目应用（我司采用了Nx-Monorepo微前端架构,一个代码仓库下有多个应用），点击构建按钮进行构建

https://ci.tengmoney.com
click a[href="/view/tw-local/"]
click a[href="job/tw-sit-k8s/"]
click a[href="job/tw-fe-sit-k8s/"]
click a[href="job/tw-fe-sit-admin/"]
click //span[text()="Build with Parameters"]
click input[value="manage"]
click //button[text()="Build"]
wait 60

执行效果如下图所示，可以看到进入到了构建项目的操作入口界面，并且要构建的应用也已被选中。

4. 生成并运行 RPA 脚本

新建一个文本文件，将tagui live模式调试通过命令语句，保存在新建的文本文件中，并将文件文件重命名为depoly_manage.tag。在需要部署的时候,在cmd命令窗口运行下面的命令，就能执行RPA程序。TagUI 就会按指定的操作自动完成构建部署。 通过上述步骤,我们成功将项目部署流程自动化了。

tagui C:\Users\tank\Desktop\TagUI_Windows\tagui\src\flow\depoly_manage.tag

这是执行之后的结果，可以看到使用RPA自动构建的结果在构建历史列表中是能查询到的。

总结与展望

利用 RPA 自动化前端构建和部署流程带来了以下优势:

• 提高效率,释放工程师的时间用于更有价值的工作。
• 提高准确性,确保流程无差错地按照预设顺序执行。
• 便于重复执行,无需人工介入即可多次运行部署。

RPA 的思想是利用机器人帮助我们完成那些简单重复的任务,而不是将工程师的时间浪费在这些无聊琐事上。有了它,前端工程师可以集中精力探索新技术、架构设计, 从而推动整个行业更快发展。 RPA 为前端开发生产效率的提高，注入了新的活力。通过自动化重复性流程和任务,它释放了工程师的创造力,使他们能够将精力专注于更有价值的工作,从而创造出更多优秀的前端产品。相信在不远的将来,越来越多的公司前端团队将采用 RPA 技术,共同推动行业向前发展。