最近发现一个集合了自动化和低代码为一体的浏览器插件,那就是automa。根据它官网的描述来说呢,那就是“一个通过连接块来自动化浏览器的扩展”。
下载安装
直接访问链接https://chrome.google.com/webstore/detail/automa/infppggnoaenmfagbfknfkancpbljcca(国内无法访问,请根据文章下方的下载地址下载对应插件进行安装)即可,添加这样插件就装好了。
![](https://pic1.zhimg.com/80/v2-643969e4ba5afec1d5fa29d7ab740454_1440w.webp)
初始化设置
这是你第一次打开插件的时候,你将来到一个welcomme页面,首先我们来设置一下语言,在Setting>Language中选择简体中文。
![](https://pic3.zhimg.com/80/v2-afa6e8b44c5cdc2053b7af7d11b5e516_1440w.webp)
![](https://pic3.zhimg.com/80/v2-dcfe2b236db6f19aa7467bada1fca96a_1440w.webp)
开始第一次的尝试
首先在工作流当中,选择新建工作流,然后我们来命名一个hello world的工作流,作为一个测试使用。新建完之后我们就进入了编辑页面,功能还是挺强大的。
![](https://pic3.zhimg.com/80/v2-e30b03673f4e4bc5e57a895259f0d2ee_1440w.webp)
主要的流程模块包括,General、Browser、Web interaction、Online services、Conditions,其中包含了各种各样的触发器,选择器、条件等等吧,算是一个功能比较完备的多状态机的设计流。
设计一个自动化流
首先我要随便设计的自动化流,1.打开新标签页输入链接跳转到百度,2.点击百度搜索框、输入hello world、点下搜索按钮,3.获取搜索结果页的所有结果标题、4.下载文件。
需求树立完之后,我来看一看我需要那些操作流,新建页面、表单、点击元素、判断元素是否存在、获取文本、导出数据。下图是我把所有需要的操作流,编排起来之后的样子,还挺好看的。
![](https://pic1.zhimg.com/80/v2-4e87a73c59eb280cd9534cf94f609688_1440w.webp)
在表单和点击元素中,大量使用了css选择器,这里我们可以使用automa自带的选择器工具,去寻找需要的元素,当然你也可以打开控制台,自行寻找。
![](https://pic1.zhimg.com/80/v2-315427b7ff8c2690b36df9c5547e9d40_1440w.webp)
![](https://pic3.zhimg.com/80/v2-db1f44a9a1147f3acef9334f005b6f72_1440w.webp)
这里有两个注意点,我们如果想将获取的数据保存起来,需要先在表格中新建变量,然后在获取文本的控件中设置插入表格,并且点击新建的变量名,这要就可以将数据保存入表格中。
![](https://pic2.zhimg.com/80/v2-16347b4430f227cb48617c3a1c348285_1440w.webp)
随后我们在导出数据中,设置需要导出的数据为表格即可。
![](https://pic1.zhimg.com/80/v2-ba6db0327476a4d1b516d943acb85f0c_1440w.webp)
总结
一个自动化玩具,可以简单做一些提交、数据获取、傻瓜式的操作,不过比较依赖当前网络速度。虽然有执行定时任务的能力,可以做一些挂机操作,但是相较于一些无头浏览器来说,可监控性还是比较差。适合做一些初期的项目尝试,例如抓抓数据,跑一些尝试demo等等,项目化那是不可能的,效率就直接卡死了。核心就是,适合个人玩玩,简单数据抓取,做点自动化操作节约劳动力。