Automated Testing using JavaScript

Automated Web Testing using JavaScript

Simon Guestsimon.guest@neudesic.com

Distinguished EngineerNeudesic, 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 didn’t break the application

At any point, I’m confident that the application still works as expected

4

Types of tests

5

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

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

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

Testing what the user actually “sees”

13Demo

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

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 Firefox

16

17

Browser

Selenium Host

WebDriver

Application to test

Tests

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);

});

});

19

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

Protractor

npm install –g protractor

webdriver-manager update

webdriver-manager start

20

Browser (Chrome)

Selenium Host

WebDriverJS

Application to test

Tests (Jasmine)

Protractor

Demo

Can I do unit testing using Selenium also?

21

22

Browser (Chrome)

Selenium Host

WebDriverJS

QUnit Web Page

Tests (Jasmine)

Protractor

Demo

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

Nice, but yet another framework?

25

26

Browser (PhantomJS)

Selenium Host

WebDriverJS

Application to test

Tests (Jasmine)

Protractor

27

GhostDriver (PhantomJS)

Application to test

Tests (Jasmine)

Protractor

Demo

Conclusion

28

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

Q&ASample Code: http://github.com/neudesic/engineering-excellence

30

Simon Guestsimon.guest@neudesic.com

Distinguished EngineerNeudesic, LLC