2016-05-25 天氣晴朗 有點熱

答辯、畢業游，請了一周的時間搞定了學校的一些事情，答辯順利通過，畢業游去了海南三亞，獲得了一身新皮膚回來。即將與大學四年的同學和朋友們分離，感觸良多。。。
剛剛趕回深圳， 繼續自己的日志！

width 屬性的新特性

張鑫旭又發表的了css3的新特性，看了下時間，剛好是我回學校發布的文章，講的是css給width定義了幾個關鍵字成員：

• fill-available
• max-content
• min-content
• fit-content

兼容性 Can I Use
目前還是需要私有前綴

<code>
.min-content {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
</code>

移動設備支持上良好

** css2 特性 **
1. 充分利用可用空間例如，一些div
元素默認寬度100%父元素，這種充分利用可用空間的行為就稱為“fill-available
”。
2. 收縮與包裹典型代表就是浮動，絕對定位以及inline-block
，英文稱為“shrink-to-fit”，直譯為“收縮到合適”，這種直譯往往都是不準確的，這種行為表現確實很難描述，有些只可意會不能言傳的感覺，而我自己一直以“包裹性”作為理解。在CSS3中有個專有的關鍵名稱，fit-content
.
3. 收縮到最小這個基本上就出現在table-layout
為auto
的表格中，想必有經驗的小伙伴一定見過下面這樣一柱擎天的盛況的吧！

** 屬性解釋 **

• fill-available
  元素兼具了塊狀元素的自動填充特性以及內聯元素的定位對齊等特性。于是，（例如）我們就可以直接使用line-height， 讓一個塊狀表現的元素垂直居中。

• max-content
  就是讓父容器的寬度采用子元素中最大寬度的那個值，這里有個小問題，對于設置了max-content的容器，如果子元素中有文本，文本會像被設置了white-space:nowrap一樣排成一行，從而影響了容器所需要的寬度

• min-content
  這個則是讓容器擁有子元素中最下寬度下的最大值，就是盡量小。

• fit-content
  可以實現元素收縮效果的同時，保持原本的block水平狀態，于是，就可以直接使用margin:auto
  實現元素向內自適應同時的居中效果了。

如何進行前端自動化測試

前端的自動化測試一直是一個難點，因為前端并不是純粹的api測試，80%是界面GUI測試，GUI測試一直是測試的難點，因為界面很難去定義規則，有可視化的界面、用戶的交互狀態、切換頁面等方面，就算可以定義出一套規則，由于界面UI等的迭代速度快，導致后期的維護測試方案的成本很高，這兩個問題使得GUI測試很難有進展和突破。

文章給出了幾個目前的實踐方案：

• 純人工的多設備共享界面，以測試不同平臺、設備上的GUI情況
• 利用像素、DOM diff來檢測版本間界面的不同點，進行對比，不過這不是真正的測試方案，而是一個輔助工具

關鍵詞：

• GUI軟件測試

• phantomjs
  phantomjs是一個基于 WebKit 的服務器端 JavaScript API。它全面支持web而不需瀏覽器支持，其快速，原生支持各種Web標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于 頁面自動化 ， 網絡監測 ， 網頁截屏 ，以及 無界面測試 等
  英文釋義：PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast andnative support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG

• fouber/page-monitor · GitHub
  page-monitor，利用phantomjs來獲取網頁的截圖并計算出DOM樹的不同之處，

• fouber/pmui
  pmui則是一個可視化的page-monitor

** 實踐 **
下午寫了個demo實踐了下pmui，有詳細的教程就不多說，記下幾個坑：

• windows下是不用使用npm install的phantomjs的，必須手動下載，然后設置環境變量，再到page-monitor的index.js中設置binPath = '***\bin\phantomjs';
• 作者提到了使用forever來維護進程，不知道是不是window的問題，forever app.js 和google.com.js后，就像邁炫一樣根本停不下來，一直截圖，forever stop都阻止不了

** 總結 **
了解了phantomjs這個服務端的無瀏覽器的javascript API，實踐了pmui、page-monitor來做界面監測

前端GUI測試可以使用pmui來做自動化界面截圖檢測，但意義其實并不大，最后還是要靠人工檢測，pmui只是個輔助工具；pmui的算法檢測也不是完美的，有一定的漏洞，例如隨機的id無法匹配的問題，而且pmui好久沒人維護了；

** 拓展閱讀 **

• 如何進行前端自動化測試
  知乎上的討論
• jasmine
  另一個前端測試框架，感覺和mocha一樣

個人博客

個人博客終于搭建好了，其實早兩個星期就搭建好了，因為域名備案的問題，目前還無法使用

2016-05-26 天氣晴朗 周四

生命，在于不斷地脫離舒適的區域，去迎接新的挑戰！！！

關于npm --save 和--save-dev的區別，

對于開發過程的集成測試功能所需要依賴的模塊，使用save-dev來安裝，產品功能的則使用save來安裝