在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路

作为一个标准的绝顶的懒人,我想做一个测试工具,可以同时把所有浏览器的测试结果都显示在一个浏览器窗口里,并且列成清晰的表格,便于比较.

这一定会是一个可爱的工具,节省时间不说,而且可以清晰的记录和比较数据.下面说一下我的思路.(之后我将使用这个工具测试一个js的兼容性问题,敬请关注)

本工具已经制作完成,但是不具通用性,需要和后台配合使用,需要和数据库交互,而且后台交互的性能不太好,普通的电脑无法承受(我的3GHZ的cpu,2G内存都不能直接打开多个浏览器窗口,可能是我数据库的操作过于频繁).虽然放在公共服务器上速度可以接受,但是不能拿出来给大家测试,因为多个人运行,再好的服务器也受不了.

工具是js+php+mysql制作的,并不是有的人想象的把多个浏览器引擎整合到一个软件里,我可没那水平.

使用的时候,只需要在js里写好测试数据和测试方法,传到一个测试实例里,然后在所有浏览器里打开一次这个窗口,js会统计数据,然后把数据存储到后台,之后js通过ajax获取所有的数据,将其解析成表格显示在网页中.最后结果是如果你的电脑够强,所有的浏览器里的网页都会显示一个列表,里面有所有浏览器的测试数据,如下:

之后就可以比较结果了.是不是很方便呢
原理:
首先将此功能抽象成一个组件,组件接受三个参数,一个是输入对象组,二是测试方法,三是组件配置参数.
在之后的组件初始化阶段,组件将遍历输入对象组中的所有对象,将对象传给测试方法,测试方法返回一个测试数据,组件将测试结果记录在一个对象中.


代码如下:

