30
Automated Web Testing using JavaScript Simon Guest [email protected] Distinguished Engineer Neudesic, LLC

Automated Testing using JavaScript

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Automated Testing using JavaScript

Automated Web Testing using JavaScript

Simon [email protected]

Distinguished EngineerNeudesic, LLC

Page 2: Automated Testing using JavaScript

Why bother with tests?

2

Page 3: Automated Testing using JavaScript

Confidence in your application

3

Page 4: Automated Testing using JavaScript

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

Page 5: Automated Testing using JavaScript

Types of tests

5

Page 6: Automated Testing using JavaScript

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

Page 7: Automated Testing using JavaScript

Tools for testing

7

Page 8: Automated Testing using JavaScript

8

Page 9: Automated Testing using JavaScript

“Undercurrent” of JavaScript tools for testing

9

Page 10: Automated Testing using JavaScript

Why JavaScript for testing?

10

Page 11: Automated Testing using JavaScript

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

Page 12: Automated Testing using JavaScript

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

Page 13: Automated Testing using JavaScript

Testing what the user actually “sees”

13Demo

Page 14: Automated Testing using JavaScript

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

Page 15: Automated Testing using JavaScript

Shortcomings of Selenium IDE

15

Page 16: Automated Testing using JavaScript

No test inheritance

Output is HTML, not script

Difficult to inject any complex logic

Has to be manually run through Firefox

16

Page 17: Automated Testing using JavaScript

17

Browser

Selenium Host

WebDriver

Application to test

Tests

Page 18: Automated Testing using JavaScript

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

});

});

Page 19: Automated Testing using JavaScript

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

Page 20: Automated Testing using JavaScript

20

Browser (Chrome)

Selenium Host

WebDriverJS

Application to test

Tests (Jasmine)

Protractor

Demo

Page 21: Automated Testing using JavaScript

Can I do unit testing using Selenium also?

21

Page 22: Automated Testing using JavaScript

22

Browser (Chrome)

Selenium Host

WebDriverJS

QUnit Web Page

Tests (Jasmine)

Protractor

Demo

Page 23: Automated Testing using JavaScript

Do I have to launch a browser?

23

Page 24: Automated Testing using JavaScript

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

Page 25: Automated Testing using JavaScript

Nice, but yet another framework?

25

Page 26: Automated Testing using JavaScript

26

Browser (PhantomJS)

Selenium Host

WebDriverJS

Application to test

Tests (Jasmine)

Protractor

Page 27: Automated Testing using JavaScript

27

GhostDriver (PhantomJS)

Application to test

Tests (Jasmine)

Protractor

Demo

Page 28: Automated Testing using JavaScript

Conclusion

28

Page 29: Automated Testing using JavaScript

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

Page 30: Automated Testing using JavaScript

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

30

Simon [email protected]

Distinguished EngineerNeudesic, LLC