利用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，之後如果想通過自動化的方法來實現對瀏覽器的操作也是可以很好的滿足的，可擴展性非常不錯。

利用Docker的Commit功能實現Chrome瀏覽器的緩存快照功能