1. Automa介紹

又到了優(yōu)秀工具推薦的時候了，今天給大家分享一款前端自動化操作神器: Automa 。

首先了解一下Automa是什么？ Automa它定位是一款 Chrome 插件，也就意味著，它的使用載體需要借助Chrome瀏覽器。利用Automa，即使你不會寫代碼，也能按照自己的需求，完成一系列自動化操作。利用它，你可以將一些重復(fù)性的任務(wù)實現(xiàn)自動化、并且它可以進行界面截圖、抓取網(wǎng)站數(shù)據(jù)、你還可以自定義時間何時去執(zhí)行自動化任務(wù)等。

2. Automa安裝

聽了上述介紹，想必你已經(jīng)躍躍欲試了。

如果你是一名開發(fā)愛好者，你可以打開Automa項目地址，克隆項目源碼，項目地址：

https://github.com/kholid060/automa

Automa是基于Vue語言來開發(fā)的，如果有二開需求的讀者，需要有一些Vue、JavaScript語言的基礎(chǔ)才行。

如果你想改造定制它的功能，下述是環(huán)境依賴安裝、構(gòu)建常用的幾條命令：

# 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。

如果你只是單純的想使用它，上述的安裝構(gòu)建命令可以直接省略，可以進入到chrome應(yīng)用商店下載它的插件。

插件下載地址：

https://chrome.google.com/webstore/detail/automa/infppggnoaenmfagbfknfkancpbljcca/related

3. Automa使用

1? 打開Automa插件，首頁界面顯示如下：

整個界面，目前看起來還是比較簡潔，當(dāng)前共分為三部分功能：

• 第1部分，dashboard首頁，提供了兩個默認demo示例，剛開始用的話，可以先從demo熟悉開始。
• 第2部分，workflows工作流，主要通過拖拽組件的方式來組織我們的自動化流程。
• 第3部分，log日志，運行工作流的日志，較為簡單。

從左側(cè)側(cè)邊欄可以進入到 Workflows 工作流程 Tab 中，這也是大家使用最多的功能，

在workflows中，從上述圖中，可以看到提供了導(dǎo)入工作流「 Import workflow 」、新建工作流「 New workflow 」兩個功能按鈕。

比如新建一個工作流test_baidu_flow

創(chuàng)建項目后，會進入到工作流編輯頁面，該界面是用于構(gòu)建自動化流程；左側(cè)區(qū)域是操作區(qū)域，右側(cè)區(qū)域是主流程構(gòu)建區(qū)域

左側(cè)區(qū)域的操作組件，共包括了基本操作組件，如Trigger 觸發(fā)、Delay 延遲、Repeat task 重復(fù)執(zhí)行任務(wù)， 還有針對瀏覽器操作組件、元素操作組件、條件判斷組件，具體感興趣的讀者可以自行體驗。整體來講，提供的功能，能滿足日常針對Web瀏覽器常用到的一些功能組件了。

這些操作組件在代碼層面，都是以task任務(wù)形式定義的：

4. Automa實戰(zhàn)一下

為了讓你更好的對Automa有一個直觀了解，接下來，我們通過一個簡單案例實戰(zhàn)一下。

實戰(zhàn)需求：

• 打開微信搜索頁面：https://weixin.sogou.com/
• 搜索：測試開發(fā)技術(shù) 公眾號
• 從搜索到的結(jié)果中，點擊進入符合要求的公眾號鏈接，并截圖保存。

由于Automa是純通過組件拖拉的形式來組織任務(wù)的，為了方便大家有一個直觀的對比，我們先將上述實戰(zhàn)需求，用Selenium+Python來先實現(xiàn)一遍。

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("測試開發(fā)技術(shù)")
driver.find_element(By.CSS_SELECTOR,".swz2").click()
driver.find_element_by_link_text("測試開發(fā)技術(shù)").click()
driver.get_screenshot_as_file('test.png')
time.sleep(3)
driver.quit()

Automa示例：

先選擇「 New Tab 」添加被操作的網(wǎng)頁，接著，通過操作「 Forms 」向輸入框中輸入內(nèi)容，使用「 Click element 」操作模擬點擊搜索按鈕，接下來又做了一些條件判斷、延時、截圖、關(guān)閉網(wǎng)頁等。

在組織任務(wù)流前，需要包含了一個「 Trigger 」組件，它是作為任務(wù)的「 啟動節(jié)點 」，類似Selenium在操作網(wǎng)頁前，需要實例化一個操作對象一樣，默認執(zhí)行方式為 Manually，即：人工方式。我們也可以去定義任務(wù)的觸發(fā)策略，比如按指定時間、周期性等。

自動化任務(wù)或者可以理解為自動化“腳本”定義好之后，是直接保存在當(dāng)前瀏覽器插件中的，如果怕數(shù)據(jù)丟失，我們也可以將創(chuàng)建好的自動化任務(wù)，導(dǎo)出到外部，Autom支持將任務(wù)導(dǎo)出成JSON、TXT格式的文件。

需要注意的是，Autom在定位元素時，使用的CSS定位符，比如定位微信搜索輸入框：

在連接兩個組件關(guān)系時， Automa 插件提供了快速獲取父元素、子元素選擇器的功能，

5. Automa小結(jié)

Automa對于零代碼基礎(chǔ)的讀者，還是比較友好，利用Automa 提供的操作在 Web 自動化中基本可以滿足一些日常簡單的功能場景，對于復(fù)雜的前端自動化操作場景，也可以在工作流程中可以拖入「 JavaScript 」操作來完成。

當(dāng)然如你是編程愛好者，還是建議首選用編碼腳本的形式來完成這類自動化操作任務(wù)，但不得不說，Automa工具中傳達的一些背后設(shè)計思想，在一些實際工作場景中，還是值得參考借鑒的！