Automa——小而美的Web自动化拓展

3,943 阅读3分钟

nicola-ferrari-2.jpg 假如现在你有这样的需求
每天在不同的网站爬取数据保存文档
每天本地指定文件夹的文件上传到网站
每天观察B站指定up主们对其标题识别进行点赞鼓励社区或点差净化网络
根据网页内容生成指定内容——可操作性很大哦

工欲善其事必先利其器

download:Automa - An extension for browser automation - Automa
learn:Getting started | Automa Docs
marketplace:Automa Marketplace - Automa

实现的方案有很多,关键是哪个用着舒服,这很重要

天下苦秦久矣

第一种 油猴脚本

遥想公瑾当年,小乔初嫁了,雄姿英发

优点:历史悠久,脚本库历史累计很多
缺点:开发页面丑

【油猴脚本】油猴脚本官方下载 v4.9 crx版-七喜软件园

第二种 自行开发chrome拓展

草耕火种从零开始,告辞

优点:拓展的爸爸
缺点:学习成本高,需要选型进行热更新配置 综述 | Chrome 扩展开发文档 (gitbooks.io)

第三种 selenium.js驱动浏览器模拟操作

优点:社区活跃,接口能力丰富
缺点:基于脚本的开发,日常使用需要代码运行环境,分享体验受限

const {Builder} = require('selenium-webdriver'); 
require("chromedriver"); 
(async function helloSelenium() { 
   let driver = await new Builder
().forBrowser('chrome').build();
   await driver.get('https://selenium.dev'); 
   await driver.quit(); 
})();

第四种 新晋宠儿 Automa浏览器插件

优点:操作简单,开发体验好,分享体验佳
缺点:工作流市场尚未有很多现成的脚本

界面现代化 企业微信截图_da899e80-02cf-4c5a-b8f0-755302cbf568.png 工作节点逻辑复用 企业微信截图_39ec1c8b-36dc-4e90-8433-975141b7994f.png

实战例子

yapi想必很多人都知道是个接口维护的网站,但是当个typescript搬运工着实没有意思 所有的重复操作都是没有意义的,接下来就以接口生成的例子释放劳动力吧

image.png

export interface ListInfoParams {
brandId:integer
longitude:string
latitude:string
promotionPlatform:integer
guiderId:string
current:string
pageSize:string
storeName:string
}
export interface ListInfoResult {
storeId:number
storeName:string
latitude:number
longitude:number
}
export const listInfo = (data: ListInfoParams): ApiResponse<ListData<ListInfoResult>> =>
  httpCatch.post('/store/user/relation/query/list/info',data)

运行后剪贴板里就是这些内容细心的朋友可能已经发现了promotionPlatform的类型错了,证明不是我手输的,此诚为抛砖引玉,后续在使用的过程中还会加入枚举类型的识别和生成及更多可能性 工作流已经在应用市场,当前的社区参差不齐,分享是为了你们写工作流给我用嘿嘿,我躺的更平点,嘿嘿

常用功能

日志管理
运行失败的点点滴滴 image.png Debug模式
记录当前节点的上下文变量 image.png 主机分享
可以远程让你的测试小伙伴实时体验你的开发版本 image.png

上限很高的模块

直接用react在页面里加个子应用,自带样式隔离 image.png 执行工作流可以定制脚本执行前置的数据准备 image.png

结语

经过大量实践,这个浏览器插件真的戳中我的心窝窝,但凡有有关浏览器的操作我相信它都能胜任,甚至拖动验证码都可以暴力破解(因为大部分的空缺位置是在一个范围内,而且失败不发接口进行限制)通过滑动指定像素刷新再滑动指定像素的无脑方案。用github登录还可以把脚本存在云端,登录可同步下载,绝绝子。