低代码开发,推荐一款Web 端自动化神器:Automa!

简介: 低代码开发,推荐一款Web 端自动化神器:Automa!

1. Automa介绍


又到了优秀工具推荐的时候了,今天给大家分享一款前端自动化操作神器: Automa

首先了解一下Automa是什么?Automa它定位是一款 Chrome 插件,也就意味着,它的使用载体需要借助Chrome浏览器。利用Automa,即使你不会写代码,也能按照自己的需求,完成一系列自动化操作。利用它,你可以将一些重复性的任务实现自动化、并且它可以进行界面截图、抓取网站数据、你还可以自定义时间何时去执行自动化任务等。

2. Automa安装


听了上述介绍,想必你已经跃跃欲试了。

如果你是一名开发爱好者,你可以打开Automa项目地址,克隆项目源码,项目地址:

https://github.com/kholid060/automa

微信图片_20220527121514.png

Automa是基于Vue语言来开发的,如果有二开需求的读者,需要有一些VueJavaScript语言的基础才行。

如果你想改造定制它的功能,下述是环境依赖安装、构建常用的几条命令:

# Install dependencies
yarn install
# Compiles and hot-reloads for development
yarn dev
# Compiles and minifies for production
yarn build
# Create a zip file from the build folder
yarn build:zip
# Lints and fixes files
yarn lint

yarn是一个新的 JS 包管理工具,类似npm。

如果你只是单纯的想使用它,上述的安装构建命令可以直接省略,可以进入到chrome应用商店下载它的插件。

插件下载地址

https://chrome.google.com/webstore/detail/automa/infppggnoaenmfagbfknfkancpbljcca/related

微信图片_20220527121453.pngchrome网上商店

3. Automa使用


1、 打开Automa插件,首页界面显示如下:

微信图片_20220527121424.png

整个界面,目前看起来还是比较简洁,当前共分为三部分功能:

  • 第1部分,dashboard首页,提供了两个默认demo示例,刚开始用的话,可以先从demo熟悉开始。
  • 第2部分,workflows工作流,主要通过拖拽组件的方式来组织我们的自动化流程。
  • 第3部分,log日志,运行工作流的日志,较为简单。

从左侧侧边栏可以进入到 Workflows 工作流程 Tab 中,这也是大家使用最多的功能,

微信图片_20220527121402.png

在workflows中,从上述图中,可以看到提供了导入工作流「 Import workflow 」、新建工作流「 New workflow 」两个功能按钮。

比如新建一个工作流test_baidu_flow

微信图片_20220527121339.png

创建项目后,会进入到工作流编辑页面,该界面是用于构建自动化流程;左侧区域是操作区域,右侧区域是主流程构建区域

微信图片_20220527121319.png

左侧区域的操作组件,共包括了基本操作组件,如Trigger 触发Delay 延迟Repeat task 重复执行任务, 还有针对浏览器操作组件、元素操作组件、条件判断组件,具体感兴趣的读者可以自行体验。整体来讲,提供的功能,能满足日常针对Web浏览器常用到的一些功能组件了。

这些操作组件在代码层面,都是以task任务形式定义的:

微信图片_20220527121256.png

4. Automa实战一下


为了让大家对Automa有一个直观了解,接下来,我们通过一个简单案例实战一下。

实战需求:

  • 打开微信搜索页面:https://weixin.sogou.com/
  • 搜索:测试开发技术 公众号
  • 从搜索到的结果中,点击进入符合要求的公众号链接,并截图保存。

由于Automa是纯通过组件拖拉的形式来组织任务的,为了方便大家有一个直观的对比,我们先将上述实战需求,用Selenium+Python来先实现一遍。

Selenium+Python代码示例:

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome(executable_path="chromedriver")
driver.implicitly_wait(10)
driver.get("https://weixin.sogou.com/")
driver.find_element(By.CSS_SELECTOR,"#query").send_keys("测试开发技术")
driver.find_element(By.CSS_SELECTOR,".swz2").click()
driver.find_element_by_link_text("测试开发技术").click()
driver.get_screenshot_as_file('test.png')
time.sleep(3)
driver.quit()

转换成Automa示例:

微信图片_20220527121232.png

大致解说一下上述流程:先选择「 New Tab 」添加被操作的网页,接着,通过操作「 Forms 」向输入框中输入内容,使用「 Click element 」操作模拟点击搜索按钮,接下来又做了一些条件判断、延时、截图、关闭网页等。

在组织任务流程前,需要包含了一个「 Trigger 」组件,它是作为任务的「 启动节点 」,类似Selenium在操作网页前,需要实例化一个操作对象一样,默认执行方式为 Manually,即:人工方式。我们也可以去定义任务的触发策略,比如按指定时间、周期性等。

