工具介绍51Testing软件测试网0sMD sd$c'~|i
Xvfb: 主要就是通过内存计算模拟出图形界面,没有平常所见的操作界面,分为客户端和服务器51Testing软件测试网B(X4p X g
j
YSlow: 当Firefox浏览网页时,可以分析网站的页面(基于Yahoo 14条评分原则),并指出如何进行优化提高网站性能51Testing软件测试网Cy5iqazF
ShowSlow:收集YSlow的测试结果并显示出来51Testing软件测试网0^0F l d#u
Ubuntu:开源的Linux系统,界面越来越向Windows靠近
m9i)SR0J5g$Y6[6{o:n6k7e0框架简介
N5hSE[LT#b/p0对于前端的童鞋我相信YSlow已经耳熟能详了,基于雅虎的评分规则对页面进行评分的Firefox插件,从中我们可以看出我们页面上的很多不足,并且可以知道我们如何改进和优化,配合将测试报告发送到本地的ShowSlow平台以提供给开发人员随时查看。在Xvfb的辅助下,这个框架最大的优点就是可以在无显示设备的环境下稳定运行!51Testing软件测试网5R%u.v]3Sm
7kB!Y4Qv1O)Io,{0环境配置51Testing软件测试网S2B2C!PH$I)^o
典型的LAMP配置,网上资料很多,当然你也可以点此围观
"Ba0aV*]v^0搭建本地ShowSlow测试平台
d_!Y3` j.C+|y0这个我之前在Windows Server 2003搭建过(点此围观),但是这次在Ubuntu下还是有所区别的(所有命令都在终端输入)
UV/mf)m,i[
H1p0- sudo mkdir /var/www/showslow (建立一个空文件夹)
- sudo svn checkout http://showslow.googlecode.com/svn/trunk/ /var/www/showslow (将ShowSlow的源代码下载到本地,这一步会报错连接不上http://svn.facebook.com,首先要感谢国家,其次要感谢功夫网,最后我要说的是无视…)
- sudo mv config.sample.php config.php (修改文件夹名)
- sudo gedit config.php
- 根据实际情况修改$db,$user,$pass可以根据实际情况修改
- 按照上一步修改的数据创建相应的Mysql数据库
//以root用户权限进入mysql
mysql -uroot -p
//创建一个数据库,名字和第二步你填写的保持一致
create database ‘DBName‘;
//切换到新建的数据库
use ‘DBName’;
// 将ShowSlow文件夹的tables.sql(数据库表)导入到新建的数据库中,注意无分号
source /var/www/showslow/tables.sql
//查看下是否导入成功了,貌似有个表名叫ShowSlow2,汗
show tables;51Testing软件测试网Le
{U*J
自动化脚本
T^!l.xs2N0这个是我们这个框架最重要的部分,具体请参考Sergey Chernyshev的博客以及自动化脚本作者Aaron Kulick ,现在最新的Showslow的子文件夹automation有三个文件——monitor.sh (配置文件) test_harness.pl (自动化脚本) ReadMe(框架说明文件,强烈推荐各位童鞋仔细阅读,因为这关系到后面脚本的修改问题)51Testing软件测试网]^L:[+dON `$c
Xvfb
5|gk;W6jv {f0sudo apt-get install xvfb
8IsZ+h]0Xvfb :1 -screen 0 1152x864x24 +extension RANDR51Testing软件测试网5@Ea-@^-~1B
我在此处发现报错:[dix] Could not init font path element /usr/share/fonts/X11/cyrillic, removing from list!51Testing软件测试网5fX4LK]$^pv
通过Google大神的帮助,解决办法很简单,安装这个需要的字体——sudo apt-get install xfonts-cyrillic
kG;v6s}0
创建一份测试页面列表51Testing软件测试网 vZ)\!}0g*BYo qm`
sudo gedit /var/www/URLs (在Apache下新建一个URLs列表,注意每一个链接为单独的一行)51Testing软件测试网:x:j
tjzR(F
创建一份Firefox测试专用的Profiles51Testing软件测试网*U#oVtlj:Y
/usr/lib/firefox-3.6.3/firefox -profilemanager51Testing软件测试网`&c|uN~d*V
首先我们要修改Firefox的application.ini文件最后一段,避免Firefox崩溃后发送报告
5d0i{w0NK!m1Y0[Crash Reporter]
Enabled=0
其次就是修改测试专用的Profiles的prefs.js,这个很关键,要设置一些Firefox属性才能让测试更好的进行下去,ShowSlow的论坛有推荐配置,(猛击这里)
#B/kG\y:X8J(_(a2c&y0gedit /home/eric/FFProfiles/prefs.js
g#bZ(ZT6M&i?5y0## PREFS.JS RECOMMENDATIONS (AUTOMATION)51Testing软件测试网V+UD o)JUcj
#do not let automated firefox manipulate the profile extensions (auto
3Y[&y+Z?{"|%|1AG0update)
utnz5k
h_0user_pref(“extensions.update.enabled”, false);51Testing软件测试网8{$nXB`e1{I
user_pref(“extensions.update.notifyUser”, false);51Testing软件测试网mz `A T(D1f H
#disable session restore on crash (do not want stale/old tabs)
F*t&l-iX@0user_pref(“browser.sessionstore.resume_from_crash”, false);51Testing软件测试网G3M7wt |H
#do not let javascript. resize the window51Testing软件测试网h@l
ynhX
user_pref(“dom.disable_window_move_resize”, true);
l._:wn5u-Lr0#do not let javascript. manipulate context menus (automation)51Testing软件测试网x,Uh(p f
ZW
user_pref(“pref.advanced.javascript.disable_button.advanced”, false);
.O@4c,tf f T0#do not show me pop-up block messages (screenshot related)
k5Q4HFB/tg0user_pref(“privacy.popups.showBrowserMessage”, false);51Testing软件测试网,hS)J9xU[0V7U:?pV
#do not warn for weak SSL or mixed SSL/HTTP content:51Testing软件测试网C*WEJ5G/_ qD
uf)S S
user_pref(“security.warn_entering_weak”, false);
*T1wn"t%S9ScC0user_pref(“security.warn_viewing_mixed”, false);51Testing软件测试网O8g3IQ"At
#firebug prefs
j#H\/t gOLn0user_pref(“extensions.firebug.allPagesActivation”, “on”);
`
\w$RmY0user_pref(“extensions.firebug.net.enableSites”, true);51Testing软件测试网L/g%u7wk n(m`
dV
user_pref(“extensions.firebug.defaultPanelName”, “YSlow”);51Testing软件测试网Q^z]n
user_pref(“extensions.firebug.previousPlacement”, 1);51Testing软件测试网1Z%I8a;}EAY
#yslow prefs51Testing软件测试网7lD3U(P
L-[*k
user_pref(“extensions.yslow.autorun”, true);
blXQOp#Qzyy0user_pref(“extensions.yslow.beaconInfo”, “grade”);51Testing软件测试网w!j2N|(f
K
user_pref(“extensions.yslow.beaconUrl”, “http://localhost/showslow/beacon/yslow/“);
E st6so1kS0user_pref(“extensions.yslow.optinBeacon”, true);51Testing软件测试网#RLEE)]:m"M?-w`
配置本地YSlow51Testing软件测试网t0TB#Y9y2U.f
- 打开Firefox输入:about:config(我保证会很小心的)
- filter中输入:yslow
- 修改以下三条数据
extensions.yslow.beaconUrl = http://localhost/showslow/beacon/yslow/51Testing软件测试网V-L+aWl-O7}
如果测试和服务器不在同一机器上,请将localhost改成实际地址
"a?sdZ{0V0extensions.yslow.beaconInfo = grade
7V%})@*_i+r+WM0extensions.yslow.optinBeacon = true51Testing软件测试网/rP0g^Rl%C \-H
- 重启Firefox,have fun :)
还等什么?开始你的测试之旅吧,查看测试报告的URL是:http://localhost/showslow/51Testing软件测试网+^u!EC
oh_
w2zV
在这个地方遇到了一个问题就是所有配置都是正确的情况下,ShowSlow依然接收不到YSlow发送的测试数据,后来在RedHat的服务器上搭建环境同样遇到了这个问题,经过SA白非童鞋的帮助查看Apache的报错日志(/var/log/apache2/error.log)发现罪魁祸首是脚本中需要的几个模块必须是PHP5.2以上的版本,遂升级PHP至最新版本可解决问题。
-Z&qPK7\o u0
test_harness.pl51Testing软件测试网P}7YQ
]A
_(@PaF
这个脚本是用Perl语言写的,我也是刚接触这个语言,但是我还是推荐各位童鞋看看他的文件结构,老外写的代码阅读起来还是比较舒服,附带着大量注释方便我这样的小白也能轻松理解每个函数的意义。我们主要需要用到的是display,profile,source这三个属性(具体作用ReadMe有解释),可以参考下我运行这个脚本的方式:51Testing软件测试网lx6]/e7fL1` `3Lw
perl test_harness.pl -display=:1 -source http://localhost/URLs -profile /home/eric/FFProfiles51Testing软件测试网DgoU v/F
Can’t locate POE.pm in @INC (@INC contains: /etc/perl /usr/local/lib/perl/5.10.1 /usr/local/share/perl/5.10.1 /usr/lib/perl5 /usr/share/perl5 /usr/lib/perl/5.10 /usr/share/perl/5.10 /usr/local/lib/site_perl .) at test_harness.pl line 100.
BEGIN failed–compilation aborted at test_harness.pl line 100.51Testing软件测试网4B
C7KYi/kol7l
这个问题纠结了我好几天,百思不得其解,关键还是我第一次使用Linux和Perl,对于很多报错信息都可以熟视无睹(请鄙视我),最后请教了Sergey童鞋,才恍然大悟原来是没有安装POE(请再次鄙视我),解决办法参考如下:
x [dX+_:G0sudo perl -MCPAN -e shell (sudo很关键啊,内牛满面)
I]2Fwg'cz0cpan> install POE
W
JYY B-bq`Y0如果提示YAML没有安装 (类似于XML的数据描述语言)51Testing软件测试网.k,pl#m,Zy
cpan>install YAML
jmvX/e
P4\0cpan> exit51Testing软件测试网P&Qp,l5_-s
x v*{I+H?o/O
这个时候自动化脚本已经开始运行了,我们可以通过外部机器访问虚拟机搭建的ShowSlow查看测试结果 (Ubuntu使用ifconfig查看本机IP地址,注意虚拟机网卡要设置成Bridged方式)51Testing软件测试网!A%W#y.C+w)p6wQu.z
monitor.sh
a(o9mm5z0m0自动调用之前编写test_harness.pl脚本,当我们将调用test_harness的一些参数添加进monitor后使用Linux的Cron就可以实现自动化测试了:)
+T
? m$j@%w$w;Oqi:F0注意将脚本文件夹的绝对路径赋值给Xvfb_PIDFILE,因为每次执行的时候系统会自动生成一个__xvfb.pid51Testing软件测试网&^F7EYK| m S
2010-7-1日更新51Testing软件测试网 ng&r.m1C
在Ubuntu和RedHat环境搭建下的Showslow平台点击测试URL进入Detail Page发现“Measurements over time”和“YSlow measurements history”两个区域的图形绘制不出,自己找了很久一直没有头绪,只好求助于ShowSlow的作者Sergey…
1 确保config.php文件中的$showslow_base=http://localhost/showslow/
2 查看phpinfo()确保Apache的模块mod_rewrite加载并启用了51Testing软件测试网{-Teqpb LS;{ S
1 Enable mod_rewrite
7NO*NT,uAc9m+N0sudo a2enmod rewrite ;
hml@3L#f02 change all of ”AllowOverride none” to “AllowOverride All”51Testing软件测试网
}VvLk&k
sudo vim /etc/apache2/sites-enabled/000-default ;51Testing软件测试网u2V;uF:] W#`K/|1a
3 Restart apache2
2i&MF@+Sg'J#HT0sudo /etc/init.d/apache2 restart;51Testing软件测试网@v$]%Q0h
刷新一下页面图形是不是回来了:)
9sM1`^ P/XR0在实际工作中我们还遇到了一个不大不小的问题就是有些页面需要登录才能访问,而我们的测试环境又是全自动化的,所以在这里需要用到Firefox的一个插件叫做Greasemonkey,可以执行JS脚本,这样只需要我们编写一个自动登录的小JS脚本,然后在Greasemonkey中设置那几个URL需要使用这个脚本,这样每次访问需要登录的界面就会自动登录了。
9]2}7GbDWx9U-Q0参考文档(部分需要翻墙):51Testing软件测试网 OV^+w}%Ux
http://developer.yahoo.com/performance/rules.html
i5I(| \2q vr9l0http://en.wikipedia.org/wiki/Xvfb51Testing软件测试网i5{/@XU;PSX r.O
http://developer.yahoo.com/yslow/51Testing软件测试网0S
`;vMQT$Z
http://www.showslow.com/
hY@r;[mAf$B.i0http://www.ubuntu.com/
^U"CW9Y;P0http://www.sergeychernyshev.com/blog/automating-yslow-and-pagespeed-using-xvfb/51Testing软件测试网;zHS2G-@l#`+o
http://www.linkedin.com/in/xiphoidindustries
C&fsSEV `0dA;n0http://groups.google.com/group/showslow/browse_thread/thread/5a2b19db7dfbefb751Testing软件测试网E]8yF*]r