前端周MARK（2016-05-23～ 2016-05-29）

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来安装