Showslow+Yslow+DynaTrace前端性能自动化执行机使用手册

目录

1.背景...3

2.前端性能标准...3

2.1 yslow.. 3

2.2 page speed.. 4

2.3 dynatrace ajax edition.. 5

3.方案选择...5

3.1 yslow.. 5

3.2 dynaTrace Ajax Edition.. 5

3.3 showslow.. 6

4.环境搭建...6

4.1安装JDK..6

4.2安装Showslow..7

4.3安装Yslow..11

4.4安装DynaTrace..16

5.实现接口服务化...18

5.1 导入java工程... 18

5.2 接口描述... 38

5.3 调试界面... 39

5.4 dynatrace测试数据自动删除... 40

5.5 自动登录的实现... 47

6.常见问题及解决办法...50

6.1 showslow页面出现警告Warning: mcrypt_encrypt(): Key of size 27 not supported by this algorithm. Only keys of sizes 16, 24 or 32 supported in E:\yeronghuan\AppServ\www\showslow\users\classes\CookieStorage.php on line 64  50

6.2 如何去掉页头，简化页面布局... 51

6.3 showslow打开url结果分析详情页面时很慢，要等几十秒才能展开页面... 52

6.4如何去除URL结果明细页面中的tools广告栏目...52

6.5 yslow在firffox中无法上传测试数据到showslow数据库，查看apache服务器日志报500错误    54

 

 

1.背景

应用的性能测试与优化目前主要停留在服务器端的反馈，而对于前端性能标准的研究与测试相对比较空白，缺乏统一的标准与工具。众所周知，浏览器 html组件的下载及渲染性能直接影响最终的用户体验，目前应用的前端性能有许多优化空间，因此对前端性能进行测试与监控，有利于提升客户体验，做到全方位的性能监控，实现“客户第一”的价值。

2.前端性能标准

目前较为流行且免费的前端性能评测标准及工具，是以yahoo的yslow及google的pagespeed为主。yslow和page speed是两款firefox浏览器下功能类似的插件，其主要功能是在用户访问网页时，可用此插件对当前访问的网页按若干条固定的评分标准进行前端性能评分。另有dynatrace也提供与yslow和pagespeed类似的评价标准。

2.1 yslow

评分标准：主要有35条评分标准，具体标准参见官方文档http://developer.yahoo.com/performance/rules.html。

插件下载：http://developer.yahoo.com/yslow/

插件运行：插件运行后，在firefox中访问网页，插件将会显示对该网页的评分，15个标准（使用到的评分标准数在不同版本的yslow插件中有所不同）从A-F进行打分。下图是对阿里巴巴中文网站首页的一个打分情况：

2.2 page speed

评分标准：pagespeed主要的评标准有29条http://code.google.com/speed/page-speed/docs/rules_intro.html

插件下载：http://code.google.com/speed/page-speed/download.html

插件运行：pagespeed除了支持firefox外，还支持google chrome浏览器，下图是在firefox中用page speed评估http://www.1688.com的结果

2.3 dynatrace ajax edition

评分标准：评分标准分为四个大类，包括Cache、网络、Server端、JavaScript代码，每个大类都有A~F六个等级，各个大类下面的最佳实践细则与yslow及page speed类似http://community.dynatrace.com/ext/ajax/PUB/Best+Practices+on+Web+Site+Performance+Optimization。

下载安装：https://www.dynatrace.com

运行情况：dynatrace可以支持firefox和ie，且其可支持到函数级的度量分析，在windows下运行dynatrace如下图所示

3.方案选择

3.1 yslow

YSlow （解析为 why slow）是雅虎基于网站优化规则推出的工具，帮助你分析并优化网站性能。雅虎网站优化规则在十几个方面给你的网站提出优化建议，包括尽可能的减少 HTTP 的请求数、使用 Gzip 压缩、将 CSS 样式放在页面的上方、将脚本移动到底部、减少 DNS 查询等十几条规则，YSlow会根据这些规则分析你的网站，并给出评级。Yslow支持的浏览器包括firfox、Chrome。

