利用Docker的Commit功能實現Chrome瀏覽器的快取快照功能
利用Docker的Commit功能實現Chrome瀏覽器的快取快照功能
背景/問題
由於前後端功能分離，現在的前端開發大都採用現成的框架來實現比如Angular.js\Vue.js\React等。前端功能越重，在前端儲存的資料就越多，包括配置，使用者資料等等，再加上Cookie和Cache的快取，這些資料一般都有快取的失效性和版本相容性問題。在實際的測試過程中就遇到兩個個真實的案例，第一個是前端上線一個新的版本，使用到了一些新的資料格式，但是沒有考慮到和舊的資料格式的相容，導致一些有快取的使用者無法正常使用，一般這種資料格式不相容的問題都比較嚴重，大部分時候都是基本功能都不能使用，另外一個真實案例就是後端開發在開發新功能時在Session中添加了一個新的欄位，但是沒有考慮到對舊的Session進行相容，導致使用者帶著舊的Session來訪問的時候報錯。這兩個問題都是很基礎的問題，在平常的測試環境大家使用瀏覽器無痕模式測試的時候很難遇到，一般如果遇到了也會當做是偶發的問題去處理，因為測試環境不穩定的情況實在太多。面對這樣的問題要怎麼做呢？
解決思路
有段時間一直在思考，怎麼把瀏覽器快取還有cookies這些資料的快照給儲存下來，下次開啟瀏覽器的時候可以直接使用這些快取和資料開啟瀏覽器，這樣不就可以復原一箇舊的快取和cookies的場景了嗎？這個看似平常的問題，我在Google和百度搜索了好久都沒有搜到好的解決方法，就這樣擱置了一段時間。最近在使用Docker時候接觸到了容器和映象的概念，其中Docker有個Commit功能，我們在執行一個容器，在容器中做了某些操作之後，可以通過commit功能生成一個映象，這個映象就會包含我們當前所有的改動，包括環境配置和歷史記錄等等，這個功能本來的應用場景是在容器遭到黑客攻擊後保留現場用的，但是用在我們現在這種場景也是非常的合適。
解決方法
使用的工具：Docker, VNC Viewer
使用的映象：selenium/standalone-chrome-debug
步驟
第一步：
安裝 Docker 、 VNC Viewer ，拉取映象，詳細步驟不再贅述，可以在百度或者Google搜尋相應教程和軟體。（參考： Docker拉取映象 ）
第二步：
使用selenium/standalone-chrome-debug映象啟動一個容器：(參考： Selenium Docker官方文件 )
docker run -d -p 4444:4444 -p 5900:5900 -e VNC_NO_PASSWORD=1 --name container_name -v /dev/shm:/dev/shm selenium/standalone-chrome-debug
執行這個命令之後就啟動了一個包含Chrome的容器，容器內部已經運行了VNC Server，並將容器的5900埠繫結到宿主機的5900埠，這樣就可以使用VNC Viewer去連線容器並進行操作了。
第三步：
開啟VNC Viewer，輸入“localhost:5900”，回車。
這樣就可以連線到容器內部了。
第四步：
開啟瀏覽器執行想要的操作。開啟瀏覽器方法如下圖：
第五步：
將當前容器狀態Commit到一個新的映象：
docker commit --author "User<email>" --message "提示資訊" container_name selenium/standalone-chrome-debug:image_tag
其中使用者資訊，提示資訊和image_tag都是可以自定義的，container_name為啟動容器時給容器設定的命名。
大功告成啦！
總結
這個解決方法用到了一些Docker的基本操作，並使用了Selenium的一個基礎映象，這個基礎映象中包含了桌面版的Chrome和VNC Server，可以很好的解決我們的問題，而且同時運行了一個Selenium Hub，之後如果想通過自動化的方法來實現對瀏覽器的操作也是可以很好的滿足的，可擴充套件性非常不錯。