1. Automa介绍

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

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

2. Automa安装

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

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

https://github.com/kholid060/automa

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

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

# 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

3. Automa使用

1､打开Automa插件，首页界面显示如下：

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

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

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

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

比如新建一个工作流test_baidu_flow

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

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

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

4. Automa实战一下

为了让你更好的对Automa有一个直观了解，接下来，我们通过一个简单案例实战一下。

实战需求：

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

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

Selenium+Python代码示例：

import time
from selenium import webdriver
from selenium.webdriver.common.by import Bydriver = 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示例：

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

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

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

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

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

5. Automa小结

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

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

低代码开发，推荐一款Web 端自动化神器：Automa相关推荐

低代码开发，推荐一款Web 端自动化神器：Automa！
1. Automa介绍又到了优秀工具推荐的时候了,今天给大家分享一款前端自动化操作神器: Automa. 首先了解一下Automa是什么?Automa它定位是一款 Chrome 插件,也就意味着,它 ...
Web 端自动化神器Automa，批量下载美图，可做封面
文章目录 Automa介绍 Automa安装本文的目标自动搜索自定义数据下载批量下载美女封面实现的效果品尝下载的美图总结参考低代码 | 美图秀色可餐 | 可做封面 Automa介绍 ...
厉害了！推荐一个 Web 端自动化神器 - Automa
来源:AirPython 1. 前言大家好,我是安果! 之前推荐过很多优秀的 Web 自动化工具,比如:Selenium.Helium.Cypress.Pyppeteer 等利用它们实现自动化的前 ...
推荐一款移动端调试神器（eruda）
1. 简介 Eruda github地址: 戳这里 Eruda 是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括: 1) 捕获 console 日志. 2) ...
值得关注的5款“企业级低代码开发平台”推荐
优质的"企业级低代码开发平台"该如何评估? 企业级低代码作为平台层的一员,其对应的核心价值是:提升应用软件开发效率和降低应用软件开发门槛. 由企业级低代码的核心价值还可衍生出两 ...
推荐一款C端的低代码产品
目录写在前面低代码平台平台怎么选各平台区别为什么选它写在前面大家都知道低代码这个叫法是从B端叫起来的,也就是说不管是业务人员还是开发人员,都是企业内部使用.那么有没有C端的,且免费使用的 ...
SaaSBase：推荐一些超好用的低代码开发软件（中篇）
在海量的低代码开发软件中,企业该如何选择呢?不用担心,SaaSBase(saasbase.cn)来帮您! 根据SaaSBase(saasbase.cn)的数据统计,好用的低代码开发软件较多,因此小编把 ...
十分钟开发一款应用，这15个国产低代码开发平台太秀了！
"低代码开发"最早可追溯到20世纪90年代至21世纪初的编程语言和工具(百度百科).阿里云智能总裁张建锋在钉钉6.0发布会上也表示,"低代码开发",将成为新一代 ...
顶级的18 款开源低代码开发平台
文 | 白开水出品 | OSC开源社区低代码成了企追求的主流目标,与使用计算机编程语言构建应用程序的传统方法不同,低代码开发平台是使用图形向导来创建和构建软件的应用程序开发平台.因此,在许多情况下 ...

低代码开发，推荐一款Web 端自动化神器：Automa