自动化运行实现方式：JAVA + selenium + yslow +firfox

3.2 dynaTrace Ajax Edition

dynaTrace Ajax Edition是一款免费的前端性能评测工具，与非常优秀的yslow及page speed相比，其仍有几个不容忽视的优点：

1) 支持IE浏览器，这个优点直接秒杀另外两个工具

2) 支持JS函数级的性能分析

3) 对每条细则的建议更加详细具体

自动化运行实现方式：JAVA + selenium + dynatrace + firfox

3.3 showslow

showslow是前端性能测试数据收集与展示平台，它是一个开源的php项目，可以用来与firefox的yslow插件、pagespeed插件或者dynatrace通信，收集插件或程序所发送过来的信息并集中展示。只需要在firfox中进行简单配置，dynatrace安装目录下和环境变量中进行一些简单配置，即可实现自动上传yslow和dynatrace的监测数据结果到showslow平台作为存档、分析及监控。

4.环境搭建

4.1安装JDK

安装JDK的步骤如下：

下载的JDK安装文件（最好下载1.7版本）jdk-7u40-windows-i586.exe，双击安装包启动安装直至安装完成，然后开始配置环境：

点击我的电脑----属性----高级----环境变量----在系统变量中----点击新建，

在变量名中输入：JAVA_HOME

变量值中输入：C:\ProgramFiles (x86)\Java\jdk1.7.0_40  （根据实际安装路径修改）

 

再次点击新建：

在变量名中输入：CLASSPATH

变量值中输入：.;%JAVA_HOME%/lib/dt.jar;%JAVA_HOME%/lib/tools.jar;

 

然后在系统变量中找到Path，点击编辑，在变量值中加上：

%JAVA_HOME%/bin;%JAVA_HOME%/jre/bin;            （如果前面没有“;”需要加上）

 

配置完成之后，点击确定保存，然后cmd打开命令窗口输入：java或者javac，出现大串字符串表示配置成功。

也可以输入：java-version 查看java版本来查看是否配置成功

 

4.2安装Showslow

1、APPSERV安装（Apache+PHP+Mysql）

ShowSlow开源网站提供源码可以在本地搭建一个平台来收集YSlow和dynatrace的结果信息，主要是采用Apache+PHP+MySQL框架。可以单独安装以上三个模块，也可以选择集成好的软件，如xampp，本文选择 AppServ。

安装下载的appserv-win32-8.4.0.exe文件，建议安装路径改为非C盘，其他按照默认的步骤安装即可。安装到mysql的时候，记住密码。

在浏览器上输入http://127.0.0.1，显示如下内容，则appserv安装成功。

若是没有安装成功，在开始----所有程序----AppServ—Apache Restart

2、修改Mysql的配置

     1）开始----所有程序----AppServ---MySQLCommand Line Client，进入mysql的命令行，输入安装appserv时的mysql密码，执行如下操作：

mysql>create database showslow; //创建一个数据库

3、修改showslow的配置

下载showslow的源码地址：https://github.com/sergeychernyshev/showslow

把showslow文件夹放到appserv的安装录下\AppServ\www\文件夹下面

打开showslow文件夹，找到config.sample.php重命名config.php

修改config.php里面的参数

$db = 'showslow';

$user = 'root';

$pass =’ root1234’;  //密码根据安装appserv时填的情况修改。 

4、执行数据库表结构安装脚本

1）在浏览器中打开http://localhost/showslow/dbupgrade.php，点击回车之后出现网页如下内容，此步骤会在Mysql中新建showslow使用到的相关基础表。

2）在浏览器中打开http://localhost/showslow/users/dbupgrade.php，点击回车之后出现网页如下内容，此步骤会在mysql中新建showslow使用到的用户相关的表。

3）开始----所有程序----AppServ---MySQLCommand Line Client，进入mysql的命令行执行下面3条sql语句

