PhantomJS 服务

PhantomJS 服务是指将 PhantomJS 结合 HTTP 服务和子进程进行服务化的处理

首先、启动 HTTP
服务,然后将长时处理器下发的规则进行进一步转化,转化后启动子进程,HTTP
服务会监听子进程的处理结果,并在处理完毕之后返回

执行JS代码

  1. PhantomFlow

报警系统

报警系统我们目前使用的是京东内部自己的统一监控平台
UMP,通过调用平台提供的一些 API 来实现报警邮件与短信通知

测试页面加载速度

Chai 是个支持 BDD / TDD 的库,可用于 node和浏览器,可配合任何 JavaScript
测试框架使用。

页面脚本执行错误监控

页面引入一段监控脚本来收集页面产成 error
事件返回的错误信息,自动上报给后端服务,在系统里面可以汇总所有报错信息,以及对应的客户端浏览器版本、操作系统、IP
地址等

 

Karma
是针对连通浏览器的一个框架无关测试运行器。每一个测试结果对应每个浏览器,它的测试和显示都是通过命令行暴露给开发者的,这样他们就可以看到浏览器测试的通过或失败。

需要监控系统解决的问题

页面通常出现以下问题时需要使用邮件、短信通知相关人员修复问题

  • 状态码返回错误(50x, 40x)无法打开
  • 模块加载失败
  • 页面乱码
  • 数据正确性

触发报警时要有现场快照,以便复现问题

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

PhantomFlow 使用决策树提供 UI
测试方案。针对PhantomJS,CasperJS和PhantomCSS的 NodeJS 包装器——
PhantomFlow
能够流畅地在代码中描述用户流程,同时生成用于可视化的结构化树数据。

前台规则录入

这是一个独立的 Web
系统,系统主要用来收集用户录入的页面信息、页面对应的规则、展示错误信息。通过调用后端页面抓取服务来完成页面检测的任务,系统可以创建三种类型的检测页面:常规监控、高级监控、可用性监控

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();
});

Jasmine 是一个行为驱动的测试开发框架,用于对 JavaScript
代码进行测试。它不依赖其它任何 JavaScript 框架,也不需要
DOM。它的语法简洁、明确,写测试非常容易。

部署

对于系统部署可以分为两大块进行。因为机器资源数量有限,没有将所有部分都单独部署

规则管理系统以及规则队列生成器和持续处理器整合部署在一台机器上,PhantomJS
服务部署在了其他的机器上。进程管理使用了著名的 NPM 模块 —— PM2

PM2 是一个带有负载均衡功能的 NodeJS 应用的进程管理器。可充分利用
CPU,并保证进程稳定存活

PM2 特性:

  • 内建负载均衡(使用 Node cluster 集群模块)
  • 无缝重启类似 nginx reload
  • 具有 Ubuntu 和 CentOS 的开机启动脚本
  • 控制台检测

不过在目前部署任务中,并没有使用内建负载均衡的特性,没用通过集群的方式部署代理。仅使用了后台运行和无缝重启的特性

  1. 屏幕捕捉

QUnit 是个功能强大又易于使用的 JavaScript 单元测试框架。jQuery、jQuery
UI 和 jQuey Mobile 项目都使用这个框架,它能测试普通的 JavaScript 代码。

类消息队列的实现

我们这里通过调用内部的分布式缓存系统生成类消息队列,队列的生成其实可以参考数据结构–队列。最基本的模型就是在缓存中创建一个
KEY ,然后根据队列数据结构的模式进行数据的插入和读取

当然,类消息队列的中间介质可根据你实际的条件来选择,你也可以使用本机内存实现。这可能会导致应用和类消息队列竞争内存

 确保在render之前

英文原文:12 must-have code testing
tools译文:

架构设计

注入JS文件

Mocha 是一个功能丰富的 JavaScript 测试框架,既运行于 Node.js
环境中,也可以运行于浏览器环境中。Mocha
以串行方式运行测试,能做出灵活而准确的报告,也能将测试中未捕捉的异常映射到正确的测试用例。

