Automated Web Testing using JavaScript
-
Upload
simon-guest -
Category
Engineering
-
view
7.051 -
download
3
description
Transcript of Automated Web Testing using JavaScript
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