use showslow;

alter TABLE yslow2 add COLUMN serviceNo varchar(30);

alter TABLE dynatrace add COLUMN serviceNo varchar(30);

 

5、重新启动浏览器：在浏览器内输入http://localhost/showslow/，显示下面的页面表示安装成功

如果数据库中已存在测试数据，例如已存在yslow的测试数据则显示Yslow的各个URL的整体分数，点击后面的链接，可以看到具体的相关分数

27项具体分数

4.3安装Yslow

Yslow安装文件下载地址：http://yslow.org/，可以选择chrome版本和Firefox版本，我们这里选择的是firfox版本。若是Firefox版本则需要先安装firebug插件，再安装Yshow。安装的时候可能有版本不兼容问题，最好使用firfox的24到34版本。

安装firfox浏览器

如果没有安装firfox浏览器则先安装Firefox 34.0，安装选择默认安装即可。

下面是firfox版本以xpi文件安装firbug和Yshow的方法：

安装firbug

安装Yshow 按照上面的方法安装，安装完成后需要重启firfox浏览器

重启firfox浏览器以后，打开扩展页面会显示下面的内容，表示firbug和yslow插件安装成功。

 

安装好Yshow后需要修改Yslow 选项的如下内容：

1、在firfox浏览器中输入about:config，点击“我保证会小心”，搜索yslow则可以看到关于Yslow的相关配置。

2、修改的配置项

extensions.yslow.autorun = true

extensions.yslow.beaconInfo = grade

extensions.yslow.beaconUrl =http://localhost/showslow/beacon/yslow/ （注意这里是本机的路径）

extensions.yslow.optinBeacon = true 

配置firbug对所有页面启用

打开firfox浏览器，在右上角的firbug工具栏图标中点击下拉按钮，在弹出的下拉菜单中选中“对所有网页启用”，勾选这个选项后会打开firbug调试页面，点击yslow页签打开yslow界面，然后关闭浏览器；以后每次打开firfox浏览器时会同时打开yslow界面，并且会把yslow的评分数据上传到showslow数据库中。

4.4安装DynaTrace

下载DyanTrace的安装包：

http://d1iai81hh60v12.cloudfront.net/dynatrace-AJAX-edition-4.5.0.2031.msi

全部默认安装即可。

安装完之后，找到安装路径下dtajax.ini文件。在该文件的最后加上如下配置：

 

 

-Dcom.dynatrace.diagnostics.ajax.beacon.uploadurl=http://localhost/showslow/beacon/dynatrace

-Dcom.dynatrace.diagnostics.ajax.beacon.portalurl=http://localhost/showslow/

-Dcom.dynatrace.diagnostics.ajax.beacon.autoupload=true

 

设置系统环境变量：

点击我的电脑----属性----高级----环境变量----在系统变量中----点击新建

在变量名中输入：DT_AE_AGENTACTIVE

变量值中输入：true

 

再次点击新建

在变量名中输入：DT_AE_AGENTNAME

变量值中输入：any

 

添加了上面两项配置后只要打开IE浏览器就会自动启动dynatrace作为代理收集前端页面的性能数据，并以any作为会话名称保存性能数据到showslow中，any可以自定义修改。

添加后的结果如下图

 

IE浏览器设置：

Dynatrace支持IE浏览器的版本IE8—IE11，安装完dynatrace之后如果需要使用IE进行测试则需要在IE浏览器的加载项管理中启用dynaTraceAJAX Edition Agent

4.5在内网环境使用DynaTrace

按照4.4步骤安装完成dynatrace后启动程序时会提示需要注册用户，然后连接互联网到dynatrace的官方网站登录认证通过以后才能正常使用dynatrace，因此需要安装dynatrace的机器能连接外网，同是还要注册一个账号，注册成功后通过一次联网认证通过，以后就可以不需要再次联网认证了；所以如果要在内网环境（不能连接外网）使用dynatrace的话需要执行下面三个步骤：

