认识phantomjs

时间：2017-05-16 09:53:07 阅读：176 评论：0 收藏：0 [点我收藏+]

标签：ati 自动化网络 sage work user 修复客户 head

PhantomJS是一款webkit内核的headelsss的浏览器，使用QtWebkit, 支持DOM操作、CSS选择器、JSON、Canvas和SVG，可以模拟浏览器的服务。

安装

mac同学使用 brew install casperjs

可以做什么？

1. Headless的网站集成测试

可以和单元测试框架如Jasmine、Mocha和WebDriver集成

2. 屏幕捕捉

可以捕捉的web页面

3.网络监控性能分析

监控page loading支持输出HAR标准文件，支持使用YSlow和Jenkins进行全自动的性能分析。

4. 爬虫

5. 运行自动化测试QA

phantomjs的生态圈

1. CasperJS：一个开源的导航脚本处理和高级测试工具

2. Mocha-PhantomJS：JavaScript测试框架Mocha的客户端

前端页面监控

前端页面监控：比如，页面第三方系统数据调用失败，模块加载异常、用户白屏、数据不正确。这时候就需要从前端DOM展示的角度来分析。并且出现问题，需要使用邮件、短信通知相关人员修复bug。并且触发报警是要有现场快照，以便复现问题。

UI测试包括网页元素的正确展现，网页交互之后的元素变化等，人工测试很是头疼，并且UI层面的测试用例也不好写。

注入JS文件

var webPage = require(‘webpage‘);
var page = webPage.create();
page.includeJs(‘http://code.jquery.com/jquery-1.10.2.min.js‘, function() {
// 模拟登录
var $testForm = $(‘form#login‘);
$testForm.find(‘input[name="username"]‘).value(‘barret‘);
$testForm.find(‘input[name="password"]‘).value(‘1234‘);
$testForm.submit();
});

执行JS代码

1 var webPage = require(‘webpage‘);
2 var page = webPage.create();
3 page.open(‘http://www.taobao.com‘, function(status) {
4 var title = page.evaluate(function() {
5 return document.title;
6 });
7 console.log(title);
8 phantom.exit();
9 });

测试页面加载速度

var page = require(‘webpage‘).create(),
  system = require(‘system‘),
  t, address;

if (system.args.length === 1) {
  console.log(‘Usage: loadspeed.js <some URL>‘);
  phantom.exit();
}

t = Date.now();
address = system.args[1];
page.open(address, function(status) {
  if (status !== ‘success‘) {
    console.log(‘FAIL to load the address‘);
  } else {
    t = Date.now() - t;
    console.log(‘Loading ‘ + system.args[1]);
    console.log(‘Loading time ‘ + t + ‘ msec‘);
  }
  phantom.exit();
});

phantomjs loadspeed.js http://www.baidu.com


输出 Loading http://www.baidu.com Loading time 3802msc

屏幕截图

var page = require(‘webpage‘).create();
page.open(‘http://github.com/‘, function() {
  page.render(‘github.png‘);
  phantom.exit();
});

设置页面背景颜色

page.evaluate(function() {
  document.body.bgColor = ‘white‘;
});

确保在render之前




无界面的测试

PhantomJS itself is not a test framework, it is only used to launch the tests via a suitable test runner.

例如Mocha Jasmine WebDriver


和CI系统持续集成
例如Jenkins或者TeamCity，Travis CI已经内置了对PhantomJS的支持。

最好的实践
和测试框架CasperJS集成。