Xvfb+YSlow+ShowSlow搭建前端性能测试框架

上一篇 / 下一篇  2011-03-21 09:33:02 / 个人分类：others

查看( 465 ) / 评论( 0 ) / 评分( 0 / 0 )
 

工具介绍

p$Wte{3N206966

Xvfb: 主要就是通过内存计算模拟出图形界面，没有平常所见的操作界面，分为客户端和服务器51Testing软件测试网T/hlkT8B~s2T

YSlow: 当Firefox浏览网页时，可以分析网站的页面（基于Yahoo 14条评分原则），并指出如何进行优化提高网站性能51Testing软件测试网#ZJDUl:`T1q

ShowSlow:收集YSlow的测试结果并显示出来

Mj`$u(Pa)e#\U206966

Ubuntu：开源的Linux系统，界面越来越向Windows靠近

2l#YB4hzIlo206966

框架简介51Testing软件测试网b@e8wOo_b0Is

对于前端的童鞋我相信YSlow已经耳熟能详了，基于雅虎的评分规则对页面进行评分的Firefox插件，从中我们可以看出我们页面上的很多不足，并且可以知道我们如何改进和优化，配合将测试报告发送到本地的ShowSlow平台以提供给开发人员随时查看。在Xvfb的辅助下，这个框架最大的优点就是可以在无显示设备的环境下稳定运行！51Testing软件测试网D6y-Kr4i


/E*L i(g$VN206966

环境配置51Testing软件测试网#`R;?` f$b,ghx

典型的LAMP配置，网上资料很多，当然你也可以点此围观

H}QcN&XF B206966

搭建本地ShowSlow测试平台

DQ6c2P.s1^9i6qF206966

这个我之前在Windows Server 2003搭建过（点此围观），但是这次在Ubuntu下还是有所区别的（所有命令都在终端输入）

r|\_n;b Q206966
  1. sudo mkdir /var/www/showslow (建立一个空文件夹)
  2. sudo svn checkout http://showslow.googlecode.com/svn/trunk/ /var/www/showslow (将ShowSlow的源代码下载到本地，这一步会报错连接不上http://svn.facebook.com，首先要感谢国家，其次要感谢功夫网，最后我要说的是无视…)
  3. sudo mv config.sample.php config.php (修改文件夹名)
  4. sudo gedit config.php
  5. 根据实际情况修改$db,$user,$pass可以根据实际情况修改
  6. 按照上一步修改的数据创建相应的Mysql数据库

    //以root用户权限进入mysql
    mysql -uroot -p
    //创建一个数据库，名字和第二步你填写的保持一致
    create database ‘DBName‘;
    //切换到新建的数据库
    use ‘DBName’;
    // 将ShowSlow文件夹的tables.sql（数据库表）导入到新建的数据库中，注意无分号
    source /var/www/showslow/tables.sql
    //查看下是否导入成功了，貌似有个表名叫ShowSlow2，汗
    show tables;51Testing软件测试网(_{ q(K&mf8|

自动化脚本

9D/H]'R{4iY)Q206966

这个是我们这个框架最重要的部分，具体请参考Sergey Chernyshev的博客以及自动化脚本作者Aaron Kulick ，现在最新的Showslow的子文件夹automation有三个文件——monitor.sh (配置文件) test_harness.pl （自动化脚本） ReadMe（框架说明文件，强烈推荐各位童鞋仔细阅读，因为这关系到后面脚本的修改问题）

MC`8I(K4J2e7m(q{d206966

Xvfb51Testing软件测试网fR-X D;Gu1\

sudo apt-get install xvfb

h$vV#JgG g/n4A206966

Xvfb :1 -screen 0 1152x864x24 +extension RANDR51Testing软件测试网 S@0Q+Vr+N

我在此处发现报错：[dix] Could not init font path element /usr/share/fonts/X11/cyrillic, removing from list!51Testing软件测试网$gs%t,oS"m

通过Google大神的帮助，解决办法很简单，安装这个需要的字体——sudo apt-get install xfonts-cyrillic51Testing软件测试网R1_TgLY$p;LGne6N

创建一份测试页面列表

/x Q1v&v U206966

sudo gedit /var/www/URLs （在Apache下新建一个URLs列表，注意每一个链接为单独的一行)

MZ(@;@q6J-o{L9Y206966

创建一份Firefox测试专用的Profiles

o*k4dj/Y,G jq;y7Fc206966

/usr/lib/firefox-3.6.3/firefox -profilemanager

!Pn/iP? _I6|206966

首先我们要修改Firefox的application.ini文件最后一段，避免Firefox崩溃后发送报告

Tf9T%s5s e2M206966
[Crash Reporter]
Enabled=0

其次就是修改测试专用的Profiles的prefs.js，这个很关键，要设置一些Firefox属性才能让测试更好的进行下去，ShowSlow的论坛有推荐配置，（猛击这里）

^6S3I-E7fP[m'q:e#G206966

gedit /home/eric/FFProfiles/prefs.js51Testing软件测试网[8C8C;M,q8\*Yq4P f L3WZ

## PREFS.JS RECOMMENDATIONS (AUTOMATION)51Testing软件测试网K/G rt/b[7?%}

#do not let automated firefox manipulate the profile extensions (auto

W@q __5~tX9l&y$L206966

update)51Testing软件测试网.q rnX.hs%\

user_pref(“extensions.update.enabled”, false);

%D{3Q Q5?;o206966

user_pref(“extensions.update.notifyUser”, false);51Testing软件测试网-\e9\|Bb)EJ

#disable session restore on crash (do not want stale/old tabs)

M:i%F:f9~(DP r206966

user_pref(“browser.sessionstore.resume_from_crash”, false);51Testing软件测试网*Q"uO0]oim C

#do not let javascript. resize the window

MoG V Gj ^206966

user_pref(“dom.disable_window_move_resize”, true);

1fhgjs2V+iL:Gb0x.Y~;H206966

#do not let javascript. manipulate context menus (automation)

$SEZjvp206966

user_pref(“pref.advanced.javascript.disable_button.advanced”, false);51Testing软件测试网+KE8U}(Ym4s"H

#do not show me pop-up block messages (screenshot related)51Testing软件测试网+[x&Te)SZn

user_pref(“privacy.popups.showBrowserMessage”, false);51Testing软件测试网q+Gt [,?

#do not warn for weak SSL or mixed SSL/HTTP content:51Testing软件测试网^XF%D Hx9|

user_pref(“security.warn_entering_weak”, false);51Testing软件测试网x1a!J sk4On.Fg

user_pref(“security.warn_viewing_mixed”, false);

I$b;nU)U$z;P n ir206966

#firebug prefs

3[ VG {^3I3r"Z206966

user_pref(“extensions.firebug.allPagesActivation”, “on”);51Testing软件测试网)N/\-}^ KF

user_pref(“extensions.firebug.net.enableSites”, true);51Testing软件测试网2\nXGyL.^

user_pref(“extensions.firebug.defaultPanelName”, “YSlow”);

&icnVJr'R206966

user_pref(“extensions.firebug.previousPlacement”, 1);51Testing软件测试网/JT4N+jn-tDD@ HQ+r

#yslow prefs

)r3|?+Jq\3`$K LLt206966

user_pref(“extensions.yslow.autorun”, true);51Testing软件测试网MQ g2{)J{

user_pref(“extensions.yslow.beaconInfo”, “grade”);51Testing软件测试网Cx~]:U:Vz

user_pref(“extensions.yslow.beaconUrl”, “http://localhost/showslow/beacon/yslow/“);

'^,WpI%p x n+YU\2jl5j206966

user_pref(“extensions.yslow.optinBeacon”, true);

WMDRjY y4~5C-G%K206966

配置本地YSlow

IS4_4O b E"L V206966
  1. 打开Firefox输入：about:config（我保证会很小心的）
  2. filter中输入：yslow
  3. 修改以下三条数据

    extensions.yslow.beaconUrl = http://localhost/showslow/beacon/yslow/51Testing软件测试网 qC/Ck*kvG

    如果测试和服务器不在同一机器上，请将localhost改成实际地址51Testing软件测试网I4j-YsNk"WO

    extensions.yslow.beaconInfo = grade51Testing软件测试网FK_Mw"b+O$J

    extensions.yslow.optinBeacon = true51Testing软件测试网9[:W t#}I9i@-W

  4. 重启Firefox，have fun  :)

还等什么？开始你的测试之旅吧，查看测试报告的URL是：http://localhost/showslow/51Testing软件测试网~ Y ]kK4w WxT

在这个地方遇到了一个问题就是所有配置都是正确的情况下，ShowSlow依然接收不到YSlow发送的测试数据，后来在RedHat的服务器上搭建环境同样遇到了这个问题，经过SA白非童鞋的帮助查看Apache的报错日志（/var/log/apache2/error.log）发现罪魁祸首是脚本中需要的几个模块必须是PHP5.2以上的版本，遂升级PHP至最新版本可解决问题。51Testing软件测试网F] R?'p G

test_harness.pl51Testing软件测试网5g:CInsO \xD

这个脚本是用Perl语言写的，我也是刚接触这个语言，但是我还是推荐各位童鞋看看他的文件结构，老外写的代码阅读起来还是比较舒服，附带着大量注释方便我这样的小白也能轻松理解每个函数的意义。我们主要需要用到的是display，profile，source这三个属性（具体作用ReadMe有解释），可以参考下我运行这个脚本的方式：

"}*c$`?A}va206966

perl test_harness.pl -display=:1 -source http://localhost/URLs -profile /home/eric/FFProfiles

0LvP+N]1gP ^206966

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软件测试网4c5PlMQ"s

这个问题纠结了我好几天，百思不得其解，关键还是我第一次使用Linux和Perl，对于很多报错信息都可以熟视无睹（请鄙视我），最后请教了Sergey童鞋，才恍然大悟原来是没有安装POE（请再次鄙视我），解决办法参考如下：

4@&j e i#{5@'Q206966

sudo perl -MCPAN -eshell（sudo很关键啊，内牛满面）

6a+| O'S$lb206966

cpan> install POE51Testing软件测试网,M [e4u m*RNj

如果提示YAML没有安装 (类似于XML的数据描述语言)51Testing软件测试网I*@(rYJ2`Y/r+@c

cpan>install YAML

6mV-ii|VZ206966

cpan> exit51Testing软件测试网/v%h:K&Uenn

这个时候自动化脚本已经开始运行了，我们可以通过外部机器访问虚拟机搭建的ShowSlow查看测试结果 (Ubuntu使用ifconfig查看本机IP地址，注意虚拟机网卡要设置成Bridged方式)51Testing软件测试网@X:G c;v+yd

monitor.sh51Testing软件测试网Uh/kM'})f/Zm

自动调用之前编写test_harness.pl脚本，当我们将调用test_harness的一些参数添加进monitor后使用Linux的Cron就可以实现自动化测试了：）

Pt ]D+ax206966

注意将脚本文件夹的绝对路径赋值给Xvfb_PIDFILE，因为每次执行的时候系统会自动生成一个__xvfb.pid51Testing软件测试网W9l DxFrlO9w ]-i

2010-7-1日更新

/I P:n%N.WO7{[206966

在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加载并启用了

}W;W0OG;bWu206966

1 Enable mod_rewrite

'wm4AbI+pR"H!I.oO206966

sudo a2enmod rewrite ;

cF)@f)I+hUk'I!K206966

2 change all of  ”AllowOverride none” to “AllowOverride All”51Testing软件测试网s{B4lK;c

sudo vim /etc/apache2/sites-enabled/000-default ;51Testing软件测试网8\([LwA`6L-Ik:}9m

3 Restart apache2

L-u[C E:Kx206966

sudo /etc/init.d/apache2 restart;

s6D YD0_I;g7@)X206966

刷新一下页面图形是不是回来了：）

.db;\6f B7U206966

在实际工作中我们还遇到了一个不大不小的问题就是有些页面需要登录才能访问，而我们的测试环境又是全自动化的，所以在这里需要用到Firefox的一个插件叫做Greasemonkey，可以执行JS脚本，这样只需要我们编写一个自动登录的小JS脚本，然后在Greasemonkey中设置那几个URL需要使用这个脚本，这样每次访问需要登录的界面就会自动登录了。

;nu Sj4s~+y206966

参考文档（部分需要翻墙）：51Testing软件测试网.ka){3Ivd/PR#p l

http://developer.yahoo.com/performance/rules.html

:r f~ q,ZK:Mh.C7]206966

http://en.wikipedia.org/wiki/Xvfb

#c.f([0dFZ|g)_i206966

http://developer.yahoo.com/yslow/

(hMU#_!bq7E206966

http://www.showslow.com/51Testing软件测试网[S ZX6aG"lcG

http://www.ubuntu.com/51Testing软件测试网'b1V8S0Wy"}Y \z

http://www.sergeychernyshev.com/blog/automating-yslow-and-pagespeed-using-xvfb/

\ nMe&QH J*\206966

http://www.linkedin.com/in/xiphoidindustries

@|}YB6Z+Nm;v206966

http://groups.google.com/group/showslow/browse_thread/thread/5a2b19db7dfbefb751Testing软件测试网q%x,H}(d2G)Os$i



收藏 举报

TAG:

 

评分：0

我来说两句

Open Toolbar