1. Automa介紹
又到了優(yōu)秀工具推薦的時(shí)候了已骇，今天給大家分享一款前端自動(dòng)化操作神器: Automa离钝。
首先了解一下Automa是什么？ Automa它定位是一款 Chrome 插件褪储，也就意味著卵渴，它的使用載體需要借助Chrome瀏覽器。利用Automa鲤竹，即使你不會(huì)寫代碼浪读，也能按照自己的需求，完成一系列自動(dòng)化操作辛藻。利用它碘橘，你可以將一些重復(fù)性的任務(wù)實(shí)現(xiàn)自動(dòng)化、并且它可以進(jìn)行界面截圖揩尸、抓取網(wǎng)站數(shù)據(jù)蛹屿、你還可以自定義時(shí)間何時(shí)去執(zhí)行自動(dòng)化任務(wù)等。
2. Automa安裝
聽(tīng)了上述介紹岩榆，想必你已經(jīng)躍躍欲試了错负。
如果你是一名開(kāi)發(fā)愛(ài)好者，你可以打開(kāi)Automa項(xiàng)目地址勇边，克隆項(xiàng)目源碼犹撒，項(xiàng)目地址：
https://github.com/kholid060/automa
Automa是基于Vue語(yǔ)言來(lái)開(kāi)發(fā)的，如果有二開(kāi)需求的讀者粒褒，需要有一些Vue于游、JavaScript語(yǔ)言的基礎(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是一個(gè)新的 JS 包管理工具，類似npm月杉。
如果你只是單純的想使用它刃跛，上述的安裝構(gòu)建命令可以直接省略，可以進(jìn)入到chrome應(yīng)用商店下載它的插件苛萎。
插件下載地址：
https://chrome.google.com/webstore/detail/automa/infppggnoaenmfagbfknfkancpbljcca/related
3. Automa使用
1? 打開(kāi)Automa插件桨昙，首頁(yè)界面顯示如下：
整個(gè)界面，目前看起來(lái)還是比較簡(jiǎn)潔腌歉，當(dāng)前共分為三部分功能：
- 第1部分蛙酪，dashboard首頁(yè)，提供了兩個(gè)默認(rèn)demo示例翘盖，剛開(kāi)始用的話桂塞，可以先從demo熟悉開(kāi)始。
- 第2部分馍驯，workflows工作流藐俺，主要通過(guò)拖拽組件的方式來(lái)組織我們的自動(dòng)化流程炊甲。
- 第3部分，log日志欲芹，運(yùn)行工作流的日志，較為簡(jiǎn)單吟吝。
從左側(cè)側(cè)邊欄可以進(jìn)入到 Workflows 工作流程 Tab 中菱父，這也是大家使用最多的功能，
在workflows中剑逃，從上述圖中浙宜，可以看到提供了導(dǎo)入工作流「 Import workflow 」、新建工作流「 New workflow 」兩個(gè)功能按鈕蛹磺。
比如新建一個(gè)工作流test_baidu_flow
創(chuàng)建項(xiàng)目后粟瞬，會(huì)進(jìn)入到工作流編輯頁(yè)面，該界面是用于構(gòu)建自動(dòng)化流程萤捆；左側(cè)區(qū)域是操作區(qū)域裙品，右側(cè)區(qū)域是主流程構(gòu)建區(qū)域
左側(cè)區(qū)域的操作組件，共包括了基本操作組件俗或，如Trigger 觸發(fā)市怎、Delay 延遲、Repeat task 重復(fù)執(zhí)行任務(wù)辛慰， 還有針對(duì)瀏覽器操作組件区匠、元素操作組件、條件判斷組件帅腌，具體感興趣的讀者可以自行體驗(yàn)驰弄。整體來(lái)講，提供的功能速客，能滿足日常針對(duì)Web瀏覽器常用到的一些功能組件了戚篙。
這些操作組件在代碼層面，都是以task任務(wù)形式定義的：
4. Automa實(shí)戰(zhàn)一下
為了讓你更好的對(duì)Automa有一個(gè)直觀了解挽封，接下來(lái)已球，我們通過(guò)一個(gè)簡(jiǎn)單案例實(shí)戰(zhàn)一下。
實(shí)戰(zhàn)需求：
- 打開(kāi)微信搜索頁(yè)面：https://weixin.sogou.com/
- 搜索：
測(cè)試開(kāi)發(fā)技術(shù)公眾號(hào) - 從搜索到的結(jié)果中辅愿，點(diǎn)擊進(jìn)入符合要求的公眾號(hào)鏈接智亮，并截圖保存。
由于Automa是純通過(guò)組件拖拉的形式來(lái)組織任務(wù)的点待，為了方便大家有一個(gè)直觀的對(duì)比阔蛉，我們先將上述實(shí)戰(zhàn)需求，用Selenium+Python來(lái)先實(shí)現(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("測(cè)試開(kāi)發(fā)技術(shù)")
driver.find_element(By.CSS_SELECTOR,".swz2").click()
driver.find_element_by_link_text("測(cè)試開(kāi)發(fā)技術(shù)").click()
driver.get_screenshot_as_file('test.png')
time.sleep(3)
driver.quit()
Automa示例：
先選擇「 New Tab 」添加被操作的網(wǎng)頁(yè)状原，接著聋呢，通過(guò)操作「 Forms 」向輸入框中輸入內(nèi)容，使用「 Click element 」操作模擬點(diǎn)擊搜索按鈕颠区，接下來(lái)又做了一些條件判斷削锰、延時(shí)、截圖毕莱、關(guān)閉網(wǎng)頁(yè)等器贩。
在組織任務(wù)流前，需要包含了一個(gè)「 Trigger 」組件朋截，它是作為任務(wù)的「 啟動(dòng)節(jié)點(diǎn) 」蛹稍，類似Selenium在操作網(wǎng)頁(yè)前，需要實(shí)例化一個(gè)操作對(duì)象一樣部服，默認(rèn)執(zhí)行方式為 Manually唆姐，即：人工方式。我們也可以去定義任務(wù)的觸發(fā)策略廓八，比如按指定時(shí)間奉芦、周期性等。
自動(dòng)化任務(wù)或者可以理解為自動(dòng)化“腳本”定義好之后瘫想，是直接保存在當(dāng)前瀏覽器插件中的仗阅，如果怕數(shù)據(jù)丟失，我們也可以將創(chuàng)建好的自動(dòng)化任務(wù)国夜，導(dǎo)出到外部减噪，Autom支持將任務(wù)導(dǎo)出成JSON、TXT格式的文件车吹。
需要注意的是筹裕，Autom在定位元素時(shí)，使用的CSS定位符窄驹，比如定位微信搜索輸入框：
在連接兩個(gè)組件關(guān)系時(shí)朝卒， Automa 插件提供了快速獲取父元素、子元素選擇器的功能乐埠，
5. Automa小結(jié)
Automa對(duì)于零代碼基礎(chǔ)的讀者抗斤，還是比較友好，利用Automa 提供的操作在 Web 自動(dòng)化中基本可以滿足一些日常簡(jiǎn)單的功能場(chǎng)景丈咐，對(duì)于復(fù)雜的前端自動(dòng)化操作場(chǎng)景瑞眼，也可以在工作流程中可以拖入「 JavaScript 」操作來(lái)完成。
當(dāng)然如你是編程愛(ài)好者棵逊，還是建議首選用編碼腳本的形式來(lái)完成這類自動(dòng)化操作任務(wù)伤疙，但不得不說(shuō)，Automa工具中傳達(dá)的一些背后設(shè)計(jì)思想，在一些實(shí)際工作場(chǎng)景中徒像，還是值得參考借鑒的黍特！
