Ⅰ web前端的自動化測試工具都有哪些啊
工具太多了，推薦幾個
Selenium
HP QuickTest Professional
WATIR
WATIN
還有其他的供選
Rational robot
SilkTest
TestComplete
TestPartner
Ⅱ 如何進行前端自動化測試
一般前端自動化測試大致包括
類庫單元測試自動化
UI組件測試自動化
類庫單元測試自動化
較好實現
基本思路是讓不同的瀏覽器可以自動根據指令跑一些JS函數
結果與預期比對後返回是否通過case測試標志
其中一般有兩種實現方式：
其一：
打開目標瀏覽器，運行測試框架站點
2.測試框架站點通過ajax 輪詢、websocket 等方式，將待測 js 的 case 在瀏覽器內運行（通過eval 、createElement("script") 等方式）
3.比對測試結果，將結果 post 到遠端
4.遠端接受測試結果
5.遠端等待所有瀏覽器返回結果完成
6.marge 所有瀏覽器數據顯示最終通過與否結果。
這種方式弊端：
人工開啟一次所有瀏覽器
需要排隊測試，瀏覽器只能一次運行完一組測試後才能再運行下一組
如果中間某testcase導致瀏覽器異常，返回結果將缺失，需要人工去伺服器上檢查下瀏覽器狀態
好處：
可以覆蓋所有想覆蓋到的瀏覽器
另一種方式：
將常用瀏覽器內核放進一個或多個相互有關聯的進程內
2.用例通過系統消息發送到各個包裝的內核中
3.每次開啟一個新內核進程運行JS用例
4.用例結果發送給包裝進程
5.包裝進程匯集所有用例結果後post到遠端保存
6.包裝進程連帶內核進程一起退出
優點：
無序人工開啟一次瀏覽器
獨立進程運行，無需排隊
不怕內核異常，異常後包裝進程可以直接恢復內核或者通知測試失敗
缺點：
前端實現太困難，需要C++開發
無法覆蓋到所有瀏覽器
常用內核覆蓋更新勞心勞力
Ⅲ 這些自動化的工具，讓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前端自動化工具。前端作為互聯網產品研發的重要環節，工作量勢必會越來越繁重，所以能合理的運營一些自動化的工具，不僅僅可以提高自己的工作效率。同時也可以讓前端開發工作變得更加簡單。
Ⅳ 如何進行前端自動化測試
沒人邀請，路過回答。
前端測試是前端工程方面的重要分支，有過一些探索，這里簡單分享一下。
首先，還是要強調一點：
前端是一種特殊的GUI軟體
看過我最近一年內做前端工程方面相關分享的人可能有印象，我總是在強調這一點。前端測試也跟這個理論基礎有所關聯。
在這里，我還想吐槽一下：
API測試方法論在測試GUI時並不能解決所有問題。
與很多前端工程師討論過前端測試，大家更多的還是盯著API測試方法論。誠然，前端有那麼一小部分代碼是可以用API測試保證質量的，但前端項目中的絕大多數代碼是GUI界面，前端測試應該向傳統GUI測試方法論需求解決方案：GUI軟體測試_網路 ，這個網路詞條介紹的很不錯，大家可以感受一下GUI測試相關概念和方法。它的測試用例、覆蓋率統計、測試方法等等都與API測試有著很大的不同。
統一了這個認知之後，我們來討論一下前端GUI測試的特殊性。根據網路詞條上的那些介紹，相信大家都能感覺到GUI測試的成本非常高，而前端這種特殊的GUI軟體，具有天生的快速迭代特徵，這使得case維護成本也變得非常高，經常跟不上迭代速度。
一
個標準的互聯網應用產品的前端部分，我粗略估計大概有20%的業務基礎代碼比較穩定，比如通用組件、通用演算法和數據模塊等，可以針對這些建立復雜一些的
API和GUI測試用例來保證質量。剩下80%的部分不是很穩定，每天都在迭代，針對他們維護case的成本非常高。目前業界中號稱做了自動化測試的項
目，也大多是在做那穩定的20%。
關於穩定部分的單元測試方法我這里就不贅述了， @貘吃饃香 的答案給出了很多關鍵字，有興趣的去搜索就好了。我想討論的是針對剩下80%不穩定部分的工程化測試方案。據我了解，前端測試面對這些問題還是很無力的，業內大部分團隊還是靠堆人解決。
面對這種現狀，我其實也沒想到過什麼好的方法，基本原則就是：以最低的成本建立和維護自動化測試用例。到目前為止，就想到過兩個方案（都不是測試方案，只是回歸測試輔助）：
1. 不太靠譜的「超級工位」大法。
這個方案可以說根本不是什麼技術方案，而是一個辦公設施，就是我們准備一個工位，擺上所有我們需要測試的主流設備，然後設備通過某種方式與一台電腦相連接，測試人員坐在工位上，在電腦中輸入某個url，就能同步到所有設備中，然後開始逐個的人肉測試。
超級工位大法示意圖（應該很多設備的，這里就是隨便展示一下而已。。。）超級工位大法示意圖（應該很多設備的，這里就是隨便展示一下而已。。。）
相比現在的前端GUI測試，超級工位已經算是從0到1的飛躍了，雖然沒解決什麼技術問題，但為測試前的准備工作做好了鋪墊。如果把前端測試比作吃屎，超級工位就是為這餐准備了一個好一點的餐桌。。。
2. 靠譜一些的「頁面差異監控」
12
年的時候還在網路，當時有同事去美國參加velocity，twitter分享了一下他們的開發流程，其中有一個環節就是頁面對比監控，利用了一個叫
pdiff的工具，每次提交代碼，會自動對比頁面之間的差異然後提醒測試人員注意回歸。這也是一個典型的GUI測試零成本維護用例的案例。不過pdiff
這個工具是基於像素對比的，誤報率比較高，所以去年我做了一個這個項目：fouber/page-monitor · GitHub 基於DOM樹的diff，這樣就能很大程度上自主控制要監控的元素，可以設置監控樣式、文本的變化，比起像素diff智能了一些。
其
工作原理就是利用phantom或其他headless瀏覽器訪問頁面，然後截圖，然後執行一段js，遍歷整個dom樹，獲取元素計算樣式和元素內文本內
容，構造出一個JSON結構，然後每次diff這個json來判斷頁面差異，並標記在截圖上展示。dom樹的diff過程有點類似react的虛擬dom
樹diff。
（react的dom樹diff演算法示意圖）（react的dom樹diff演算法示意圖）
（react的dom樹diff演算法示意圖）（react的dom樹diff演算法示意圖）
DOM樹diff我們可以分辨出元素樣式修改/內容修改/新增元素/刪除元素四種不同的頁面差異，我們可以配置選擇器來忽略元素。四種頁面差異的效果圖：
新增元素（綠色區域標記部分，「i am new here」）新增元素（綠色區域標記部分，「i am new here」）
刪除元素（灰色區域標記部分，「你好」）刪除元素（灰色區域標記部分，「你好」）
內容修改（黃色區域標記部分，「百-度」，「新-浪」）內容修改（黃色區域標記部分，「百-度」，「新-浪」）
樣式修改（紅色區域標記的部分）樣式修改（紅色區域標記的部分）
基於這樣的頁面差異對比監控，我們可以建立一個任務系統，把應用的所有頁面url監控起來，這樣每次版本迭代提交代碼後，系統就能自動告訴我們，哪些頁面的元素展現發生了改變，用於確定回歸范圍。
用監控的方式確定測試回歸范圍，是一種「少吃屎」的手段，符合工程化要求，能比較大范圍的應用，雖然不能完美解決GUI中的交互問題，但能保證GUI的展現問題已經是不小的進步了。