0
Automated Web Testing
using JavaScript
Simon Guest
simon.guest@neudesic.com
Distinguished Engineer
Neudesic, LLC
Why bother with tests?

2
Confidence in your application

3
If I change something, I‟m confident that I didn‟t break the application
If I install something, I‟m confident that it did...
Types of tests

5
Unit Test – test discreet methods, functions, or services
E2E Test – test end to end operation of the application
Compatib...
Tools for testing

7
8
“Undercurrent” of JavaScript tools for testing

9
Why JavaScript for testing?

10
No cost to download
Open source frameworks can be forked/modified
Very modular – combination of frameworks and runners
Vib...
http://qunitjs.com
JavaScript unit testing framework
Used to test jQuery, jQuery UI and jQuery Mobile

test("a basic test ...
Testing what the user actually “sees”

Demo 13
http://seleniumhq.org
Web Application testing platform
Open source (Apache 2.0), released by TW in 2004
Selenium IDE – bas...
Shortcomings of Selenium IDE

15
No test inheritance
Output is HTML, not script
Difficult to inject any complex logic
Has to be manually run through Firefo...
Tests

WebDriver

Selenium Host
Browser

Application to test
17
http://pivotal.github.io/jasmine/
BDD Framework for writing JavaScript tests
Clean syntax
Support for mocks (spies)
descri...
Protractor

https://github.com/angular/protractor
Testing framework for AngularJS, built on top of WebDriverJS
Supports Ja...
Tests (Jasmine)

Protractor
WebDriverJS
Selenium Host
Browser (Chrome)

Application to test
Demo 20
Can I do unit testing using Selenium also?

21
Tests (Jasmine)

Protractor
WebDriverJS
Selenium Host
Browser (Chrome)

QUnit Web Page
Demo 22
Do I have to launch a browser?

23
http://phantomjs.org
Headless (Qt)WebKit with JavaScript API
Ability to act as a browser without actually having a GUI
Ide...
Nice, but yet another framework?

25
Tests (Jasmine)

Protractor
WebDriverJS
Selenium Host
Browser (PhantomJS)

Application to test
26
Tests (Jasmine)

Protractor
GhostDriver (PhantomJS)

Application to test
Demo 27
Conclusion

28
Testing is really important to maintain confidence in your application
Abundance of JavaScript testing frameworks, many of...
Q&A
Sample Code: http://github.com/neudesic/engineering-excellence

Simon Guest
simon.guest@neudesic.com
Distinguished Eng...
Upcoming SlideShare
Loading in...5
×

Automated Testing using JavaScript

6,599

Published on

An introduction to automated testing using JavaScript, focusing on QUnit, Jasmine, Protractor, Selenium, PhantomJS, and GhostDriver.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,599
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
91
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Automated Testing using JavaScript"

  1. 1. Automated Web Testing using JavaScript Simon Guest simon.guest@neudesic.com Distinguished Engineer Neudesic, LLC
  2. 2. Why bother with tests? 2
  3. 3. Confidence in your application 3
  4. 4. If I change something, I‟m confident that I didn‟t break the application If I install something, I‟m confident that it didn‟t break the application At any point, I‟m confident that the application still works as expected 4
  5. 5. Types of tests 5
  6. 6. Unit Test – test discreet methods, functions, or services E2E Test – test end to end operation of the application Compatibility Test – test with different browsers/devices/environments Performance Test – test with various loads and stress Security Test – test the confidentiality and integrity of the application 6
  7. 7. Tools for testing 7
  8. 8. 8
  9. 9. “Undercurrent” of JavaScript tools for testing 9
  10. 10. Why JavaScript for testing? 10
  11. 11. No cost to download Open source frameworks can be forked/modified Very modular – combination of frameworks and runners Vibrant and active development If I‟m writing my client and server in JavaScript, why not my tests? 11
  12. 12. http://qunitjs.com JavaScript unit testing framework Used to test jQuery, jQuery UI and jQuery Mobile test("a basic test example", function() { ok( true, "this test is fine" ); var value = "hello"; equal( value, "hello", "We expect value to be hello" ); }); Demo 12
  13. 13. Testing what the user actually “sees” Demo 13
  14. 14. http://seleniumhq.org Web Application testing platform Open source (Apache 2.0), released by TW in 2004 Selenium IDE – basic recorder, implemented as a Firefox Extension Selenium WebDriver – “remote control” for browser Selenium Grid – instantiate browsers on remote machines Demo - IDE 14
  15. 15. Shortcomings of Selenium IDE 15
  16. 16. No test inheritance Output is HTML, not script Difficult to inject any complex logic Has to be manually run through Firefox 16
  17. 17. Tests WebDriver Selenium Host Browser Application to test 17
  18. 18. http://pivotal.github.io/jasmine/ BDD Framework for writing JavaScript tests Clean syntax Support for mocks (spies) describe("a basic test example", function() { it(“tests that true is always the truth”, function() { expect(true).toBe(true); }); }); 18
  19. 19. Protractor https://github.com/angular/protractor Testing framework for AngularJS, built on top of WebDriverJS Supports Jasmine tests by default (Mocha coming soon) Scripts to support easy install of Selenium npm install –g protractor webdriver-manager update webdriver-manager start 19
  20. 20. Tests (Jasmine) Protractor WebDriverJS Selenium Host Browser (Chrome) Application to test Demo 20
  21. 21. Can I do unit testing using Selenium also? 21
  22. 22. Tests (Jasmine) Protractor WebDriverJS Selenium Host Browser (Chrome) QUnit Web Page Demo 22
  23. 23. Do I have to launch a browser? 23
  24. 24. http://phantomjs.org Headless (Qt)WebKit with JavaScript API Ability to act as a browser without actually having a GUI Ideal for running in hosted instances (e.g. docker) page.open(„http://localhost:8088‟, function(status) { page.evaluate(function() { /* test elements on the page */ }); }); Demo - Phantom 24
  25. 25. Nice, but yet another framework? 25
  26. 26. Tests (Jasmine) Protractor WebDriverJS Selenium Host Browser (PhantomJS) Application to test 26
  27. 27. Tests (Jasmine) Protractor GhostDriver (PhantomJS) Application to test Demo 27
  28. 28. Conclusion 28
  29. 29. Testing is really important to maintain confidence in your application Abundance of JavaScript testing frameworks, many of which are modular Unit and end-to-end tests in both browser-based and headless mode 29
  30. 30. Q&A Sample Code: http://github.com/neudesic/engineering-excellence Simon Guest simon.guest@neudesic.com Distinguished Engineer Neudesic, LLC30
  1. A particular slide catching your eye?

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

×