第一步：先在一台能连接互联网的机器按照4.4步骤安装dynatrace、注册用户、完成一次登录认证，然后将dynatrace的安装文件夹和用户配置文件夹打成压缩包，如下所示：

C:\Program Files (x86)\dynaTrace\dynaTraceAJAX Edition 4.5 （安装文件夹）

 

C:\Users\Administrator\.dynaTrace （用户配置文件夹）

 

第二步：在内网环境下的机器按照4.4步骤安装dynatrace。注意：使用的操作系统登录用户和安装的路径务必和第一步的保持一致。

第三步：将第二步安装好的dynatrace的安装文件夹和用户配置文件夹都删除掉，然后用第一步打的压缩包解压缩替换为原来的安装文件夹和用户配置文件夹即可。

4.6 dynatrace测试数据自动删除

前端性能测试每执行一次，dynatrace会创建一个会话并保存测试结果到当前用户的家目录下面，例如：C:\Users\ywx319502\.dynaTrace\ajax\browser\iesessions

当dynatrace运行时间长以后会产生很多测试结果文件，占满服务器的C盘空间，因此需要定时删除过期的dynatrace测试结果文件；可以用下面的批处理删除一天前的结果文件，再设置一个计划任务每天执行一次，这样系统就只保持一天的结果文件，不会对磁盘空间造成影响。

删除一天前的结果文件批处理：

forfiles /p C:\Users\ywx319502\.dynaTrace\ajax\browser\iesessions/d -1 -c "cmd /c echo @path" >C:\del.txt

for /f %%i in (C:\del.txt) do rd %%i /s /q

 

根据实际情况修改结果文件保存路径C:\Users\ywx319502\.dynaTrace\ajax\browser\iesessions，将上面两行批处理命令保存为bat文件，保存在用户的家目录下，例如：

 

设置计划任务，每天23:00执行删除结果文件批处理脚本del-dt-data.bat

操作步骤：开始菜单 -> 附件 -> 系统工具 -> 任务计划程序

添加完成计划任务后，可以在任务计划程序库中查看到已经添加的定时删除dynatrace结果文件任务。可以右键点击任务执行运行命令，检查一下任务是否正常执行。

 

4.7 执行机接口服务器部署

1、将java工程frontPerformance导出war包（如果已获取war则忽略此步骤）

2、将导出的war包部署到tomcat的wepapps目录下面

3、设置环境变量、修改配置文件

（1）设置firfox配置文件目录为系统变量（如果已设置则忽略此步骤）

点击我的电脑----属性----高级----环境变量----在系统变量中----点击新建

在变量名中输入：FIRFOX_PROFILER

变量值中输入：

C:\\Users\\Administrator\\AppData\\Roaming\\Mozilla\\Firefox\\Profiles\\52t540dm.default

 

变量值为firfox配置文件目录，获取方法：打开firfox，地址栏中输入about:support 然后点击页面中的“显示文件夹”按钮即可弹出配置文件目录地址（注意\要改为\\）。

（2）修改dynatrace启动文件路径

在frontPerformance.war压缩包中打开WEB-INF\classes\config\yslow.config配置文件，修改下面红框部分为本机安装的dynatrace启动文件路径（注意\要改为\\）。

（3）修改mysql数据库用户名密码

在frontPerformance.war压缩包中打开WEB-INF\classes\config\yslow.config配置文件，修改下面红框部分为本机安装的mysql数据库的用户名和密码。

在frontPerformance.war压缩包中打开WEB-INF\classes\applicationContext.xml配置文件，修改下面红框部分为本机安装的mysql数据库的用户名和密码。

 

 

4、启动tomcat服务（启动服务前需要在server.xml文件修改http端口为8080）

双击E:\apache-tomcat\bin目录下的启动文件startup.bat，查看服务器启动过程是否报错，如果报错根据错误信息修正错误；服务成功启动后显示下面的界面，不能关闭此窗口。

 

