Automated Web Testing using JavaScript

  • 10,169 views
Uploaded 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

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

More in: Engineering , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
10,169
On Slideshare
0
From Embeds
0
Number of Embeds
18

Actions

Shares
Downloads
126
Comments
1
Likes
40

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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