前端自动化测试环境搭建

YUI TEST + SELENIUM + HUDSON = 前端自动化测试

一、安装包准备

1.yuitest_1.0.0b2.zip (http://yui.zenfs.com/releases/yuitest/yuitest_1.0.0b2.zip)

或者yui_3.4.0.zip (http://yui.zenfs.com/releases/yui3/yui_3.4.0.zip)

2.selenium java 客户端驱动selenium-java-2.5.0.zip (http://selenium.googlecode.com/files/selenium-java-2.5.0.zip)

3.selenium server selenium-server-standalone-2.5.0.jar (http://selenium.googlecode.com/files/selenium-server-standalone-2.5.0.jar)

4.Guava: Google Core Libraries for Java 1.5+ guava-r09.zip (http://guava-libraries.googlecode.com/files/guava-r09.zip)

5.node-v0.4.11.tar.gz (http://nodejs.org/dist/node-v0.4.11.tar.gz)

 

二、安装

1.将yuitest_1.0.0b2.zip解开，将测试需要使用的js与jar包提取出来放到一个方便的位置

f:\前端测试\js\yuitest_1.0.0b2>tree

卷 工作2 的文件夹 PATH 列表

卷序列号为 00620030 1046:4154

F:.

├─docs   一定要看

├─examples   测试例子

├─java

│  ├─build

│  ├─lib

│  ├─src

│  │  ├─com

│  │  │  └─yahoo

│  │  │      └─platform

│  │  │          └─yuitest

│  │  │              ├─config

│  │  │              ├─coverage

│  │  │              │  ├─grammar

│  │  │              │  ├─report

│  │  │              │  ├─results

│  │  │              │  └─writers

│  │  │              ├─results

│  │  │              ├─selenium

│  │  │              └─writers

│  │  └─org

│  │      └─json

│  └─tests

│      └─com

│          └─yahoo

│              └─platform

│                  └─yuitest

│                      ├─config

│                      ├─coverage

│                      │  └─results

│                      └─results

└─javascript

├─build

│  └─yuitest

│      └─npm

│          └─lib

├─npm

├─src

│  ├─asserts

│  ├─commonjs

│  ├─core

│  ├─errors

│  ├─mock

│  ├─nodejs

│  ├─reporting

│  ├─util

│  └─web

└─tests

├─asserts

├─core

├─mock

├─reporting

└─web

测试用到的jar包在java\build目录下

f:\前端测试\js\yuitest_1.0.0b2\java\build>ls -l

total 2513

-rw-rw-rw-   1 user     group      814123 Mar 17 13:56 yuitest-coverage-report.jar

-rw-rw-rw-   1 user     group      915240 Mar 17 13:56 yuitest-coverage.jar

-rw-rw-rw-   1 user     group      842731 Mar 17 13:56 yuitest-selenium-driver.jar

测试用到的js库在javascript\build目录下

f:\前端测试\js\yuitest_1.0.0b2\javascript\build>tree /F

卷 工作2 的文件夹 PATH 列表

卷序列号为 00000200 1046:4154

F:.

└─yuitest

│  yuitest-core-debug.js

│  yuitest-core-min.js

│  yuitest-core.js

│  yuitest-debug.js

│  yuitest-min.js

│  yuitest-node-debug.js

│  yuitest-node-min.js

│  yuitest-node.js

│  yuitest.js

│

└─npm

│  cli.js

│  package.json

│

└─lib

yuitest-node.js

把所有的jar包都放到/opt/js目录下

vm159:/opt/js # ll

total 28459

-rw-r–r– 1 root root   246902 Aug 16 09:38 jslint.js

-rw-r–r– 1 root root  1026207 Jul 14 08:44 jslint4java-2.0.0.jar

-rw-r–r– 1 root root     6324 Aug 27 09:04 jsmin.0.2.4.jar

-rw-r–r– 1 root root 25251715 Aug 31 11:03 selenium-server-standalone-2.5.0.jar

-rw-r–r– 1 root root   814123 Mar 17 13:56 yuitest-coverage-report.jar

-rw-r–r– 1 root root   915240 Mar 17 13:56 yuitest-coverage.jar

-rw-r–r– 1 root root   842731 Mar 17 13:56 yuitest-selenium-driver.jar

 

2.将selenium-java-2.5.0.zip解开，把selenium-java-2.5.0.jar放到/opt/jdk1.6.0_11/jre/lib/ext下

3.将guava-r09.zip解开，把guava-r09.jar和guava-r09-gwt.jar放到/opt/jdk1.6.0_11/jre/lib/ext下

4.安装nodejs

vm159:/usr/local # tar zxvf node-v0.4.11.tar.gz

vm159:/usr/local # cd node-v0.4.11/

vm159:/usr/locale/node-v0.4.11 # ./configure

vm159:/usr/local/node-v0.4.11 # make

vm159:/usr/local/node-v0.4.11 # make install

vm159:/usr/local/node-v0.4.11 # node –version

v0.4.11

vm159:/usr/local/node-v0.4.11 # vim ~/.bashrc

export NODE_PATH=/usr/local/node_modules

export PATH=$PATH:/opt/jdk1.6.0_11/bin:/usr/local/node_modules/.bin:/opt/apache-ant-1.8.2/bin

5.安装npm

vm159:/usr/local # curl http://npmjs.org/install.sh | sh

vm159:/usr/local # npm –version

1.0.27

#安装yuitest

vm159:/usr/local # npm install yuitest

vm159:/usr/local # yuitest –help

Usage: yuitest [options] [file|dir]*

Global Options

–groups groupname  Run only tests cases that are part of groupname.

–help              Displays this information.

–format <format>   Specifies output format (junitxml, tap, xunit).

–verbose           Display informational messages and warnings.

–webcompat         Load tests designed for use in browsers.

#安装yeti

vm159:/usr/local # npm install yeti

vm159:/usr/local # yeti –version

0.1.7

 

三、测试

1.nodejs环境中测试

vm159:/data/test/js # yuitest AssertTests.js –verbose

[INFO] Using XUnit output format.

[INFO] Loading /data/test/js/AssertTests.js

YUITest for Node.js

…………………………………………………………………………………………………………………………………………………………………………………………………..

Total tests: 221, Failures: 0, Skipped: 0, Time: 0.043 seconds

 

2.浏览器环境中测试

2.1启动selenium server,selenium server可以运行在本地或远端

C:\>java -jar selenium-server-standalone-2.5.0.jar  -timeout 500

2011-9-1 11:09:05 org.openqa.grid.selenium.GridLauncher main

信息: Launching a standalone server

11:09:05.810 INFO – Java: Sun Microsystems Inc. 20.1-b02

11:09:05.812 INFO – OS: Windows 7 6.1 x86

11:09:05.819 INFO – v2.5.0, with Core v2.5.0. Built from revision 13516

11:09:05.935 INFO – RemoteWebDriver instances should connect to: http://127.0.0.

1:4444/wd/hub

11:09:05.937 INFO – Version Jetty/5.1.x

11:09:05.938 INFO – Started HttpContext[/selenium-server/driver,/selenium-server

/driver]

11:09:05.940 INFO – Started HttpContext[/selenium-server,/selenium-server]

11:09:05.940 INFO – Started HttpContext[/,/]

11:09:05.961 INFO – Started org.openqa.jetty.jetty.servlet.ServletHandler@a83b8a

 

11:09:05.962 INFO – Started HttpContext[/wd,/wd]

11:09:05.965 INFO – Started SocketListener on 0.0.0.0:4444

11:09:05.965 INFO – Started org.openqa.jetty.jetty.Server@c1b531

2.2 启动测试

vm159:/data/test # java -jar /opt/js/yuitest-selenium-driver.jar  –host 10.6.2.188 –browsers *googlechrome –verbose –resultsdir=./result –coveragedir=./coveragehttp://192.168.194.159/test/basic-usage-example.htm

[INFO] Using command line value for selenium.host: 10.6.2.188

[INFO] Using command line value for selenium.browsers: *googlechrome

[INFO] Using command line value for results.outputdir: ./result

[INFO] Using command line value for coverage.outputdir: ./coverage

[INFO] Using tests from command line.

 

Running http://192.168.194.159/test/basic-usage-example.htm

[INFO] Navigating to ‘http://192.168.194.159/test/basic-usage-example.htm‘

[INFO] Page is loaded.

[INFO] Test complete.

Testsuite: Example Suite on googlechrome

Tests run: 7, Failures: 1, Ignored: 0

 

This test should fail: This test was supposed to fail.

[INFO] Outputting results to ./result/test-googlechrome-Example_Suite.xml

[INFO] Outputting /data/test/./coverage/lcov.info

[INFO] Outputting /data/test/./coverage/lcov-report/index.html

[INFO] Outputting /data/test/./coverage/lcov-report/null/index.html

[INFO] Outputting /data/test/./coverage/lcov-report/null/basic_usage_example.js.gcov.html

[INFO] Outputting /data/test/./coverage/lcov-report/null/basic_usage_example.js.func.html

运行上面的命令后，会在selenium server运行的机器上启动chrome,载入 http://192.168.194.159/test/basic-usage-example.htm 跑相应的test case。测试结果写到./result目录，覆盖率结果写到./coverage目录

要想得到覆盖率报告，在运行测试之前还需要做以下动作：

#插入侦测代码

vm159:/data/test # java -jar /opt/js/yuitest-coverage.jar -o basic_usage_example_coverage.js basic_usage_example.js

#将html文件中引用的js文件换成包含侦测代码的js文件，例如

将

<script type=”text/javascript” src=”basic_usage_example.js”></script>

改为

<script type=”text/javascript” src=”basic_usage_example_coverage.js”></script>

 

注意：test file只支持url格式,测试本地文件时需要开一个web服务或者将文件上传到别的Web服务器。

来一个更复杂一点的例子

#将测试参数写入配置文件

vm159:/data/test # cat conf.properties

selenium.host = 10.6.2.188    指定selenium server ip

selenium.port = 4444               指定selenium server port

selenium.browsers = *googlechrome,*iexplore,*firefox                       指定浏览器

results.format = JUnitXML                指定测试结果格式，JUnitXML可以很好的与hudson集成

coverage.format = HTML                  覆盖率报告格式，默认为LCOV

results.outputdir = ./result               测试结果存放目录

coverage.outputdir = ./coverage   覆盖率结果存放目录

console.mode = normal                     控制台是否输出

 

#载入配置文件进行测试

vm159:/data/test # java -jar /opt/js/yuitest-selenium-driver.jar  –conf conf.properties –verbosehttp://192.168.194.159/test/basic-usage-example.htm

[INFO] Loading configuration properties from conf.properties

[INFO] Using tests from command line.

 

Running http://192.168.194.159/test/basic-usage-example.htm

[INFO] Navigating to ‘http://192.168.194.159/test/basic-usage-example.htm‘

[INFO] Page is loaded.

[INFO] Test complete.

Testsuite: Example Suite on googlechrome

Tests run: 7, Failures: 1, Ignored: 0

 

This test should fail: This test was supposed to fail.

 

Running http://192.168.194.159/test/basic-usage-example.htm

[INFO] Navigating to ‘http://192.168.194.159/test/basic-usage-example.htm‘

[INFO] Page is loaded.

[INFO] Test complete.

Testsuite: Example Suite on iexplore

Tests run: 7, Failures: 1, Ignored: 0

 

This test should fail: This test was supposed to fail.

 

Running http://192.168.194.159/test/basic-usage-example.htm

[INFO] Navigating to ‘http://192.168.194.159/test/basic-usage-example.htm‘

[INFO] Page is loaded.

[INFO] Test complete.

Testsuite: Example Suite on firefox

Tests run: 7, Failures: 1, Ignored: 0

 

This test should fail: This test was supposed to fail.

[INFO] Creating directory ./result

[INFO] Outputting results to ./result/test-googlechrome-Example_Suite.xml

[INFO] Outputting results to ./result/test-iexplore-Example_Suite.xml

[INFO] Outputting results to ./result/test-firefox-Example_Suite.xml

[INFO] Outputting /data/test/./coverage/index.html

[INFO] Outputting /data/test/./coverage/basic_usage_example.js.html

 

3.yeti方式启动测试

使用方法：

a.首先启动yeti server

b.用浏览器访问http://XXX:8000,XXX为yeti server的ip

c.执行测试

例子：

#启动三个yeti server

vm159:/data/test # yeti –server –port 8000 2>/dev/null &

[1] 19694

vm159:/data/test # yeti –server –port 8001 2>/dev/null &

[2] 19696

vm159:/data/test # yeti –server –port 8002 2>/dev/null &

[3] 19698

#分别用chrome,firefox,opera打开http://192.168.194.159:8000/,http://192.168.194.159:8001/,http://192.168.194.159:8002/

#在chrome中运行测试

vm159:/data/test # yeti –port 8000 basic-usage-example.htm

Waiting for results. When you’re done, hit Ctrl-C to exit.

✖  Example Suite on Chrome (13.0.782.218) / Windows

6 passed,  1 failed

in Data Tests

This test should fail: This test was supposed to fail.

#在firefox中运行测试

vm159:/data/test # yeti –port 8001 basic-usage-example.htm

Waiting for results. When you’re done, hit Ctrl-C to exit.

✖  Example Suite on Firefox (6.0) / Windows

6 passed,  1 failed

in Data Tests

This test should fail: This test was supposed to fail.

#在opera中运行测试

vm159:/data/test # yeti –port 8002 basic-usage-example.htm

Waiting for results. When you’re done, hit Ctrl-C to exit.

✖  Example Suite on Opera (9.80) / Windows

6 passed,  1 failed

in Data Tests

This test should fail: This test was supposed to fail.