Phantomjs初尝试

Phantomjs简介

Phantomjs身为headless的测试工具,何为headless,就是不需要打开真正的浏览器,使用命令行就可以访问网页。Phantomjs本身就是一个webkit内核的测试工具,换句话就是用Phantomjs模拟webkit内核的浏览器打开网页进行测试,对比curl那些模拟测试有其先天的优势,有些网页的dom节点是通过js进行渲染的,对于curl等的话无法捕捉这部分的节点,但是使用Phantomjs的话可以很轻松办到。Phantomjs对于测试截图、模拟操作有很好的用途,甚至,对于爬虫都有很好的实现,但是对于测试的话,还是有点不尽如人意。

测试的分类

测试一般分为UI测试和逻辑单元测试,对于逻辑单元测试的话,更多的是检测函数的功能实现,目前网上有许多断言的测试工具,如mocha都可以进行断言测试,总体来说逻辑单元测试的复杂性不太高,反而是UI测试的复杂性会高点。

Phantomjs在UI测试上的作用

UI测试,有很大一部分是测试UI的交互等,Phantomjs在获取网页后,可以在内部使用dom交互的模拟操作,并且有一定的监听机制,这些都有利于进行UI的交互测试。另外一方面,有人会进行UI的像素级别的测试,换句话说,就是测试页面在修改前后像素级别上的差异,然后用显眼的符号进行标注,更多的可以参考PhantomCSS。

Phantomjs的劣势

虽然Phantomjs是webkit内核,但这种内核与实际的chrome浏览器的webkit还是有点差异,所以在某些实现上,与实际浏览器所看到的还是有点差别。另一方面,由于Phantomjs是webkit内核,所以无法进行浏览器兼容性测试,下面会讲在这方面的尝试。

Phantomjs在浏览器兼容测试的尝试

Phantomjs在创建的page中是可以设置userAgent的,所以笔者大胆假设它是可以绕过webkit内核使用其他内核,如FF的Gecko的内核进行伪装成FF进行浏览器的访问。

首先创建测试示例,在页面中加入一个div,然后div的css设置成:

1
2
3
4
width: 300px;
height: 300px;
background-color: red;
-moz-transform : translate(100px,200px);

OK,理论上来说只有FF的浏览器显示才会出现div的位移效果,然后我设置userAgent为FF的内核:

1
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.3; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0';

然后进行测试截图,发现截图中的div并没有像想象中那样出现位移效果,所以Phantomjs是没有办法绕过webkit内核去伪装其他内核浏览器进行浏览器兼容测试。

Phantomjs中userAgent设置的用处

上面说到无法模拟其他内核的浏览器进行兼容性测试,那么userAgent设置有什么作用呢,目前体验来说,笔者觉得一个作用就是可以模拟手机访问页面,对于一些网站,如www.baidu.com,它是会进行访问设备的判断,当发现是移动设备的时候是会自动跳转到m.baidu.com的,所以设置userAgent为IPhone5的时候:

1
page.settings.userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53';

访问百度进行测试截图发现,访问的确实是m.baidu.com,所以设置userAgent可以模拟手机进行访问。