Automated testing of web applications using JavaScript can provide confidence that changes and new installations do not break existing functionality. There are various types of tests, including unit, end-to-end, compatibility, and performance tests. Popular JavaScript testing tools include QUnit for unit testing, Selenium and Protractor for end-to-end testing, and PhantomJS for headless browser testing without a GUI. These tools can test JavaScript applications and allow writing tests in JavaScript when the application itself is also written in JavaScript.

1. Automated Web Testing
using JavaScript
Simon Guest
simon.guest@neudesic.com
Distinguished Engineer
Neudesic, LLC

2. Why bother with tests?
2

3. Confidence in your application
3

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. Types of tests
5

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. Tools for testing
7

8. 8

9. “Undercurrent” of JavaScript tools for testing
9

10. Why JavaScript for testing?
10

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. 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. Testing what the user actually “sees”
Demo 13

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. Shortcomings of Selenium IDE
15

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

17. Tests
WebDriver
Selenium Host
Browser
Application to test
17

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. 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. Tests (Jasmine)
Protractor
WebDriverJS
Selenium Host
Browser (Chrome)
Application to test
Demo 20

21. Can I do unit testing using Selenium also?
21

22. Tests (Jasmine)
Protractor
WebDriverJS
Selenium Host
Browser (Chrome)
QUnit Web Page
Demo 22

23. Do I have to launch a browser?
23

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. Nice, but yet another framework?
25

26. Tests (Jasmine)
Protractor
WebDriverJS
Selenium Host
Browser (PhantomJS)
Application to test
26

27. Tests (Jasmine)
Protractor
GhostDriver (PhantomJS)
Application to test
Demo 27

28. Conclusion
28

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. Q&A
Sample Code: http://github.com/neudesic/engineering-excellence
Simon Guest
simon.guest@neudesic.com
Distinguished Engineer
Neudesic, LLC30