/**
* 这是一个测试对象在不同浏览器中属性的对象,可以同时在任何浏览器中测试,需要和后台脚本交互
* 请设置好输入数据和输出数据后,在要测试的浏览器中打开页面,结果将附加到列表中.
*
* @param {array} testObject 待测试的对象列表,每个对象都必须有一个唯一的标示做主键,而且有一个描述,
* testObject的格式如下{"in1":{obj:**,des:"dd"},"in2":{obj:**,des:"dd"}}
* @param {function} testMethod 测试的方法,程序会向此方法传入两个参数,一个是对象索引一个是对象.同时在此方法里可以用this引用test实例,此方法必须返回一个字符串,表示执行结果
* @param {json} config 配置参数
*/
(function(){
var CrossBrowserTest=function(testObjects,testMethod,config){

这个组件对对象参数格式和组件内的数据存储器的格式,以及向后台发送字符串的格式,后台返回数据的格式有着严格规定:
其中:testObject的格式如下{"in1":{obj:**,des:"dd"},"in2":{obj:**,des:"dd"}}
组件内的数据存储器的格式如下(this.data):{“in1”:{des:”描述",data{“ie6”:{outDes:"ie6里的输出结果"},”ie7”:{outDes:"ie7里的输出结果"}}},"in2”:…}
在发送数据的时候,用一个函数将json转换成字符串格式,这个函数如下:


代码如下:

function obj2str(o){
var r = [];
if(typeof o =="string") return "\""+o+"\"";
if(typeof o == "object"){
if(!o.sort){
r[0]="{"
for(var i in o){
r[r.length]="\""+i+"\"";
r[r.length]=":";
r[r.length]=obj2str(o[i]);
r[r.length]=",";
}
r[r.length-1]="}"
}else{
r[0]="["
for(var i =0;i<o.length;i++){
r[r.length]=obj2str(o[i]);
r[r.length]=",";
}
r[r.length-1]="]"
}
return r.join("");
}
return o.toString();
}

在后台,php会把这个json字符串通过json_decode函数转换成一个php的数组,之后存到数据库里.
而从数据库里取数据的时候,php从数据库里取出数据,转换成数组格式,然后用json_encode函数转换成json字符串,传到前台,前台用eval执行得到数据.
在后台,对json数据进行了分解,分解成了一条条的数据,然后存到了数据库里,这里数据库读取频繁,造成性能下降.
数据库有6个字段,分别为:主键,对象主键(区分不同的对象),浏览器类型(相同的对象里有不同浏览器的测试结果),对象的描述,测试的结果,时间.
浏览器的类型测试使用了下述的方法:


代码如下:

M.getBrowser=function(){
return {
//此函数判断浏览器类型,为了简便,返回一个数字表示,
//1.ie6;2.ie7; 3.ie8;4,Firefox;5.chrome;6.Opera;7.Safari;0.无法检测的浏览器
//其他浏览器可以自行添加
whichOS:function(){
var useragent=navigator.userAgent.toLowerCase();
return (/MSIE 6/i.test(useragent)==true&&1)||
(/MSIE 7/i.test(useragent)==true&&2)||(/MSIE 8/i.test(useragent)==true&&3)||
(/Firefox/i.test(useragent)==true&&4)||
(/Chrome/i.test(useragent)==true&&5)||
(/Opera/i.test(useragent)==true&&6)||
(/Safari/i.test(useragent)==true&&7)||0
},
nowOsString:function(){
var useragent=navigator.userAgent.toLowerCase();
return (/MSIE 6/i.test(useragent)==true&&"ie6")||
(/MSIE 7/i.test(useragent)==true&&"ie7")||(/MSIE 8/i.test(useragent)==true&&"ie8")||
(/Firefox/i.test(useragent)==true&&"Firefox")||
(/Chrome/i.test(useragent)==true&&"Chrome")||
(/Opera/i.test(useragent)==true&&"Opera")||
(/Safari/i.test(useragent)==true&&"Safari")||"sorry,我不认识你的浏览器!"
}
}
}()

数据是用对象主键和浏览器类型共同区分的(可以获取唯一的数据)
对象初始化完成后,就开始处理数据了,首先在本浏览器里执行一次测试,将测试数据放入一个临时对象里,然后将这个临时对象通过ajax发送到后台,后台把这条数据存到数据库(如果已经存在就不存储了)
然后设置一个定时器,定时到后台取数据,这个取到的数据是后台数据库里存储的,可能包括了多个的浏览器的数据,取到数据后,启动dom构建函数,和渲染函数,更新网页的内容.
基本原理就是这样,这样说真是抽象的很,但是很抱歉,这个东西没法拿出来跟大家分享,不是我不想分享,是实在是有困难.不过如果你感兴趣可以下载源代码,将源代码里的sql导入到一个mysql表里,然后在php文件里配置下,修改下,我这个封装的不是很好,因为考虑到这个东西的重用性也不用太好了.没时间搞别的了.
测试代码打包下载

(0)

相关推荐

  • Web 开发常用工具 大家自己查找下载

    1.regex-coach --正则表达式工具 2. IECookiesView--IE的cookie查看工具 3.Flex Trace Panel --Flex开发日志观察工具 4.IE Development Toolbar --微软提供的IE开发插件 5.sIEve--javascript内存泄漏检测工具 6.HttpAnalyzer--HTTP抓包工具

  • 高性能WEB开发 web性能测试工具推荐

    Firebug:    Firebug 是firefox中最为经典的开发工具,可以监控请求头,响应头,显示资源加载瀑布图: HttpWatch :   httpwatch 功能类似firebug,可以监控请求头,响应头,显示资源加载瀑布图.但是httpwatch还能显示GZIP压缩信息,DNS查询,TCP链接信息,个人在监控http请求比较喜欢使用httpwatch, httpwatch包含IE和firefox插件.不过httpwatch专业版本是收费的,免费版本有些功能限制. DynaTrac

  • JavaScript 开发工具webstrom使用指南

    看到网上一篇介绍webstrom的文章,觉得功能确实强大,也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件,(传说淘宝内部推荐写js用webstrom) 我们可以理解 IDE 就是集成了很多你想要的功能,或者你不想要的功能.换句话说就是装了很多插件的 editor ,所以到目前为止,我还觉得没必要给它装什么插件. 那么接下来开始介绍webstrom的特色功能: WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具 任何一个编辑

  • WEB前端设计师常用工具集锦

    下面是我整理和收集的一些前端开发常用的 插件.工具.软件等不为别的,相当于给电脑做个小备份,至于使用方法,以后我会总结,目前的话还是自行google吧. [FireFox插件] 1.  Firefbug     --    页面调式工具 2.  YSlow     --    网页评级工具 3.  pixel Perfect      --    HTML与设计稿对比 4.  CSS Usage     --    CSS使用效率优化工具 5.  Page Speed     --    快速优

  • web前端设计师们常用的jQuery特效插件汇总

    1.jQuery鼠标悬停文字渐隐渐现动画效果 这是一款基于JQuery实现的鼠标悬停文字渐隐渐现动画效果源码,是一款鼠标悬停后图片渐渐有一层透明遮罩层,同时说明文字从左侧滑入,鼠标离开后文字从右侧滑出,整体效果美观自然,用户体验较好.是一款比较优秀的特效源码.该源码兼容目前最新的各类主流浏览器. 在线演示 源码下载 2.jquery基于small2big实现的图片突出显示特效 这是一款基于Jquery的small2big插件实现的图片突出显示特效源码,鼠标滑过图片可实现图片的放大突出显示效果,有

  • 在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路

    作为一个标准的绝顶的懒人,我想做一个测试工具,可以同时把所有浏览器的测试结果都显示在一个浏览器窗口里,并且列成清晰的表格,便于比较. 这一定会是一个可爱的工具,节省时间不说,而且可以清晰的记录和比较数据.下面说一下我的思路.(之后我将使用这个工具测试一个js的兼容性问题,敬请关注) 本工具已经制作完成,但是不具通用性,需要和后台配合使用,需要和数据库交互,而且后台交互的性能不太好,普通的电脑无法承受(我的3GHZ的cpu,2G内存都不能直接打开多个浏览器窗口,可能是我数据库的操作过于频繁).虽然

  • 解决Vue2.0自带浏览器里无法打开的原因(兼容处理)

    本文介绍了解决Vue2.0自带浏览器里无法打开的原因(兼容处理),分享给大家,希望对大家有帮助 Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1.先保证 是否安装了chrome浏览器 2.其次 ,保证 chrome 是否 已经翻墙成功! 3.最后 使用Android 真机连接 电脑 4.最后的最后,打开chrome ,输入:chrom

  • Docker 实现浏览器里开发Android应用的功能

    在浏览器里开发Android应用          这里需要用到Docker的知识, Che 发布后对Android应用开发多了一个工具,这里就对如何实现该功能就行详细介绍: Eclipse Che 最近Che发布了正式版,那我就介绍下在Che上开发Android吧-- 使用Che需要懂得一些Docker的知识,只需要一点点即可,因为Che是基于Docker的,所以了解Docker有助于理解Che的工作方式. 不废话,教程只有四步,开始. 第一步:部署docker服务器 我选择的是digital

  • js关闭浏览器窗口及检查浏览器关闭事件

    js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器. 复制代码 代码如下: <html> <head /> <body> <script type="text/javascript"> function closeWin(){ window.opener=null; window.open('','_self',''); window.close(); } </script> <a o

  • PHP测试框架PHPUnit组织测试操作示例

    本文实例讲述了PHP测试框架PHPUnit组织测试操作.分享给大家供大家参考,具体如下: 首先是目录结构 源文件夹为 src/ 测试文件夹为 tests/ User.php <?php class Errorcode { const NAME_IS_NULL = 0; } class User { public $name; public function __construct($name) { $this->name=$name; } public function Isempty() {

  • 判断所使用的浏览器不仅仅是电脑浏览器代码整理

    判断不仅包括电脑浏览器,还包括安卓.ios系统的手机以及平板电脑,游戏系统 复制代码 代码如下: var client = function(){ //呈现引擎 var engine ={ ie : 0, gecko : 0, webkit : 0, khtml : 0, opera : 0, ver : null }; //浏览器 var browser = { ie : 0, firefox :0, safari : 0, konq :0, opera : 0, chrome : 0, ve

  • js判断当前浏览器类型,判断IE浏览器方法

    最短IE判断方法,原文地址: http://www.jb51.net/article/23621.htm 判断IE浏览器最短方法:var isIE = !-[1,] 原理:[1,]在标准浏览器中返回"1",相当于调用[1,].toString(),在IE中返回"1,"在这个时候对返回值使用负号强制转换为数字时,标准浏览器返回1,IE则返回NaN,再对1和NaN取反时,标准浏览器返回false,IE返回true. js判断浏览器类型 原文基本上没有什么问题,但他的判断

  • js判断手机浏览器操作系统和微信浏览器的方法

    今天就为大家介绍一下用js判断手机客户端平台及系统平台的方法: <script type="text/javascript"> //手机端判断各个平台浏览器及操作系统平台 function checkPlatform(){ if(/android/i.test(navigator.userAgent)){ document.write("This is Android'browser.");//这是Android平台下浏览器 } if(/(iPhonei

  • 使用php检测用户当前使用的浏览器是否为IE浏览器

    复制代码 代码如下: /** * 检测用户当前浏览器 * @return boolean 是否ie浏览器 */ function chk_ie_browser() { $userbrowser = $_SERVER['HTTP_USER_AGENT']; if ( preg_match( '/MSIE/i', $userbrowser ) ) { $usingie = true; } else { $usingie = false; } return $usingie; }

  • vue前端测试开发watch监听data的数据变化

    目录 watch监听data的数据变化 新问题 解决 1. 先把姓名的值,也加到options里 2. 在监听里增加for循环和判断 watch监听data的数据变化 上一篇里提到了用elementUI的select实现了个远程搜索的功能,最终效果是这样的. 但是继续开发的时候,又遇到了一个新的问题,跟上面的功能有关. 先看下远程搜索的操作,与data里的数据关系. 当输入“张”进行搜索,看到的下拉列表里展示的结果都是存放在data的options: []. 当我选择了一个,比如“张三”,因为s

随机推荐