低代碼開發,推薦一款Web 端自動化神器:Automa

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工具中傳達的一些背後設計思想,在一些實際工作場景中,還是值得參考借鑑的!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章