KEMBAR78
Automated Web Testing using JavaScript | PDF
Automated Web Testing
using JavaScript
Simon Guest, Distinguished Engineer.
Neudesic, LLC
Web testing over the years...
Paradigm Shift
JavaScript Testing Tools
Why JavaScript for Testing?
4 Free
4 Open source
4 Modular
4 Active and vibrant community
4 Client and server in JavaScript - why not tests?
Goals of this session
Explore automated Web testing using JavaScript
Unit testing vs. end-to-end testing
Interchangeable frameworks for JavaScript Testing
When not to write tests!
Simple function to add two numbers
var add = function(x, y){
var result = x + y;
return result;
};
Let's write a test!
var add = function(x, y){
var result = x + y;
return result;
};
test("test that add function doesn't return null", function() {
var result = add(2, 3);
notEqual(result, null, "We expect the value to be non null");
});
Test that is performing an assertion
4 Lot's of code just to test a single value
4 Test will rarely, if ever, fail
4 Quality vs. quantity of tests
Simple function to add two numbers
var add = function(x, y){
var result = x + y;
return result;
};
Simple function to add two numbers
var add = function(x, y){
var result = x + y;
console.assert(result, "X should not be null!");
return result;
};
Assertions in production code?
Simple function to add two numbers
var add = function(x, y){
var result = x + y;
assert(result, "An error has occured with this page. Please refresh.");
return result;
};
Testing logic using unit
tests
QUnit
4 http://qunitjs.com
4 JavaScript Unit Test
Framework
4 Used to test jQuery, jQuery
UI, and jQuery Mobile
QUnit
test("a basic test example", function() {
var value = "hello";
equal( value, "hello", "We expect value to be hello" );
});
Demo - QUnit
Testing what the user
actually sees...
Demo - What happens if
the UI breaks?
Selenium
4 http://seleniumhq.org
4 Web Application Testing
Platform
4 Open source (Apache 2.0)
released by ThoughtWorks in
2004
Selenium
4 Selenium IDE - Basic test
recorder, implemented as a
Firefox extension
4 Selenium WebDriver -
Formerly Selenium RC, remote
control for browser
4 Selenium Grid - Instantiate
browsers on remote machines
Demo - Selenium IDE
Demo - Selenium Builder
Selenium IDE/Builder
4 Quick/easy to create tests
4 However, no test inheritence
4 Output is HTML or JSON, not script
4 Difficult to inject any complex logic
4 Has to be manually run through Firefox
Selenium WebDriver
WebDriver Specification
4 W3C Working Draft
4 Platform and language neutral interface to allow
control of a Web browser
4 Wire level protocol using HTTP and JSON
4 https://dvcs.w3.org/hg/webdriver/raw-file/default/
webdriver-spec.html
Selenium WebDriver
4 Implementation of WebDriver
protocol
4 Runs on host, listens on ports
4 Invokes browser (as
configured)
4 Drives browser to test
application
What do we use to write
those tests?
Jasmine
4 http://pivotal.github.io/
jasmine/
4 BDD Framework for writing
JavaScript tests
4 Clean syntax
4 Support for mocks (spies)
Jasmine
describe("a basic test example", function() {
it(“tests that true is always the truth”, function() {
expect(true).toBe(true);
});
});
Protractor
4 https://github.com/angular/
protractor
4 Testing framework for
AngularJS, but can be used for
any application
4 Supports Jasmine tests by
default (Mocha coming soon)
4 Scripts to support easy install
of Selenium
Protractor
4 Also installs Selenium dependencies
npm install –g protractor
webdriver-manager update
webdriver-manager start
Demo - WebDriver,
Protractor, Jasmine
What did we see?
4 Tests written using Jasmine
4 Being invoked using
Protractor
4 Sent to Selenium server using
WebDriver protocol
4 Selenium invoking Chrome to
run tests
Demo - Using WebBuilder
to create Protractor tests
Demo - Can I do unit
testing with WebDriver
also?
Do I have to launch a
browser?
PhantomJS
4 http://phantomjs.org
4 Headless (Qt-based) WebKit
with JavaScript API
4 Ability to act as a browser
without actually having a GUI
4 Ideal for running in hosted
instances (e.g. docker)
PhantomJS
page.open(‘http://localhost:8088’, function(status) {
page.evaluate(function() {
/* test elements on the page */
});
});
Demo - PhantomJS
Nice - but yet another
framework?
Nice - but yet
another framework?
4 PhantomJS can be invoked by
Selenium as a virtual browser
4 (Configure Selenium to invoke
PhantomJS CLI instead of
Chrome executable)
Demo - Invoking
PhantomJS using Selenium
WebDriver
Simplifying the
Stack
4 Selenium acting as a proxy
4 PhantomJS supports
WebDriver wire-level protocol
Simplifying the
Stack
4 Selenium acting as a proxy
4 PhantomJS supports
WebDriver wire-level protocol
phantomjs --webdriver=4444
Demo - Using GhostDriver
Wrapping Up
Wrapping Up
4 Many options for creating powerful Web tests using
JavaScript
4 Abundance of frameworks, many of which are
modular
4 Unit and end-to-end tests in both browser-based
and headless mode
Thank You!
Q&A
4 Simon Guest, Distinguished Engineer, Neudesic LLC
4 simonguest.com (@simonguest)
4 http://github.com/simonguest/gids
4 http://slideshare.net/simonguest
-- http://www.amazon.com/File-
New-Presentation-Developers-
Professionals/dp/0615910459

Automated Web Testing using JavaScript