Session from GIDS 2014, showing how to do automated Web testing using a variety of JavaScript frameworks, including QUnit, Jasmine, Protractor, Selenium, and PhantomJS

1. Automated Web Testing
using JavaScript
Simon Guest, Distinguished Engineer.
Neudesic, LLC

2. Web testing over the years...

4. Paradigm Shift

5. JavaScript Testing Tools

6. 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?

7. Goals of this session

8. Explore automated Web testing using JavaScript

9. Unit testing vs. end-to-end testing

10. Interchangeable frameworks for JavaScript Testing

11. When not to write tests!

12. Simple function to add two numbers
var add = function(x, y){
var result = x + y;
return result;
};

13. 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");
});

14. 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

15. Simple function to add two numbers
var add = function(x, y){
var result = x + y;
return result;
};

16. 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;
};

17. Assertions in production code?

18. 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;
};

19. Testing logic using unit
tests

20. QUnit
4 http://qunitjs.com
4 JavaScript Unit Test
Framework
4 Used to test jQuery, jQuery
UI, and jQuery Mobile

21. QUnit
test("a basic test example", function() {
var value = "hello";
equal( value, "hello", "We expect value to be hello" );
});

22. Demo - QUnit

23. Testing what the user
actually sees...

24. Demo - What happens if
the UI breaks?

25. Selenium
4 http://seleniumhq.org
4 Web Application Testing
Platform
4 Open source (Apache 2.0)
released by ThoughtWorks in
2004

26. 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

27. Demo - Selenium IDE

28. Demo - Selenium Builder

29. 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

30. Selenium WebDriver

31. 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

32. 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

33. What do we use to write
those tests?

34. Jasmine
4 http://pivotal.github.io/
jasmine/
4 BDD Framework for writing
JavaScript tests
4 Clean syntax
4 Support for mocks (spies)

35. Jasmine
describe("a basic test example", function() {
it(“tests that true is always the truth”, function() {
expect(true).toBe(true);
});
});

36. 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

37. Protractor
4 Also installs Selenium dependencies
npm install –g protractor
webdriver-manager update
webdriver-manager start

38. Demo - WebDriver,
Protractor, Jasmine

39. 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

40. Demo - Using WebBuilder
to create Protractor tests

41. Demo - Can I do unit
testing with WebDriver
also?

42. Do I have to launch a
browser?

43. 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)

44. PhantomJS
page.open(‘http://localhost:8088’, function(status) {
page.evaluate(function() {
/* test elements on the page */
});
});

45. Demo - PhantomJS

46. Nice - but yet another
framework?

47. 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)

48. Demo - Invoking
PhantomJS using Selenium
WebDriver

49. Simplifying the
Stack
4 Selenium acting as a proxy
4 PhantomJS supports
WebDriver wire-level protocol

50. Simplifying the
Stack
4 Selenium acting as a proxy
4 PhantomJS supports
WebDriver wire-level protocol
phantomjs --webdriver=4444

51. Demo - Using GhostDriver

52. Wrapping Up

53. 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

54. Thank You!

55. Q&A
4 Simon Guest, Distinguished Engineer, Neudesic LLC
4 simonguest.com (@simonguest)
4 http://github.com/simonguest/gids
4 http://slideshare.net/simonguest

56. -- http://www.amazon.com/File-
New-Presentation-Developers-
Professionals/dp/0615910459