1. Automa介紹
又到了優秀工具推薦的時候了，今天給大家分享一款前端自動化操作神器: Automa 。
首先了解一下Automa是什麼？ Automa它定位是一款 Chrome 外掛，也就意味著，它的使用載體需要藉助Chrome瀏覽器。利用Automa，即使你不會寫程式碼，也能按照自己的需求，完成一系列自動化操作。利用它，你可以將一些重複性的任務實現自動化、並且它可以進行介面截圖、抓取網站資料、你還可以自定義時間何時去執行自動化任務等。
2. Automa安裝
聽了上述介紹，想必你已經躍躍欲試了。
如果你是一名開發愛好者，你可以開啟Automa專案地址，克隆專案原始碼，專案地址：
https://github.com/kholid060/automa
Automa是基於Vue語言來開發的，如果有二開需求的讀者，需要有一些Vue、JavaScript語言的基礎才行。
如果你想改造定製它的功能，下述是環境依賴安裝、構建常用的幾條命令：
# 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
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支援將任務匯出成JSON、TXT格式的檔案。
需要注意的是，Autom在定位元素時，使用的CSS定位符，比如定位微信搜尋輸入框：
在連線兩個元件關係時， Automa 外掛提供了快速獲取父元素、子元素選擇器的功能，
5. Automa小結
Automa對於零程式碼基礎的讀者，還是比較友好，利用Automa 提供的操作在 Web 自動化中基本可以滿足一些日常簡單的功能場景，對於複雜的前端自動化操作場景，也可以在工作流程中可以拖入「 JavaScript 」操作來完成。
當然如你是程式設計愛好者，還是建議首選用編碼指令碼的形式來完成這類自動化操作任務，但不得不說，Automa工具中傳達的一些背後設計思想，在一些實際工作場景中，還是值得參考借鑑的！