Your SlideShare is downloading. ×
0
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Automated Web Testing using JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Automated Web Testing using JavaScript

14,501

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

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
46 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,501
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
196
Comments
1
Likes
46
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

×