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 numbersvar 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 assertion4 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 numbersvar add = function(x, y){ var result = x + y; return result;};

Simple function to add two numbersvar 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 numbersvar 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

QUnittest("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/Builder4 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 Specification4 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)

Jasminedescribe("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

Protractor4 Also installs Selenium dependencies

npm install –g protractorwebdriver-manager updatewebdriver-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)

PhantomJSpage.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 Stack4 Selenium acting as a proxy

4 PhantomJS supports WebDriver wire-level protocol

Simplifying the Stack4 Selenium acting as a proxy

4 PhantomJS supports WebDriver wire-level protocol

phantomjs --webdriver=4444

Demo - Using GhostDriver

Wrapping Up

Wrapping Up4 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&A4 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