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

共 3129字,需浏览 7分钟

 ·

2021-11-15 11:32


1. Automa介绍

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

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

2. Automa安装

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

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

https://github.com/kholid060/automa

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
chrome网上商店

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 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示例:

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

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

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

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

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

5. Automa小结

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

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


以上分享希望对你有所帮助或者启发,有被帮助到的朋友欢迎点赞在看、转发


重磅消息: 由狂师老师授课主讲的「全栈测试开发技能训练营」正在火热上课中,课程内容、上课质量得到学员们一致好评!为了满足那些有学习提升需求的新进读者,今天恰逢双十一之际,本期全栈测开训练营特开放5个插班名额


推荐阅读
重磅消息 | 2021年最新全栈测试开发技能实战指南(第2期)

官宣了,测试大神必备的"三把利剑"!

Python全栈测试开发实战训练营2期!开课了!

接口测试常用工具及测试方法(新手篇)

史上最全测试开发工具推荐(含自动化、APP性能、稳定性、抓包神器)


END

所有原创文章
第一时间发布至此公众号「测试开发技术」

长按二维码/微信扫码  添加作者


阅读原文

浏览 82
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报