常规监控

录入一个页面地址,和若干检测规则。注意这里的检测规则,我们把常用的一些检测点抽象成了一条类似测试用例的语句。每条规则用来匹配页面上的一个
DOM 元素,用 DOM
元素的属性来和预期做匹配,如果匹配失败系统就会产生一条错误信息,后续交由报警系统处理

匹配类型 一般有这么几种:长度、文本、HTML、属性

处理器
类似编程语言中的操作符:大于、大于等于、小于、小于等于、等于、正则

这样做的处就是,录入规则的人只要了解一点 DOM
选择器的知识就可以上手操作了,在我们内部通常是交由测试工程师统一完成规则的录入

图片 1

 

每天都会产生新的代码、用户测试工具和框架。下面的列表列出了可以完成各种测试需求的代码工具。你应该调查研究一下,看这些工具是否适用于你的技术栈和技术需求。

如何根据报警定位到具体页面?

用户通过监控管理系统录入规则后,监控系统会根据 UMP
规则针对用户录入的页面生成 UMP 使用的 key。当长时持续处理器发现
PhantomJS 服务返回的结果标示为异常后,就会使用 key 来进行日志记录

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 });
  1. Percy.io

NodeJS

NodeJS 是一个 JavaScript 运行环境,非阻塞 I/O
和异步、事件驱动,这几点对于我们构建基于 DOM 元素的监控是非常重要的

 

  1. PhantomCSS

后端页面抓取服务

由于京东很多页面内容是异步加载的,像首页、单品等系统有许多第三方异步接口调用,使用后端程序抓取到的页面数据是同步的,并不能取到动态的
JavaScript 渲染的内容,所以就必须使用像 PhantomJS 这种能模拟浏览器的工具

常规监控我们使用 PhantomJS
模拟浏览器打开页面进行抓取,然后将监控规则解析成 JavaScript
代码片段执行并收集结果

高级监控我们使用 PhantomJS 打开页面后向页面注入像 jasmine, mocha
等类似的前端 JavaScript
测试框架,然后在页面执行对应的录入测试用例并返回结果

 

  1. Nightwatch

PhantomJS

PhantomJS 是一个基于 webkit 的浏览器引擎,可以使用 JavaScript API
来模拟浏览器的操作。它使用 QtWebKit 作为它的浏览器核心,使用 webkit
来编译解释执行 JavaScript 代码。也就是说任何你可以在 webkit
浏览器里做的事情,它都能做到

它不仅是个隐形的浏览器,提供了诸如 CSS 选择器、支持 Web 标准、DOM
操作、JSON、HTML5、Canvas、SVG 等,同时也提供了处理文件 I/O
的操作等。PhantomJS
的用处可谓非常广泛,诸如网络监测、网页截屏、无浏览器的 Web
测试、页面访问自动化等

为什么不是 Selenium

做自动化测试的同学肯定都知道 Selenium。可以使用 Selenium
将测试用例在浏览器中执行,而且 Selenium
对各种平台和常见浏览器支持比较好,但是 Selenium
上手难度系数略高,而且使用Selenium 需要在服务器端安装浏览器

考虑到监控主要任务在监控不在测试。系统并不需要太多考虑兼容性,而且监控功能相对单一,主要对页面进行功能上的回归测试,所以选择了
PhantomJS

3.网络监控 性能分析

Percy
提供关于视觉变化的迭代及快速反馈,带来了所谓的连续视觉集成。它是通过下面方式实现的:运行测试套件,获取
DOM 快照并上传到 Percy 服务,最终在浏览器中渲染之。

关于作者:keelii

图片 2

It’s not who you are underneath,
it’s what you do that defines you
个人主页 ·
我的文章 ·
5 ·
     

图片 3

可以捕捉的web页面

  1. WebdriverIO

发表评论

电子邮件地址不会被公开。 必填项已用*标注