序
今天先聊聊如何搭建自動化測試框架，主要會聊聊一些思路上的東西，從一個最簡單的demo到把一個框架該有的組件都搭建好。本文主要以web自動化爲例子，使用的語言是js。
一、什麼是自動化測試框架
在瞭解什麼是自動化測試框架之前，先了解一下什麼叫框架？框架是整個或部分系統的可重用設計，表現爲一組抽象構件及構件實例間交互的方法；另一種定義認爲，框架是可被應用開發者定製的應用骨架。前者是從應用方面，而後者是從目的方面給出的定義。
—百度百科
對於自動化測試框架大致包含以下的內容
自動化測試工具(selenium、puppeteer…)
Runner(Jest…)
日誌(logger)
報告（reportor）
持續集成
二、使用puppeteer開始寫一個最小的demo
2.1 工具選型
目前,對於web端UI自動化比較主流的工具有selenium、webDriver。而在這裏選擇的是Puppeteer，先來了解下puppeteer。
在chrome 59 chrome團隊支持了headless模式，在Headless模式下，用於自動化測試和不需要可視化用戶界面的服務器。例如，你想在一個網頁上運行一些測試，從網頁創建一個PDF，或者只是檢查瀏覽器怎樣遞交URL。
Puppeteer是谷歌官方出品的一個通過DevTools協議控制headless Chrome的Node庫。可以通過Puppeteer的提供的api直接控制Chrome模擬大部分用戶操作來進行UI Test或者作爲爬蟲訪問頁面來收集數據。
Puppeteer 核心功能:
•利用網頁生成PDF、圖片
•爬取SPA應用，並生成預渲染內容（即“SSR” 服務端渲染）
•可以從網站抓取內容
•自動化表單提交、UI測試、鍵盤輸入等
•幫你創建一個最新的自動化測試環境（chrome），可以直接在此運行測試用例
•捕獲站點的時間線，以便追蹤你的網站，幫助分析網站性能問題
Puppeteer是使用node語言進行開發的，在使用中你可以使用async/await異步解決方案，async/await可能是目前爲止最簡單的異步方案了。
很強大是不是，接着我們去學習下puppeteer的接口文檔，接着開始寫我們的demo。
2.2 測試用例
該用例是直接使用puppeteer，先launch一個browser然後newPage,接着開始寫case。如果你想執行可以把then後的內容改成訪問百度界面的。如下圖，
[圖片上傳中...(image.png-17f1b4-1548390079293-0)]
我們來看下整體的框架，如下圖，圖中直接使用Puppeteer。
對於以上的case，假如我要在寫一條case，需要新建一個js文件，然後先launch一個browser然後newPage,接着開始寫case。在這樣的一個過程中我們可以看到我們每次都要launch browser，close browser，當然還有其他的問題比如怎麼快速的執行多個用例等等，那麼該如何解決這個問題呢？這時候考慮引入一個Runner的概念。
三、使用Jest進行lifecycle管理
3.1 瞭解Jest
Jest parallelizes test runs across workers to maximize performance. Console messages are buffered and printed together with test results. Sandboxed test files and automatic global state resets for every test so no two tests conflict with each other.
對於Jest，在併發執行可以保持最高的性能，在沙盒模式下每個測試都有一個乾淨的環境。Jest在做UT、AT有着很成功的應用。接着我們在框架裏面加入lifecycle去管理一些資源。需要去做一些setup、teardown的工作。
3.2 Jest+puppeteer
在這裏抽象了一個environment(下圖左)，去統一管理測試過程中的一些資源，在這裏引入了setup、teardown，聲明全局的browser、page變量。而對於case(下圖右)，使用Jest的case編寫規則去寫，首先是一個describe，類似test suite，在describe可以寫多個it，一條的it代表一條的case，你就可以在一個文件裏寫多條的case。對比下二中的case此時我們不需要在每次執行launch了。
接着看下整體的框架圖，可以看到我們把jest給加入了
對於上面的case我們把對頁面元素的建模跟對應的操作以及測試方法都寫到同個class裏面了。對於這樣的case，如果改動了某個元素需要改動很多個的文件，維護成本很高，這是我們不希望看到的。接下來我們引入了POM.
四、POM
4.1 瞭解POM
POM的全稱是Page Object Model。POM模型要求將一個頁面上所有功能/可重用組件寫到一個class文件中，它存在以下規則
Page Object Model is a design pattern to create Object Repository for web UI elements.
Under this model, for each web page in the application, there should be corresponding page class.
-
This Page class will find the WebElements of that web page and also contains Page methods which perform operations on those WebElements.
![]()
對於三中的代碼很明顯沒有遵循POM，接着我們進行改進。
4.2 採用POM模型編寫代碼
在這裏我抽象出一個pages,把不同界面的建模以及對元素的操作放在一個文件夾下，在case層只有測試方法。
在使用POM的過程中我還做了一件事情，抽象出driver層，對puppeteer的API進行封裝，封裝的意義有兩方面爲了支撐其他的工具比如selenium，統一接口，更好的做兼容性測試，(puppeteer支持的browser類型比較少)；另一方面，對於driver這類的工具在ui
測試工程其實不會用到所有的大概能用上十幾個method，我們可能對它進行封裝讓它更好用，比如可以在click前waitFor這個element出現，這樣做就不需要在寫case的時候每次click前都wait了。
接着我們來看下整體的框架：
對於這樣的框架我們能很好的工作了，接下來需要加的是啥呢？
五、Logger&Report&Assert
loggger、report、assert是框架的必須部分。
logger需要統一的管理打印到console或者某個file，logger可以幫助我們更快的定義問題對於logger可以分爲兩類一個應用本身的log，一個測試代碼的log，根據需要收集；report是在測試結束後把結果展示出來，可以是dashboars可以是htm l，告訴case的整體情況，以及錯誤時候的信息，當然還可以是更詳細信息，比如說每一步的步驟信息等；Assert這裏是採用了Jest自帶了，覺得Jset自帶的expect已經很強大了，當然如果你需要用別的或者封裝也是可以的。我們接着看下代碼(如下圖),對於這些我們去使用是很方便的集成的，易於集成也是衡量一個第三方library的一個重要指標。
對於框架層加了兩個模塊進去。
六、其他工具類
對於框架而言，通常會留有一個Helper，把跟測試相關的工具放在這裏。方便使用與管理。我們看下框架。
七、持續集成
首先，持續集成的目的，就是讓產品可以快速迭代，同時還能保持高質量。它的核心措施是，代碼集成到主幹之前，必須通過自動化測試。只要有一個測試用例失敗，就不能集成。自動化測試作爲在持續集成中的一個重要環節，我們需要在執行UT/IT後接着執行AT，更早 的發現bug。在這裏可以使用docker搭建puppeter的運行環境，在jenkins上通過pipeline在docker中執行測試。
八、總結
以上就是本文的主要內容，希望看完這篇文章大家可以思考一些問題，對於這樣的設計有何優化建議？在編寫測試中可能會遇到哪些問題？我來說下，如何支持多個browser？測試太慢如何通過緩存提供web 元素的加載？面對這些該如何解決呢？
最後的最後，該框架的源碼在github上，https://github.com/summergan/EndToEnd
目前只有文章中的demo，後續有時間會繼續更新。