因为要找的一个前端的 Browser Testing 解决方案,看下来 PhantomJS 是比较合适的,但是前端做 Browser Testing 确实比较麻烦,登录态、Seed、数据伪造等等
PhantomJS 的安装:
npm -g install phantomjs-prebuilt
实现一个拖拽效果的测试用例,代码如下(省略了为实现登录,异常复杂的代码):
var page = require('webpage').create();
page.viewportSize = { width: 1440, height: 1080 };
page.open('http://www.darwin.com/teach/course/1', function () {
setTimeout(function () {
page.sendEvent("mousedown", 180, 180);
page.sendEvent("mousemove", 180, 240);
page.sendEvent("mouseup", 180, 240);
page.render('finish.png');
phantom.exit();
}, 2000);
});
PhantomJS 支持的函数:
page.childFramesCount
page.childFramesName
page.close
page.currentFrameName
page.deleteLater
page.destroyed
page.evaluate
page.initialized
page.injectJs
page.javaScriptAlertSent
page.javaScriptConsoleMessageSent
page.loadFinished
page.loadStarted
page.openUrl
page.release
page.render
page.resourceError
page.resourceReceived
page.resourceRequested
page.uploadFile
page.sendEvent
page.setContent
page.switchToChildFrame
page.switchToMainFrame
page.switchToParentFrame
page.addCookie
page.deleteCookie
page.clearCookies
PhantomJS 认为自己并不是一个测试框架,只是为其他的测试框架提供支持而已,在官网有罗列其支持的测试框架:
PhantomJS itself is not a test framework, it is only used to launch the tests via a suitable test runner.
The following table summarizes the list of various test frameworks and the corresponding test runners. If the framework does not need an external/third-party runner, it is marked as “built-in”.
目前 PhantomJS 还不能很好的支持 ES6,但是 2.5 Beta 版本是可以支持的,目前团队正在为这个目标努力:
https://github.com/Medium/phantomjs/issues/668
下载 2.5 Beta 以后还需要一些额外的操作,后续版本应该会 fix 这些问题:
brew install webp
cd /usr/local/opt/webp/lib
cp libwebp.{7,6}.dylib
勉强可以用,但是因为 PhantomJS 的定位非常底层,真的要一个一个写测试用例,还需要自己来设计代码结构,实际上会异常的复杂,看来 Karma 这样的 Runner 真的是必不可少的