5.实现接口服务化

5.1 导入frontPerformance工程

将java工程压缩包解压到eclipse的workspace目录下

在eclipse中导入java工程

导入java工程后的目录结构如下：

配置java工程环境变量

 

设置环境变量、修改配置文件

1、设置firfox配置文件目录为系统变量（如果已设置则忽略此步骤）

点击我的电脑----属性----高级----环境变量----在系统变量中----点击新建

在变量名中输入：FIRFOX_PROFILER

变量值中输入：

C:\\Users\\Administrator\\AppData\\Roaming\\Mozilla\\Firefox\\Profiles\\52t540dm.default

 

变量值为firfox配置文件目录，获取方法：打开firfox，地址栏中输入about:support 然后点击页面中的“显示文件夹”按钮即可弹出配置文件目录地址（注意\要改为\\）。

 

2、修改dynatrace启动文件路径

打开config\yslow.config配置文件，修改下面红框部分为本机安装的dynatrace启动文件路径（注意\要改为\\）。

3、修改mysql数据库用户名密码

打开config\yslow.config配置文件，修改下面红框部分为本机安装的mysql数据库用户名密码。

打开applicationContext.xml配置文件，修改下面红框部分为本机安装的mysql数据库用户名密码。

 

启动服务器，调试服务

如果console出现上面的日志，则表示服务器正常启动，如果出现error日志，则需要根据日志定位报错的原因。

5.2 接口描述

1、性能测试执行接口

请求地址：http://IP:8080/frontPerformance/test!execPerformanceTest.action

请求方式：POST

参数：

{"serviceNo":"60020160826000000001","machineCode":"code00001","type":"all","url":"http://www.vmall.com/,https://www.tmall.com/","cdn":"res.vmallres.com,res8.vmallres.com,res9.vmallres.com,res7.vmallres.com,g.alicdn.com,fragment.tmall.com,gtms03.alicdn.com,bar.tmall.com","isLogin":false,"loginUrl":"","userName":"","passWord":"","userName_xpath":"","passWord_xpath":"","cmtBtn_xpath":""}

其中serviceNo为运单号；machineCode为执行机编号；type为请求类型，可选参数值all、dynatrace、yslow，默认选all；url为需要执行测试的URL地址，多个地址用逗号隔开；cdn为系统的CDN的URL地址,多个地址用逗号隔开；isLogin为测试页面是否需要登录，true需要，false不需要；userName、passWord为登录测试页面的账号密码，如何前面isLogin为true，则必须要填写userName、passWord参数;userName_xpath、passWord_xpath、cmtBtn_xpath分别为登录页面中用户名输入框、密码输入框、提交按钮3个元素的id属性值或者name属性值。

注意：以上参数值如果包含双引号的话需要在双引号前面加上转义字符\，建议双引号用单引号代替。

 

响应：

{"serviceNo":"60020160826000000001","machineCode":"code00001","code":"00","message":"执行机接收正常"}

状态码code:

00  执行机接收正常

01  执行机已被锁定 或 执行机繁忙 或 其他错误

 

2、查询执行机状态接口

请求地址：http://IP:8080/frontPerformance/test!queryMachineStatus.action

请求方式：POST

参数：

{"serviceNo":"60020160826000000001","machineCode":"machineCode001","fromQuery":"testCloud"}

响应：

{"serviceNo":"60020160826000000001","machineCode":"machineCode001","fromQuery":"testCloud","code":"00","message":"执行机空闲"}

状态码code:

00  执行机空闲

01  执行机繁忙

02  执行机异常

 

3、查询测试结果接口

请求地址：http://IP:8080/frontPerformance/test!queryTestResult.action

请求方式：POST

参数：

{"serviceNo":"60020160826000000001","machineCode":"machineCode001"}

响应：

