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 JavaScrip...
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 r...
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 Quali...
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 n...
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...
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...
Selenium
4 Selenium IDE - Basic test
recorder, implemented as a
Firefox extension
4 Selenium WebDriver -
Formerly Selenium...
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 Di...
Selenium WebDriver
WebDriver Specification
4 W3C Working Draft
4 Platform and language neutral interface to allow
control of a Web browser
4 ...
Selenium WebDriver
4 Implementation of WebDriver
protocol
4 Runs on host, listens on ports
4 Invokes browser (as
configure...
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 moc...
Jasmine
describe("a basic test example", function() {
it(“tests that true is always the truth”, function() {
expect(true)....
Protractor
4 https://github.com/angular/
protractor
4 Testing framework for
AngularJS, but can be used for
any application...
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 ...
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 ac...
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 inv...
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 --webdrive...
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
m...
Thank You!
Q&A
4 Simon Guest, Distinguished Engineer, Neudesic LLC
4 simonguest.com (@simonguest)
4 http://github.com/simonguest/gids...
-- http://www.amazon.com/File-
New-Presentation-Developers-
Professionals/dp/0615910459
Automated Web Testing using JavaScript
Upcoming SlideShare
Loading in...5
×

Automated Web Testing using JavaScript

16,110

Published on

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

Published in: Engineering, Technology
1 Comment
49 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,110
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
226
Comments
1
Likes
49
Embeds 0
No embeds

No notes for slide

Automated Web Testing using JavaScript

  1. 1. Automated Web Testing using JavaScript Simon Guest, Distinguished Engineer. Neudesic, LLC
  2. 2. Web testing over the years...
  3. 3. Paradigm Shift
  4. 4. JavaScript Testing Tools
  5. 5. 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?
  6. 6. Goals of this session
  7. 7. Explore automated Web testing using JavaScript
  8. 8. Unit testing vs. end-to-end testing
  9. 9. Interchangeable frameworks for JavaScript Testing
  10. 10. When not to write tests!
  11. 11. Simple function to add two numbers var add = function(x, y){ var result = x + y; return result; };
  12. 12. 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"); });
  13. 13. 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
  14. 14. Simple function to add two numbers var add = function(x, y){ var result = x + y; return result; };
  15. 15. 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; };
  16. 16. Assertions in production code?
  17. 17. 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; };
  18. 18. Testing logic using unit tests
  19. 19. QUnit 4 http://qunitjs.com 4 JavaScript Unit Test Framework 4 Used to test jQuery, jQuery UI, and jQuery Mobile
  20. 20. QUnit test("a basic test example", function() { var value = "hello"; equal( value, "hello", "We expect value to be hello" ); });
  21. 21. Demo - QUnit
  22. 22. Testing what the user actually sees...
  23. 23. Demo - What happens if the UI breaks?
  24. 24. Selenium 4 http://seleniumhq.org 4 Web Application Testing Platform 4 Open source (Apache 2.0) released by ThoughtWorks in 2004
  25. 25. 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
  26. 26. Demo - Selenium IDE
  27. 27. Demo - Selenium Builder
  28. 28. 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
  29. 29. Selenium WebDriver
  30. 30. 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
  31. 31. 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
  32. 32. What do we use to write those tests?
  33. 33. Jasmine 4 http://pivotal.github.io/ jasmine/ 4 BDD Framework for writing JavaScript tests 4 Clean syntax 4 Support for mocks (spies)
  34. 34. Jasmine describe("a basic test example", function() { it(“tests that true is always the truth”, function() { expect(true).toBe(true); }); });
  35. 35. 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
  36. 36. Protractor 4 Also installs Selenium dependencies npm install –g protractor webdriver-manager update webdriver-manager start
  37. 37. Demo - WebDriver, Protractor, Jasmine
  38. 38. 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
  39. 39. Demo - Using WebBuilder to create Protractor tests
  40. 40. Demo - Can I do unit testing with WebDriver also?
  41. 41. Do I have to launch a browser?
  42. 42. 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)
  43. 43. PhantomJS page.open(‘http://localhost:8088’, function(status) { page.evaluate(function() { /* test elements on the page */ }); });
  44. 44. Demo - PhantomJS
  45. 45. Nice - but yet another framework?
  46. 46. 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)
  47. 47. Demo - Invoking PhantomJS using Selenium WebDriver
  48. 48. Simplifying the Stack 4 Selenium acting as a proxy 4 PhantomJS supports WebDriver wire-level protocol
  49. 49. Simplifying the Stack 4 Selenium acting as a proxy 4 PhantomJS supports WebDriver wire-level protocol phantomjs --webdriver=4444
  50. 50. Demo - Using GhostDriver
  51. 51. Wrapping Up
  52. 52. 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
  53. 53. Thank You!
  54. 54. Q&A 4 Simon Guest, Distinguished Engineer, Neudesic LLC 4 simonguest.com (@simonguest) 4 http://github.com/simonguest/gids 4 http://slideshare.net/simonguest
  55. 55. -- http://www.amazon.com/File- New-Presentation-Developers- Professionals/dp/0615910459
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×