认识phantomjs

Posted 2020-09-18 弗朗西斯科

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集成。

 

 相关连接

官网： www.phantomjs.org