In last years, it's
normal to use javascript frameworks to test the javascript components in HTML
pages or use framework as Selnium to implement regression test directly on a
remote WebSite. I have a problem today, I want to avoid not-performed services so
I need to examine a remote web site and understand the performances and the
potentials not-blocking bugs on a retail portals (as a e-commerce). I need a Web Monitorng Mechanism.
These re some of the
main goals of good service.
My idea is to use
PhantomJS to automate the test for some UI functionalities. PhantomJS is a
headless WebKit scriptable with a JavaScript API. It has fast and native
support for various web standards: DOM handling, CSS selector, JSON, Canvas,
and SVG.
PhantomJS is an
optimal solution for:
- Headless Website Testing, run
functional tests with frameworks such as Jasmine, QUnit, Mocha, Capybara,
WebDriver, and many others.
- Programmatically capture web
contents: including SVG and Canvas. Create web site screenshots with
thumbnail preview
- Page Automation, Access and
manipulate webpages with the standard DOM API, or with usual libraries
like jQuery
- Network Monitoring, Monitor
page loading and export as standard HAR files. Automate performance
analysis using YSlow and Jenkins
Page Automation and
Network Monitoring are my features. PAY Attention for a good tool to monitor a
infrastructure, my advice is to introduce nagios components
https://www.nagios.org/ the scalability of
this solution is the best BUT you need to study many aspects in order to create
damage on you infrastructre.
My idea is quite
simpler than nagios but the effectiviness is very good. I want to create test
case with jenkins and phantomjs in order to test the UI functionalities.
I won't use Yslow.
The last one analyzes web pages and why
they're slow based on Yahoo!'s rules for high performance web sites.
YSlow for PhantomJS
also introduces new output formats for automated test frameworks: TAP (Test
Anything Protocol) and Junit. With this new feature, YSlow can now be added to
your continuous integration pipeline as a performance test suite, preventing performance
regression to be pushed to production. (guide for this approach:
http://yslow.org/phantomjs/)
The stack is quite
different in my case.
My initial ide was
to use the stack: PhantomJs, Jasmine (or karma) and Jenkins.
I've found this
guide and I implemented the solution.
In my test Im' going
to use the new UI of Jenknins, Blue Ocean (beta). The installation of jenkins
is easy and totally web-based.
To start using Blue
Ocean:
- Login to your Jenkins server
- Click Manage Jenkins in the
sidebar then Manage Plugins
- Choose the Available tab and
use the search bar to find BlueOcean beta
- Click the checkbox in the
Install column
- Click either Install without
restart or Download now and install after restart
- When installation is complete
click the Use Blue Ocean button in the classic UI
Jenkins works
perfectly yet with standard plugins.
PhantomJS itself is
not a test framework, it is only used to launch the tests via a suitable test
runner.
Jasmine is a
Behavior Driven Development testing framework for JavaScript. It does not rely
on browsers, DOM, or any JavaScript framework. Thus it's suited for websites,
Node.js projects, or anywhere that JavaScript can
run. Documentation & guides live here:
http://jasmine.github.io
For a quick start guide of Jasmine 2.0, see the beginning of
http://jasmine.github.io/2.0/introduction.html
In order to
integrate PhantomJS and Jasmine I tried to use Phantom-Jasmine. Phantom-Jasmine
is a simple set of two scripts for running your Jasmine Tests via Phantom.js.
The first script lib/console-runner.js is a plugin to Jasmine that outputs test
results (with ansi color codes) via console.log (included with a script tag
inside TestRunner.html). The second script lib/run_jasmine_test.coffee takes an
html file as it's first and only argument and then executes any Jasmine tests
that file loads. See
for more details
https://github.com/jcarver989/phantom-jasmine
(this is so and so... Too old).
With jasmine I have
to modify my html files adding something like this:
<link
rel="shortcut icon" type="image/png"
href="jasmine/lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css"
href="jasmine/lib/jasmine-2.0.0/jasmine.css">
<script
type="text/javascript"
src="jasmine/lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript"
src="jasmine/lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript"
src="jasmine/lib/jasmine-2.0.0/boot.js"></script>
In the past I used
jasmine or karma (for angularjs components) to test javascript components, in
this case I used custom page to publish a component an d to test it directly in
this custom page, the approach is the same but the difference is the browser used
for the test session, in this case headless browser as PhantomJS.
BUT
I want to monitor my
remote application, it's not a only unit test. While I was reading phantomjs
documention, I found CapserJS. CasperJS is a navigation scripting & testing
utility for the PhantomJS (WebKit) and SlimerJS (Gecko) headless browsers, written
in Javascript. (See
http://casperjs.org/)
It's very easy to
install, only few commands:
Adding -g paramteers
to add globally, for my purpose is a good solution.
The tests aren't
compatible with jasmine format but I can reuse some part, my advice is to read
this related information:
casper.test.begin('Testing
Login on Backoffice', 4, function(test){
casper.start('http://localhost:8080/myApp');
casper.then(function(){
test.assertUrlMatch(this.getCurrentUrl(),'http://localhost:8080/myApp/login.jsp');
test.assertTitle('Login', 'The
Web Site has correct title');
});
casper.wait(1500, function(){
this.sendKeys('input[name="j_username"]', 'admin');
this.sendKeys('input[name="j_password"]', 'adminpwd');
});
casper.then(function(){
this.click(".isubmit");
});
casper.wait(3000, function(){
test.assertHttpStatus(200);
test.assertTitle('Logged Admin', 'The
Admin is correct title');
});
casper.run(function(){
test.done();
})
});
PAY attention to
this: ('Testing Login on Backoffice', 4
4 is the number of
assertions aspected in this test suite, if the number is different for real
asserts you'll experince a "doubitus test" and a test suite fail!!
In my scenario is
important to publish the result of tests in xUnit way in order to publish
automatically on JenkinsCI. CasperJS supports the log generation via
parameter --xunit=<filename> ,
example of execution is this:
>casperjs.exe
test test-suites.js --xunit=log.xml
The last steps is to
confgiure a new job on jenkins, the sub steps are these:
- Configure the connection to
GitHub, follow this guide: https://gist.github.com/misterbrownlee/3708738
- Create a "Generic Build
Job"
- Add a nice name for the job
- Add the reference to the
project on GitHub (another can be used)
- Enable the option
"Delete workspace before build starts"
- Add step in the build
"Windows batch execute" (in my case winzoz 7)
- Add the code
"casperjs.exe test test-suites.js --xunit=xunit.xml"
- Add actions after build:
- Add JUNIT and
fill the pattern field: "*.xml" (IT'S MANDATORY a relative
directory), without this the nex step won't work
- Publish xUnit Test after
build
- Add email notofication for
every broken build
- Save
Now you are ready to
launch the build...
The result is
approved for my goals, probably I need to tune the configuration on e-mail
notification and better discrimination of jobs in order to parallelize the
process in the future, the pipelines'll help me for this purpose.
I hope to produce
new elements on this topic in next months.
Give me some tips if
you read this post :)
Bye
