?

?

作者 |?小碗湯

來源 |?進擊云原生

今天為大家分享一款前端自動化操作神器: 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?x=new?XMLHttpRequest(); //需要在上一個塊中打開會img.keaitupian.cn網站，解決跨域問題 x.open("GET",?url.column,?true); x.responseType?=?'blob'; x.onload=function(e){var?url?=?window.URL.createObjectURL(x.response)var?a?=?document.createElement('a');a.href?=?urla.download?=?''a.click() } x.send();

LoopBreakpoint塊用于終止LoopData循環，需要填入上面的LoopID：one

批量下載封面

工作流截圖：

Tigger觸發方式為手動觸發；LoopData的loopID為one，循環數據為從1~119的Numbers，這個數據來源于，最后一頁按鈕href 中的值：

NewTab會循環打開每一頁，打開頁面輸入為：

https://www.keaitupian.cn/meinv/list_4_{{?loopData@one}}.html

loopData@one會取到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.jpg

LoopData的loopID為two，數據來源為DataColumns，這個即為上面AttributeValue塊Save的數據。循環的每一次都會獲取到一個key。上面我們只Save了一個key：fengmianurl

JavaScriptCode塊：

function?download(url)?{var?x=new?XMLHttpRequest();//需要在上一個flow中打開會img.keaitupian.cn網站，解決跨域問題x.open("GET",?url,?true);x.responseType?=?'blob';x.onload=function(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?i=0;?i<datas.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/wiki

https://github.com/Kholid060/automa/wiki/Features#reference-data

https://github.com/Kholid060/automa/wiki/Blocks#loop-data

?

往期推薦

如果讓你來設計網絡

寫時復制就這么幾行代碼，還是不會？

小小的 likely 背后卻大有玄機！

明明還有大量內存，為啥報錯“無法分配內存”？

點分享

點收藏

點點贊

點在看

總結

以上是生活随笔為你收集整理的Web 自动化神器，批量下载美图，可直接导入使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。