专业的营销型网站制作,网站建设收费分几次,网站建设的岗位是什么岗位,wordpress 为知笔记作者 | 小碗汤来源 | 进击云原生今天为大家分享一款前端自动化操作神器: Automa。Automa介绍它是一款 Chrome 插件#xff0c;即使你不会写代码#xff0c;也能按照自己的需求#xff0c;完成一系列自动化操作。利用它#xff0c;你可以将一些重复性的任务实现自动化、… 作者 | 小碗汤来源 | 进击云原生今天为大家分享一款前端自动化操作神器: Automa。Automa介绍它是一款 Chrome 插件即使你不会写代码也能按照自己的需求完成一系列自动化操作。利用它你可以将一些重复性的任务实现自动化、并且它可以进行界面截图、用CSS Selector、Xpath抓取网站数据、设置Proxy、条件提交表单、调用Webhook还可以自定义时间去执行任务等。Automa安装如果你是一名开发爱好者可以打开Automa项目地址克隆项目源码项目地址https://github.com/kholid060/automa插件下载地址为https://chrome.google.com/webstore/detail/automa/infppggnoaenmfagbfknfkancpbljcca/安装后您可通过连接块来自动化浏览器的扩展。从自动填写表单、执行重复性任务、截取屏幕截图到抓取网站数据您想使用此扩展程序做什么取决于您。本文的目标通过Web 端自动化神器低代码自动批量下载配图网的美女小姐姐封面供您赏用让您即使没有编程基础也可以通过导入这里的数据将流程跑通。自动搜索自动打开网站stackoverflow第一个Trigger块触发方式可以是手动、指定星期、指定日期时间、快捷键第二个NewTab块打开谷歌网站第三个Forms块通过辅助工具定位到输入框输入Stackoverflow第四个Click块定位到搜索按钮点击搜索实现自动搜索的功能。自定义数据下载NewTab打开以下页面用于准备下载。https://img.keaitupian.cn/uploads/*.jpg注因为网站主页https://www.keaitupian.cn/和img.keaitupian.cn不是同一个域名会存在跨域的问题所以打开图片域名页执行JS下载图片动作。LoopData的LoopID为one之后终止循环要用到使用CustomData插入Json数据如[{column: https://img.keaitupian.cn/newupload/11/1637224362487977.jpg},{column: https://img.keaitupian.cn/newupload/11/1636795162640425.jpg}
]JavaScriptCode块执行下载图片的动作下载的内容来自于上一个loopData块这里通过prevBlockData引用。const url automaRefData(prevBlockData, )
//alert(url.column)
var xnew XMLHttpRequest();
//需要在上一个块中打开会img.keaitupian.cn网站解决跨域问题
x.open(GET, url.column, true);
x.responseType blob;
x.onloadfunction(e){var url window.URL.createObjectURL(x.response)var a document.createElement(a);a.href urla.download a.click()
}
x.send();LoopBreakpoint块用于终止LoopData循环需要填入上面的LoopIDone批量下载封面工作流截图Tigger触发方式为手动触发LoopData的loopID为one循环数据为从1~119的Numbers这个数据来源于最后一页按钮href 中的值NewTab会循环打开每一页打开页面输入为https://www.keaitupian.cn/meinv/list_4_{{ loopDataone}}.htmlloopDataone会取到loopID为one的item。AttributeValue获取每一页中的img属性src的值所以CSSSelector为 .related_box a img选中Multiple可以将所有class为related_box子标签下的src获取到。选中Save Data存储key名为fengmianurl类型为Array。这样保证后面的循环可以获取数据。NewTab打开img域名页防止跨域这里打开地址为https://img.keaitupian.cn/newupload/11/1637224362487977.jpgLoopData的loopID为two数据来源为DataColumns这个即为上面AttributeValue块Save的数据。循环的每一次都会获取到一个key。上面我们只Save了一个keyfengmianurlJavaScriptCode块function download(url) {var xnew XMLHttpRequest();//需要在上一个flow中打开会img.keaitupian.cn网站解决跨域问题x.open(GET, url, true);x.responseType blob;x.onloadfunction(e){var url window.URL.createObjectURL(x.response)var a document.createElement(a);a.href urla.download a.click()}x.send();
}const datas automaRefData(prevBlockData, )
//这里获取到格式为https://img.keaitupian.cn/newupload/11/1637224362487977.jpg,https://img.keaitupian.cn/newupload/11/1636795162640425.jpg
for (var i0; idatas.fengmianurl.length; i)
{var url datas.fengmianurl[i]console.log(url)if (url.indexOf(https://img.keaitupian.cn) ! 0) {continue}download(url)
}我们通过automaRefData(prevBlockData, )获取到上一块的输出赋值给datas。datas中取出fengmianurl这个数组进行遍历下载图片地址。LoopBreakpoint结束loopID为two的loopData块第一个CloseTab关闭img图片域名页面。第二个CloseTab循环关闭每一页。最后一个LoopBreakpoint结束loopID为one的loopData块Automa对于零代码基础的读者还是比较友好上手也比较容易利用Automa 提供的功能在 Web 浏览器中基本可以满足一些日常简单自动化操作需求对于复杂的前端自动化操作场景也可以在工作流程中添加拖入JavaScript 来完成。当然如果你是编程爱好者建议还是首选采用编码脚本的形式来完成这类自动化操作任务但不得不说Automa工具中传达的一些背后设计思想在一些实际工作场景中还是值得参考借鉴的怎么玩取决于您。参考https://github.com/Kholid060/automa/wikihttps://github.com/Kholid060/automa/wiki/Features#reference-datahttps://github.com/Kholid060/automa/wiki/Blocks#loop-data往期推荐如果让你来设计网络写时复制就这么几行代码还是不会小小的 likely 背后却大有玄机明明还有大量内存为啥报错“无法分配内存”点分享点收藏点点赞点在看
