教做幼儿菜谱菜的网站,网站先做前端还是后端,网站建设的原因,做两个一摸一样的网站Automa是一个chrome扩展#xff0c;通过拖拽0代码实现工作流#xff0c;模拟网页的各种点击、表单填写等操作#xff0c;使用时点击插件脚本一键执行#xff0c;或者设置定时执行#xff0c;从而简化我们的工作。 功能介绍
官方文档地址#xff1a;Getting started | Au… Automa是一个chrome扩展通过拖拽0代码实现工作流模拟网页的各种点击、表单填写等操作使用时点击插件脚本一键执行或者设置定时执行从而简化我们的工作。 功能介绍
官方文档地址Getting started | Automa Docs。
界面
新建一个插件界面如上图。
左侧面版有一些列组件可供选择右侧画布区域可以放置组件再把组件用线连起来。点击组件组件上方出现编辑、删除等按钮点击编辑左侧弹出组件配置区域。右上方工具栏其中table可以创建数据表globalData可以编辑全局数据设置里可以选择中文
常用组件
插件提供了非常多的组件。有界面相关的如点击元素、获取元素属性、获取元素文本、悬停元素、按键等等有逻辑相关的如条件、判断元素存在、循环等有浏览器相关的如激活当前活动标签页、新建标签页、前进、返回、刷新、截屏等等。
这里介绍几个主要的组件
触发器
一个脚本以触发器开始新建脚本默认会有一个触发器。编辑触发器有编辑触发器和参数两个配置。其中编辑触发器默认手动可以换成下图的多种触发方式可以按时间定时执行也可以设置快捷键等。 可以添加若干参数当配置了参数时点击脚本不会立刻执行而是弹窗填写参数再点击运行。参数类型主要是input和checkbox很遗憾没有radio。 活动标签页
激活当前活动标签页。我们执行脚本需要有一个承接页面。
新建标签页
新打开一个标签页可以编辑URL地址。
点击元素
用的最多的组件点击页面某个元素。在编辑界面可以选择元素。
表单
用的第二多的组件选中某个表单元素输入指定的值。
表单和点击元素配合就是我们绝大部分用到的操作了。
延迟
这个组件也经常用到比如我打开一个页面要延迟一会再执行操作否则可能会报错元素不存在脚本就中断了。再比如我提交了一个表单要等一会页面刷新再执行后续操作。
悬停元素
有的地方操作是hover触发的就需要模拟鼠标悬停。
截屏
执行完某一步后截屏保存下状态后续可以在电脑的截图文件夹找到。
JavaScript代码
可以直接在页面写一段JS代码来执行可以定制实现一些复杂的步骤。
选择器
几个UI组件都有选择器按钮点击可以在页面看到选择器遮罩鼠标放到元素上会显示跟控制台一样的元素高亮效果以及元素属性提示。点击会出现在选择器配置中。
选择器包括class和XPath两种模式一般class就行。 有时候组件点了没反应可以直接点击插件按钮同样有一个选择器按钮可以选中元素获取样式然后复制粘贴到组件配置。如果还是没反应看看上面的小眼睛是否打开了。
变量
这里要重点说一下。配置项里除了写死的值也可以使用变量。Automa有几种变量类型globalData、variables、table、loopData。
loopData后面循环再说table类似一个本地的临时数据库可以在代码中存入数据最后用导出组件导出数据。暂时没怎么研究。globalData全局预设一些值右上角工具栏也有按钮方便修改。我是把脚本的配置项都写到这里方便调整参数运行。部分配置可以读取globalData比如打开标签页url配置可以通过{{globalData.xxx}}拼入变量。但是我在表单输入框这样写不行variables可以。variables内存中的变量可以通过设置变量后面组件读取变量配置。比如表单文本域输入{{variables.xxx}}。还不行的话前面加上!!变成!!{{variables.xxx}}触发器的参数也是写到variables里。
方法
Javascript代码模块中除了常规的js代码还支持了几个特定的方法
automaNextBlock(data, insert)
结束当前js代码继续执行下一个模块。
automaRefData(keyword, path?)
可以获取当前的table、variables、globalData、loopData。
console.log(automaRefData(globalData))
console.log(automaRefData(variables))
console.log(automaRefData(variables, xxx))
console.log(automaRefData(table, 0))
console.log(automaRefData(loopData, loopId))
automaSetVariable(name, value)
写入值到variables。
前面globalData的数据无法放到表单我就在最前面放了个Javascript代码模块读取globalData数据再写到variables方便统一在全局写配置。
还有前面说到触发器的参数没有radio我想做单选就用checkbox代替了但是variable得到的是一系列key我就在前面放了个Javascript代码模块处理了一下。
automaFetch(type, resource)
automaFetch(json, { url: https://api.example.com}).then((result) {console.log(result);
})automaFetch(json, {url: https://api.example.com,method: POST,body: JSON.stringify({title: Hello world,}),
})
autoResetTimeout()
没用过重置执行超时时间。 循环
循环有循环数据和循环元素两个方式。在表单配置项还有代码中可以通过loopData拿到当前循环数据或元素。loopId是循环组件配置的loopId循环结束也要放一个循环结束组件也要填相同的loopId。
有时候是{{loopData.loopId.data}}有时候是{{loopDataloopId}}要注意。
循环数据 循环数据组件可以循环table、variables等不支持globalData。还可以自定义数据会弹出一个json输入框不过还是放在globalData方便管理一些再通过js写到variables。
循环元素
有时候我们要在页面上动态从一个表格或者列表读取元素再获取对应数据执行后续操作。此时可以用循环元素组件然后选择css会得到具有相同css的元素列表。后面再选择元素进行操作就可以在css中用loopData做前缀, 如{{loopDataversions}} .ant-radio-input Demo实现
下面我们实现一个小程序后台批量加白名单功能。
给几个小程序批量加域名白名单每个小程序要加几十个这里用脚本就可以很轻松实现。 如上图登录后在开发设置找到服务器域名白名单。添加一次的操作是点击添加 - 输入域名 - 点击确定。然后几十个域名需要重复上述操作。 我们新建一个工作流脚本来实现上述操作。登录并进入配置页面点击脚本即可。
首先点击全局数据在json里配一个domain_list, 维护一个域名列表。
然后触发器 - 活动标签页 - Javascript代码。这里代码中将globalData.domain_list写入到variables。
const domain_list automaRefData(globalData).domain_listautomaSetVariable(domain_list, domain_list)console.log(domain_list)
console.log(automaRefData(variables))automaNextBlock()
刚刚打开标签页接下来稍作延迟等待添加域名白名单区域渲染。
接下来是重点放入循环数据组件配置选择变量变量名称domain_list。循环id随便定一个这里就叫domain吧。再在最后放一个循环断点组件填入domain。
每次循环我们要执行的操作放在中间。依次是点击元素(添加按钮)、表单(输入域名!!{{loopData.domain.data}})、延迟、点击元素(确定按钮)、延迟。 这样当我们在当前页面点击执行脚本脚本就会按照我们在全局变量写的域名列表依次添加。如果有的域名已经在域名列表或者配置错误导致添加失败界面上没有其他元素展示上述操作不会影响。
