1. 前端自動化部署解決方案
對象存儲服務都有提供對應的控制台管理桶，同時也提供響應的API供後端業務調用。
aws-s3官方提供了命令行終端操作庫可以方便在命令行發布我們的靜態資源： https://aws.amazon.com/cn/cli/
我們可以這樣發布：
騰訊的cos可以使用很輕量第三方庫 cos-manager 發布資源: https://github.com/yansenlei/cos-manager
npm script 類似shell 的 exec，可以幫助你執行多個並行或順序執行的命令，我們可以一次性執行 刪除本地dist資源->打包->發布
參考：
https://docs.npmjs.com/misc/scripts
http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
以上發布我們可以這樣寫：
一個命令，提包走人。（雖然走了有點慌...）
持續集成是一種軟體開發實踐，每一次發布源碼都會集成一次，每一次都會自動化的構建，這意味著也可以把上面的發布腳本在服務端跑起來，打包 測試 發布全部交給CI處理，目前主流的工具是 Travis CI ，具體可以參照： http://efe..com/blog/front-end-continuous-integration-tools/
2. 如何進行前端自動化測試
一般前端自動化測試大致包括
類庫單元測試自動化
UI組件測試自動化
類庫單元測試自動化
較好實現
基本思路是讓不同的瀏覽器可以自動根據指令跑一些JS函數
結果與預期比對後返回是否通過case測試標志
其中一般有兩種實現方式：
其一：
1.打開目標瀏覽器，運行測試框架站點
2.測試框架站點通過ajax 輪詢、websocket 等方式，將待測 js 的 case 在瀏覽器內運行（通過eval 、createElement("script") 等方式）
3.比對測試結果，將結果 post 到遠端
4.遠端接受測試結果
5.遠端等待所有瀏覽器返回結果完成
6.marge 所有瀏覽器數據顯示最終通過與否結果。
這種方式弊端：
人工開啟一次所有瀏覽器
需要排隊測試，瀏覽器只能一次運行完一組測試後才能再運行下一組
如果中間某testcase導致瀏覽器異常，返回結果將缺失，需要人工去伺服器上檢查下瀏覽器狀態
好處：
可以覆蓋所有想覆蓋到的瀏覽器
另一種方式：
1.將常用瀏覽器內核放進一個或多個相互有關聯的進程內
2.用例通過系統消息發送到各個包裝的內核中
3.每次開啟一個新內核進程運行JS用例
4.用例結果發送給包裝進程
5.包裝進程匯集所有用例結果後post到遠端保存
6.包裝進程連帶內核進程一起退出
優點：
無序人工開啟一次瀏覽器
獨立進程運行，無需排隊
不怕內核異常，異常後包裝進程可以直接恢復內核或者通知測試失敗
缺點：
前端實現太困難，需要C++開發
無法覆蓋到所有瀏覽器
常用內核覆蓋更新勞心勞力
3. 這些自動化的工具，讓Web前端開發工作更輕松
Web前端自動化工具之一：LiveReload
LiveReload技術+兩塊顯示屏可以幫你省去重復刷新瀏覽器這一枯燥的工作。目前實現LiveReload的方式很多，如果你傾向於圖形化的桌面應用，可以嘗試一下。這款應用同時有Mac版和Windows版，使用起來也很簡單，設置好需要監聽文件所在的文件夾，然後將一段腳本插入到HTML頁面即可。
Web前端自動化工具之二：Webpack
現在做前端開發，通常還會涉及到預處理器，雖然技術的多樣化給我們帶來了更多選擇，但要這些技術產生的代碼在瀏覽器中獲得一致的表現，還得將其轉化為瀏覽器支持的類型。Webpack是一款模塊載入兼打包工具，豐富的插件讓這款工具非常實用。雖然現在Grunt 和Gulp作為兩款前端自動化工具非常流行，但其實Webpack結合Npm腳本在大多數場合就已經足夠了。
Web前端自動化工具之三：WeFlow
WeFlow 是最近騰訊團隊推出的一款前端開發工作流工具。WeFlow一個高效、強大、跨平台的前端開發工作流工具，具體的說就是一個GUI的前端工具，可以為用戶提供一套標准化、規范化的工作流程，從而讓大家在交接協作的時候更為高效有序。
Web前端自動化工具之四：CodeKit
除了免費的工具，還有一款付費工具值得一提。CodeKit是Mac下老牌的前端開發輔助工具，目前價格32美刀。雖然不便宜，但功能強大，號稱可以編譯目前所有的前端腳本，支持瀏覽器自動刷新，內置Bower，第三方包的安裝只需要一次點擊即可完成。圖形化的界面操作起來也很方便，不差錢的同學可以考慮。
以上就是小編為大家介紹的目前常用的Web前端自動化工具。前端作為互聯網產品研發的重要環節，工作量勢必會越來越繁重，所以能合理的運營一些自動化的工具，不僅僅可以提高自己的工作效率。同時也可以讓前端開發工作變得更加簡單。
4. 前端該怎樣實現自動化測試
首先，還是要強調一點：
前端是一種特殊的GUI軟體
看過我最近一年內做前端工程方面相關分享的人可能有印象，我總是在強調這一點。前端測試也跟這個理論基礎有所關聯。
在這里，我還想吐槽一下：
API測試方法論在測試GUI時並不能解決所有問題。
與很多前端工程師討論過前端測試，大家更多的還是盯著API測試方法論。誠然，前端有那麼一小部分代碼是可以用API測試保證質量的，但前端項目中的絕大多數代碼是GUI界面，前端測試應該向傳統GUI測試方法論需求解決方案：GUI軟體測試_網路 ，這個網路詞條介紹的很不錯，大家可以感受一下GUI測試相關概念和方法。它的測試用例、覆蓋率統計、測試方法等等都與API測試有著很大的不同。
5. 前端自動化部署伺服器, 告別繁瑣部署過程
簡單實用的前端部署, 一條命令搞定, 省去繁瑣的步驟!
主要是** nodejs shelljs(命令行命令) node-ssh(連接伺服器)**
項目git 地址
(這個git項目是我自己搭的一個比較low的vue腳手架,集成ts)
(第一次寫文章, 文筆不行, 多多包涵,有不對的地方盡管指出)
(主要看 自動部署 在 upload 目錄 )
npm 或 cnpm i chalk ora shelljs node-ssh inquirer compressing -D
大功告成~~
咳咳, 放心, 不會有公眾號啥廣告, 也不會求打賞, 如果您覺得對您有一點點幫助 點個贊或者去GitHub點個star 那就非常感謝了
項目git 地址
6. Canvas開發的前端頁面自動化實現求助
現在的前端開發已經不再僅僅只是靜態網頁的開發了，日新月異的前端技術已經讓前端代碼的邏輯和交互效果越來越復雜，更加的不易於管理，模塊化開發和預處理框架把項目分成若干個小模塊，增加了最後發布的困難，沒有一個統一的標准，讓前端的項目結構千奇百怪。前端自動化構建在整個項目開發中越來越重要。
我們首先來回想一下之前我們是如何來開始做一個項目的。
① 首先要確定這個項目要使用什麼樣的技術來實現，然後開始規劃我們的項目目錄，接著就要往項目增加第三方庫依賴，比如：
拷貝 CSS庫（Yui Reset | bootstrap）JS庫（Requiet.js | Seajs | jQuery | jQuery插件 ） 進相應目錄（拷貝 N個文件，花費N分鍾）
② 然後，進行編碼
編輯器編碼 => 切換到瀏覽器F5 => 編輯器編碼 => 切換到瀏覽器F5 => 編輯器編碼 => 切換到瀏覽器F5 => 編輯器編碼 => 切換到瀏覽器F5 …………
③ 編碼完成，進行語法檢查，文件合並和壓縮
HTML去掉注析、換行符 - HtmlMin
CSS文件壓縮合並 – CssMinify
JS代碼風格檢查 – JsHint
JS代碼壓縮 – Uglyfy
image壓縮 - imagemin
整個過程都在重復無用繁瑣的工具...
漸漸的，一些自動化構建工具出現了，人們開始使用例如Bower、Gulp、Grunt、node、yeoman等等工具來構建一個本地的開發環境。自動化構建已經成了前端開發的趨勢，所以學好自動化構建也就是為自己的開發打下了良好的基礎。
7. 前端如何提升開發效率
來具體聊一聊提高前端工程師開發效率的那些方法！
當然除了以上5點，對於前端來說需要提高開發效率的地方還有很多，可謂任重而道遠。希望以上幾點能夠給初識前端的同學帶來啟發並能夠親自實踐。
8. 前端UI自動化puppeteer實踐
背景
在表單（web頁面）測試過程中，要經常對表單基本功能進行回歸，曾經考慮過使用webUI自動化工具，減少重復性的操作，但是因為之前用過appium，對UI自動化的體驗不是很好，所以有些糾結，但是，再仔細想一下，有可能存在比較好用又確實能提升效率的工具，也不妨去嘗試一下。
上網查詢了一下，puppeteer具有可以使用錄制腳本的工具puppeteer-recorder、截圖等功能，找了個demo開始試了一下，發現坑較少，安裝方便，使用比較流暢。
puppeteer介紹
Puppeteer 是一個Node庫， 它提供高級API，通過DevTools Protocol 來控制Chrome 或 Chromium。 Puppeteer 默認運行為headless ，但是可以配置為運行為non-headless。詳見文末參考鏈接。
效果展示
目錄結構
cases：用例腳本
config：配置文件，可區分測試、線上環境
screenshot_outputs：輸出的截圖文件
utils：用到的通用方法
測試思路
1、在腳本中寫入測試執行步驟
2、運行腳本
3、查看執行結果（截圖），查看是否符合預期。
這樣操作會使簡單很測試很多。就拿表單人工審核為例，全部人工操作的話，需要填寫並提交表單，登錄表單運營後台，找到對應的目錄及表單，對表單進行審核，再重新打開表單並進行查看，而自動化的話，在寫好腳本（在腳本中可進行介面請求）之後，就可以直接運行腳本，查看結果。
環境搭建
1、安裝puppeteer：npm install puppeteer（前提是安裝了node、npm）
2、安裝chrome插件puppeteer-recorder（可自行網路，比較簡單）
3、npm init，初始化一個項目
腳本編寫
遇到問題
1、puppeteer-recorder只能錄制獲取元素、點擊元素操作，沒有獲取到填寫文本的操作，需要修改或添加已錄制好的腳本
2、有些地方例如截圖前，介面請求結束後，需要使用等待方法。await page.waitFor(3000)
3、使用await進行介面請求，不然會出現同步非同步問題，後面的語句開始執行（但是要用到的參數還沒有獲取到）
參考：
https://zhuanlan.hu.com/p/76237595
https://www.jianshu.com/p/679f07ba474b