微信图片_20220527121159.png

自动化任务或者可以理解为自动化“脚本”定义好之后,是直接保存在当前浏览器插件中的,如果怕数据丢失,我们也可以将创建好的自动化任务,导出到外部,Autom支持将任务导出成JSONTXT格式的文件。

需要注意的是,Autom在定位元素时,使用的CSS定位符,比如定位微信搜索输入框:

微信图片_20220527121134.png

在连接两个组件关系时, Automa 插件提供了快速获取父元素、子元素选择器的功能,

微信图片_20220527121110.png

5. Automa小结


Automa对于零代码基础的读者,还是比较友好,上手也比较容易,利用Automa 提供的功能在 Web 浏览器中基本可以满足一些日常简单自动化操作需求,对于复杂的前端自动化操作场景,也可以在工作流程中添加拖入「 JavaScript 」组件来完成。

当然如果你是编程爱好者,建议还是首选采用编码脚本的形式来完成这类自动化操作任务,但不得不说,Automa工具中传达的一些背后设计思想,在一些实际工作场景中,还是值得参考借鉴的!

目录
相关文章
|
5月前
|
人工智能 自然语言处理 算法
AI智能混剪视频大模型开发方案:从文字到视频的自动化生成·优雅草卓伊凡
AI智能混剪视频大模型开发方案:从文字到视频的自动化生成·优雅草卓伊凡
392 0
AI智能混剪视频大模型开发方案:从文字到视频的自动化生成·优雅草卓伊凡
|
6月前
|
人工智能 Java 定位技术
Java 开发玩转 MCP:从 Claude 自动化到 Spring AI Alibaba 生态整合
本文详细讲解了Java开发者如何基于Spring AI Alibaba框架玩转MCP(Model Context Protocol),涵盖基础概念、快速体验、服务发布与调用等内容。重点包括将Spring应用发布为MCP Server(支持stdio与SSE模式)、开发MCP Client调用服务,以及在Spring AI Alibaba的OpenManus中使用MCP增强工具能力。通过实际示例,如天气查询与百度地图路线规划,展示了MCP在AI应用中的强大作用。最后总结了MCP对AI开发的意义及其在Spring AI中的实现价值。
1482 9
|
5月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
7月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
1232 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
7月前
|
数据采集 消息中间件 API
微店API开发全攻略:解锁电商数据与业务自动化的核心能力
微店开放平台提供覆盖商品、订单、用户、营销、物流五大核心模块的API接口,支持企业快速构建电商中台系统。其API体系具备模块化设计、双重认证机制、高并发支持和数据隔离等特性。文档详细解析了商品管理、订单处理、营销工具等核心接口功能,并提供实战代码示例。同时,介绍了企业级整合方案设计,如订单全链路自动化和商品数据中台架构,以及性能优化与稳定性保障措施。最后,针对高频问题提供了排查指南,帮助开发者高效利用API实现电商数智化转型。适合中高级开发者阅读。
|
7月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
10月前
|
Web App开发 IDE JavaScript
Selenium IDE:Web自动化测试的得力助手
Selenium IDE:Web自动化测试的利器。作为开源工具,Selenium IDE支持录制与回放用户操作,适用于Chrome、Firefox等多浏览器,简化了测试流程,提升了效率,降低了自动化测试的门槛。它还支持导出多种编程语言的脚本,便于测试集成与复用。
284 31
Selenium IDE:Web自动化测试的得力助手
|
10月前
|
存储 人工智能 自然语言处理
ChatMCP:基于 MCP 协议开发的 AI 聊天客户端,支持多语言和自动化安装 MCP 服务器
ChatMCP 是一款基于模型上下文协议(MCP)的 AI 聊天客户端,支持多语言和自动化安装。它能够与多种大型语言模型(LLM)如 OpenAI、Claude 和 OLLama 等进行交互,具备自动化安装 MCP 服务器、SSE 传输支持、自动选择服务器、聊天记录管理等功能。
2367 16
ChatMCP:基于 MCP 协议开发的 AI 聊天客户端,支持多语言和自动化安装 MCP 服务器
|
10月前
|
Web App开发 IDE 测试技术
Selenium:强大的 Web 自动化测试工具
Selenium 是一款强大的 Web 自动化测试工具,包括 Selenium IDE、WebDriver 和 Grid 三大组件,支持多种编程语言和跨平台操作。它能有效提高测试效率,解决跨浏览器兼容性问题,进行性能测试和数据驱动测试,尽管存在学习曲线较陡、不稳定等缺点,但其优势明显,是自动化测试领域的首选工具。
573 17
Selenium:强大的 Web 自动化测试工具