一、為什麼要做UI自動化測試
為什麼我們要去做UI自動化測試？下面來看一下UI自動化測試的一個現狀。左邊的測試的一個金字塔模型，可以看到它有三個部分。
第一個部分是最底下的一部分，就是單元測試。中間那部分是我們的一個服務的測試。最上面那一部分是一個UI測試。
在測試金字塔的左邊跟右邊分别有兩個箭頭。一個就是說它的測試效率從底往上，測試的成本是越來越高的。而測試的效率由下往上越來越低。
單元測試的主要的一個特性是它的成本低，收益比較大。而服務測試包括我們的接口測試或者內建測試，投入産出比是比較高的，也是我們平常做的比較多的一個測試方法。而UI測試的成本高，效率比較低。我們為什麼還要去做一個UI的測試。這是因為UI自動化測試是一個最貼近我們的使用者場景，能夠還原我們使用者的場景。
下面講一下UI測試的必要性。我們經常會遇到這幾類的問題。
第一個，頁面為什麼打不開了。
第二個，點了一個按鈕怎麼沒有反應。
第三個，我們平常跟後端進行交流的時候，為什麼這個參數沒有傳而導緻我出現了一些異常。
第四個，這個頁面的樣式怎麼沒有了，它是一個錯亂的布局。
總結起來，第一種是白屏。第二種是操作不可達，它沒有達到我們的一個預期。第三種，我們歸結為送出參數錯誤。第四種情況是錯誤的渲染。
那麼，是不是在每一次我們的變更去釋出的時候都要去驗證所有頁面，去檢查這四種情況。顯然，這樣的話成本就太高了。這個時候我們就需要通過自動化的方式來代替人工，即測試自動化。
二、怎麼做UI自動化測試
我們應該怎麼樣去做UI的一個自動化的測試呢？平常我們手工測試的時候，一般首先會打開一個頁面，測試頁面有沒有白屏，頁面的樣式是否加載正确。
第二類測試方法是我們進行元素的一些操作， 點選、滾動、鍵盤錄入等，測試操作是否執行，操作結果是否符合預期。
自動化測試可以歸為這四種類型
第一個是測試腳本，頁面及元素操作，驗證操作結果是否預期。
第二個是執行腳本，驅動腳本的自動執行。
第三個是用戶端，腳本執行的運作環境， 浏覽器或者移動裝置。
第四個是資源管理，測試腳本、截圖和測試結果報表的管理。
針對這四種類型，我們應該怎麼樣進行一個選型。首先是測試腳本，現在業界有兩種方式。第一種方式是手工編寫腳本，成本高，效率低，但維護成本低。第二種方式是錄制生成腳本，成本低、效率高，但對腳本的了解成本高。我們這邊采用錄制生成腳本的一種形式，所使用的也是我們的開源産品UIRecorder。
第二個是腳本的執行跟排程。我們這邊選擇了Jenkins。
第三個是用戶端的執行機環境，一般有兩種方式。第一種是業界開源的Webdriver。第二種是一個比較久遠的收費的windows下面的一個工具。我們采用的Webdriver，開源、多語言，它最大的特性是可以接入多浏覽器跟多平台。
第四個是測試資源的管理，其實就是我們的一個版本管理的工具。我們這邊采用的是GitLab。
三、F2etest & UIRecorder
下面主要介紹UI自動化測試的一個實踐。我們實踐的工具是F2etest跟UIRecorder。
首先大家看一下UI自動化的實踐過程的流程圖，如下圖所示。這裡主要介紹一下從測試環境到預發環境的時候，我們怎麼樣去做自動化測試，一共有四個步驟。
第一個是我們的測試腳本的生成。我們所采用的是UIRecorder的形式。
第二個是任務排程，我們采用Jenkins。
第三個是執行機環境。我們采用的是F2etest。第四個是測試資源管理，用的是GitLab。
下面介紹UIRecorder是一個什麼樣的工具。它其實就是通過錄制腳本的形式去生成最後要回放的腳本，本質上是一個指令行工具。它主要的特性有三個。
第一個是通過錄制的方式去生成腳本，進而減少我們手工編寫腳本的複雜度。
第二個特性是，它可以進行一個多浏覽器的回放。還有一個特性是說，它可以生成多視圖的一個測試報告。
UIRecorder主要産出了什麼，第一個是測試腳本，第二個是本次所生成的腳本回放的一個測試報告。可以看到，我們剛剛執行的操作，會有多元度的一個報表，我們會對每一個步驟進行截屏。這樣能夠友善我們去排查在測試的過程中所遇到的一些問題。對每一個步驟，也會有對應的生成的腳本，我們可以更好的去定位哪一部分腳本有問題。
下面對F2etest進行簡單的介紹，它主要包含兩個内容。
第一個是浏覽器雲。多浏覽器相容性手動測試，常用于開發過程中測試浏覽器相容性，以及使用者回報的線上問題排查和驗證。
第二個是WebDriver雲。多浏覽器UI自動化測試，通過調用對應浏覽器WebDriver為自動化測試提供多浏覽器執行機環境。它的主要特性有三個。第一，雲環境，提高測試效率。第二，真實多浏覽器環境，還原測試場景。第三，多節點、多使用者，提高資源使用率。
F2etest的原理是怎麼樣的，主要是分為三個比較大的部分。如下圖所示，上面綠色的部分是F2etest Web的界面，也是一個web的應用程式。下面兩個部分是部署在Windows機器上的，一個是浏覽器雲的環境，一個是WebDriver雲的環境。F2etest Web已經達成了一個docker鏡像，這樣的話來減少我們使用者去部署F2etest Web程式的複雜度。然後在浏覽器雲環境下面，我們是有多台windows的機器，每一台windows機器其實都是類似的，隻是它所部署的目标浏覽器可能是不一樣的。最主要是借助于windows伺服器上的Remote APP去做到一個遠端的調用。
而WebDriver雲也是部署了多台windows伺服器，在每一台windows伺服器下面去生成多個節點，每一個節點會有一個WebDriver，也是可以通過一個遠端的形式去調取。再通過WebDriver去調取我們底層的一個IE的環境，Chrome環境，跟Firefox這種環境。
下面我們主要示範一下F2etest手動測試的一個環境。在部署了多個浏覽器環境後，我們現在去剛剛所打開的頁面進行一個手動的測試。我們在IE8上去輸入對應的一個域名，可以看到這個頁面的相容性其實還是會有一些小的問題，比如說圖檔背景，還有下面的時間節點。我們再看一下在IE11上的表現。可以看到，整個界面的布局樣式都沒有進行一個錯亂。這樣在我們的平台上面去部署多個浏覽器，就能夠很快的去觸達我們多浏覽器使用者的一個真實場景。這樣的話就友善我們更容易的去排查線上或者使用者回報的一些問題。
我們再來看一下UIRecorder怎麼樣去調取遠端F2etest的一個自動化測試環境的提供WebDriver的一種形式。我們可以看一下，左邊是我們的一個腳本運作的步驟跟流程，而右邊是我們的一個遠端的環境，我們隻是把它展現出來了。可以看到，首先是我們的Edge浏覽器，腳本驅動執行。我們Edge浏覽器執行，執行完成。然後又會調取我們的一個Firefox的浏覽器，我們可以看一下Firefox上面執行的一個情況是怎麼樣的。我們可以看到本次腳本所執行的在Edge跟Firefox下面一個遠端的自動化測試的一種環境。同時，它同樣會生成多元度的一個報告。
F2etest和UIRecorder的生态是怎麼樣的。首先，F2etest目前已經有大概6年，我們已經服務了6年了。目前可以看到我們的官網，GitHub，還有我們去維護的文檔也是比較完善的。大家有什麼問題，都可以在yuque.com上面去找到。然後UIRecorder也是有對應的一個使用手冊跟實作原理。同時還有F2etest在yuque的專欄，以及UIRecorder在yuque的專欄。
如下圖所示，是F2etest和UIRecorder的一些資料。GitHub有4.8k，文檔閱讀有11.8w，開源群有1375人，内部使用者有11000人，内部BU14個，内部測試平台12個。
下面講一下F2etest 4.0的預覽跟規劃。它在我們内部已經打磨了一年，已經使用了大概有兩個月。預計在下個财年會去進行一個開源的動作。它會有一些新特性，在浏覽器雲會有國際化，代理服務，線上測試。在WebDriver雲會有實時預覽，節點監控，視訊回放。另外，雲錄制和雲回放也有待建設。