{"serviceNo":"60020160826000000004","machineCode":"machineCode001","code":"00","message":"查询成功","result":[{"type":"yslow","url":"https://login.huawei.com/login/","timestamp":"2016-09-0718:04:07.0","data":{"o":"88","r":"13","w":"71052","lt":"2656","ynumreq":"90","ycdn":"80","yexpires":"70","yemptysrc":"60","ycompress":"50","ycsstop":"40","yjsbottom":"100","yexpressions":"100","yexternal":"0","ydns":"100","yminify":"90","yredirects":"100","ydupes":"100","yetags":"100","yxhr":"100","yxhrmethod":"100","ymindom":"100","yno404":"95","ymincookie":"100","ycookiefree":"100","ynofilter":"100","yimgnoscale":"100","yfavicon":"90"},"advice":{"ynumreq":"Thispage has 16 external Javascript scripts. Try combining them into one.
This page has 10 external background images. Try combining them with CSSsprites.","ycdn":"There are 61 static components that arenot on CDN.

You can specify CDN hostnames in yourpreferences. See YSlow FAQfor details.

","yemptysrc":"","yexpires":"Thereare 36 static components without a far-future expiration date.[\"http%3A%2F%2Ftestpic.vmall.com%2F20160426%2Fcss%2Fechannel%2Fec.core.min.css%3F20160307\"]","ycompress":"Thereare 16 plain text components that should be sentcompressed[\"http%3A%2F%2Ftestpic.vmall.com%2F20160426%2Fcss%2Fechannel%2Fec.core.min.css%3F20160307\"]","ycsstop":"","yjsbottom":"Thereare 5 JavaScript scripts found in the head of thedocument[\"http%3A%2F%2Fcarttest1.vmall.com%2Fcart%2FshoppingCart.json%3Ft%3D1474185061022%26callback%3Djsonp1474185060823\"]","yexpressions":"","yexternal":"Onlyconsider this if your property is a common user homepage.[\"There%20is%20a%20total%20of%2017%20inline%20scripts\"]","ydns":"Thecomponents are split over more than 4domains[\"omstest3.vmall.com%3A%205%20components%2C%2058.9K%20(19.7K%20GZip)\",\"testpic.vmall.com%3A%2029%20components%2C%20440.9K\"]","yminify":"Thereare 3 components that can beminified[\"inline%20%26lt%3Bscript%26gt%3B%20tag%20%2310\",\"inline%20%26lt%3Bscript%26gt%3B%20tag%20%2311\",\"inline%20%26lt%3Bscript%26gt%3B%20tag%20%2312\"]","yredirects":"","ydupes":"","yetags":"Thereare 55 components with misconfiguredETags[\"http%3A%2F%2Ftestpic.vmall.com%2F20160426%2Fcss%2Fechannel%2Fec.core.min.css%3F20160307\",\"http%3A%2F%2Ftestpic.vmall.com%2F20160426%2Fcss%2Fechannel%2Findex.min.css%3F20160309\"]","yxhr":"Thereis 1 XHR component that is notcacheable[\"http%3A%2F%2Fomstest3.vmall.com%2Fpage%2FtotalInfo.json%3Fcallback%3Djsonp1474185060822\"]","yxhrmethod":"","ymindom":"","yno404":"","ymincookie":"","ycookiefree":"Thereare 28 components that are notcookie-free[\"http%3A%2F%2Ftestpic.vmall.com%2F20160426%2Fcss%2Fechannel%2Fec.core.min.css%3F20160307\",\"http%3A%2F%2Ftestpic.vmall.com%2F20160426%2Fcss%2Fechannel%2Findex.min.css%3F20160309\"]","ynofilter":"","yimgnoscale":"","yfavicon":"Faviconis not cacheable"}},{"type":"dynatrace","url":"https://login.huawei.com/login/","timestamp":"2016-09-0718:04:19.0","data":{"rank":"90","cache":"100","net":"96","server":"100","js":"95","timetoimpression":"2645","timetoonload":"2651","timetofullload":"2818","timeonnetwork":"2545","timeinjs":"87","timeinrendering":"0","reqnumber":"15","xhrnumber":"1","pagesize":"87913","cachablesize":"79465","noncachablesize":"8448"}}]}

状态码code:

00  查询成功

01  查询失败（失败信息在message中显示）

5.3 调试界面

在前端性能执行服务器正常启动后在浏览器中打开下面的地址

http://localhost:8080/frontPerformance/index.jsp

页面打开接口调试页面

在param输入框中输入完整的参数后，点击提交就会向前端性能执行服务器提交请求，并在result输入框中显示执行结果。

5.4 自动登录的实现

当测试页面需要登录以后才能正常打开时，需要使用selenium模拟用户登录的操作，selenium的登录操作需要先获取用户名输入框、密码输入框、登录提交按钮3个元素的定位路径；定位方法有很多种，这里推荐使用xpath方式进行元素定位。

By.xpath() 使用介绍

这个方法是非常强大的元素查找方式，使用这种方法几乎可以定位到页面上的任意元素。在正式开始使用XPath进行定位前，我们先了解下什么是 XPath。XPath是XML Path的简称，由于HTML文档本身就是一个标准的XML页面，所以我们可以使用XPath的语法来定位页面元素。

假设我们现在以图(2)所示HTML代码为例，要引用对应的对象，XPath语法如下：

 

绝对路径写法(只有一种)，写法如下：

引用页面上的form元素(即源码中的第3行)：/html/body/form[1]

注意：1. 元素的xpath绝对路径可通过firebug直接查询。2. 一般不推荐使用绝对路径的写法，因为一旦页面结构发生变化，该路径也随之失效，必须重新写。3. 绝对路径以单/号表示，而下面要讲的相对路径则以//表示，这个区别非常重要。另外需要多说一句的是，当xpath的路径以/开头时，表示让Xpath解析引擎从文档的根节点开始解析。当xpath路径以//开头时，则表示让xpath引擎从文档的任意符合的元素节点开始进行解析。而当/出现在xpath路径中时，则表示寻找父节点的直接子节点，当//出现在xpath路径中时，表示寻找父节点下任意符合条件的子节点，不管嵌套了多少层级（这些下面都有例子，大家可以参照来试验）。弄清这个原则，就可以理解其实xpath的路径可以绝对路径和相对路径混合在一起来进行表示，想怎么玩就怎么玩。

 

下面是相对路径的引用写法：

查找页面根元素：//

查找页面上所有的input元素：//input

查找页面上第一个form元素内的直接子input元素(即只包括form元素的下一级input元素，使用绝对路径表示，单/号)：//form[1]/input

查找页面上第一个form元素内的所有子input元素(只要在form元素内的input都算，不管还嵌套了多少个其他标签，使用相对路径表示，双//号)：//form[1]//input

查找页面上第一个form元素：//form[1]

查找页面上id为loginForm的form元素：//form[@id='loginForm']

查找页面上具有name属性为username的input元素：//input[@name='username']

查找页面上id为loginForm的form元素下的第一个input元素：//form[@id='loginForm']/input[1]

查找页面具有name属性为contiune并且type属性为button的input元素：//input[@name='continue'][@type='button']

查找页面上id为loginForm的form元素下第4个input元素：//form[@id='loginForm']/input[4]

Xpath功能很强大，所以也可以写得更加复杂一些，如下面图的HTML源码。

 

如果我们现在要引用id为“J_password”的input元素，该怎么写呢？我们可以像下面这样写：

WebElement password =driver.findElement(By.xpath("//*[@id='J_login_form']/dl/dt/input[@id='J_password']"));

也可以写成：

WebElement password = driver.findElement(By.xpath("//*[@id='J_login_form']/*/*/input[@id='J_password']"));

这里解释一下，其中//*[@id=’ J_login_form’]这一段是指在根元素下查找任意id为J_login_form的元素，此时相当于引用到了form元素。后面的路径必须按照 源码的层级依次往下写。按照图（3）所示代码中，我们要找的input元素包含在一个dt标签内，而dt又包含在dl标签内，所以中间必须写上dl和dt 两层，才到input这层。当然我们也可以用*号省略具体的标签名称，但元素的层级关系必须体现出来，比如我们不能写成//* [@id='J_login_form']/input[@id='J_password']，这样肯定会报错的。

 

前面讲的都是xpath中基于准确元素属性的定位，其实xpath作为定位神器也可以用于模糊匹配。比如下面图所示代码：

 

这段代码中的“退出”这个超链接，没有标准id元素，只有一个rel和href，不是很好定位。不妨我们就用xpath的几种模糊匹配模式来定位它吧，主要有三种方式，举例如下。

a. 用contains关键字，定位代码如下：

driver.findElement(By.xpath(“//a[contains(@href,‘logout’)]”));

这句话的意思是寻找页面中href属性值包含有logout这个单词的所有a元素，由于这个退出按钮的href属性里肯定会包含logout，所以这种方式是可行的，也会经常用到。其中@后面可以跟该元素任意的属性名。

b. 用start-with，定位代码如下：

driver.findElement(By.xpath(“//a[starts-with(@rel,‘nofo’)]));

这句的意思是寻找rel属性以nofo开头的a元素。其中@后面的rel可以替换成元素的任意其他属性。

c. 用Text关键字，定位代码如下：

driver.findElement(By.xpath(“//*[text()=’退出’]));

这个方法可谓相当霸气啊。直接查找页面当中所有的退出二字，根本就不用知道它是个a元素了。这种方法也经常用于纯文字的查找。

另外，如果知道超链接元素的文本内容，也可以用

driver.findElement(By.xpath(“//a[contains(text(),’退出’)]));

这种方式一般用于知道超链接上显示的部分或全部文本信息时，可以使用。

 

Java代码实现

6.常见问题及解决办法

6.1 showslow页面出现警告Warning:mcrypt_encrypt(): Key of size 27 not supported by this algorithm. Only keys ofsizes 16, 24 or 32 supported in E:\yeronghuan\AppServ\www\showslow\users\classes\CookieStorage.phpon line 64

解决办法：修改E:\yeronghuan\AppServ\www\showslow\users\classes\CookieStorage.php文件，修改内容如下

修改前：

修改后：

6.2 如何去掉页头，简化页面布局

解决办法：修改页头php文件E:\yeronghuan\AppServ\www\showslow\header.php,将下图中红框部分删除即可

删除后的效果：

6.3 showslow打开url结果分析详情页面时很慢，要等几十秒才能展开页面

原因分析：由于url结果分析详情页面中引用了google网址的js库

http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js，国内网站不能访问谷歌的网站，导致下载js库下载不了，直到连接超时。

解决办法：

第一步：在网上下载1.5.1版本的jquery.min.js库，放在

E:\yeronghuan\AppServ\www\showslow\flot目录下面

第二步：将E:\yeronghuan\AppServ\www\showslow\details\index.php文件中引用到jquery.mini.js的地方改为引用本地js库

修改前

修改后

6.4如何去除URL结果明细页面中的tools广告栏目

解决办法：修改E:\yeronghuan\AppServ\www\showslow\details\index.php文件删除下面的内容：

6.5 yslow在firffox中无法上传测试数据到showslow数据库，查看apache服务器日志报500错误

在firfox中打开页面，但是页面的测试数据不能成功上传到showslow数据库中，查看apache服务器access日志，发现报500错误，error日志报[Thu Aug 18 18:10:53.100585 2016] [:error] [pid 2392:tid 1048][client ::1:4561] Incorrect string value: ''::1'' for function inet_aton错误：

解决办法：

办法1、修改执行机的hosts文件，添加localhost地址映射：127.0.0.1       localhost

办法2、将yslow插件的配置extensions.yslow.beaconUrl= http://localhost/showslow/beacon/yslow/中的localhost改为IP地址